どれだけ良い内容を書いても、検索エンジンやAIに「正しく理解」されなければ、検索結果やAIの回答には現れにくくなります。その理解を助けるのが、構造化データ(JSON-LD)と OGP(SNSシェア用の情報)です。EmDash には、これらを扱いやすくする仕組みが備わっています。

EmDashHead で基本のメタ情報を自動付与

EmDash の EmDashHead コンポーネントを <head> に置くと、ページタイトル・説明文・OGPなどの基本的なメタ情報が自動で出力されます。ページごとに手作業で書く必要がありません。

レイアウトの <head>
---
import { EmDashHead } from "emdash/ui";
---
<head>
  <EmDashHead page={pageCtx} />
  <!-- og:locale や og:image の補足はここで追加 -->
</head>

構造化データ(JSON-LD)を追加する

さらに踏み込んで、運営者情報・記事・FAQ・パンくずなどを構造化データで明示すると、検索エンジンやAIがページの意味を正確に把握できます。代表的なものを押さえておきましょう。

EmDashで構造化データ・OGPを入れてSEO/AIOに強くするの図解

これらは <script type="application/ld+json"> として出力します。Astro なら、データをJSONとして埋め込むだけです。

記事ページ
<script type="application/ld+json" set:html={JSON.stringify({
  "@context": "https://schema.org",
  "@type": "BlogPosting",
  "headline": post.data.title,
  "datePublished": post.data.post_date,
  "author": { "@type": "Person", "name": "藤原 雅也" }
})} />

AIO(AI最適化)も同じ考え方

近年は、AIアシスタントが検索の入口になる場面が増えています。構造化データは、AIがページ内容を理解する助けになります。見出しと答えが構造化され、意味が明示されたページは、SEOだけでなく AIO(AI最適化)の観点からも意義があります。OGP画像を用意しておけば、SNSでシェアされたときの見栄えも良くなります。

全ページに入れている構造化データの図解

このサイトでも、運営者・記事・FAQ・パンくずの構造化データと、OGP画像を全ページに実装しています。SEO/AIOを意識したサイト制作のご相談は、お問い合わせからどうぞ。