EmDashで構造化データ・OGPを入れてSEO/AIOに強くする
検索エンジンやAIに正しく理解されるサイトには、構造化データとOGPが欠かせません。EmDashの EmDashHead を使ったメタ情報の自動付与と、JSON-LDの追加方法を解説します。EmDashでサイトを作る方や、検索結果・AIでの見え方を整えたい制作会社の方に向けて、実装者の視点でまとめています。

どれだけ良い内容を書いても、検索エンジンやAIに「正しく理解」されなければ、検索結果やAIの回答には現れにくくなります。その理解を助けるのが、構造化データ(JSON-LD)と OGP(SNSシェア用の情報)です。EmDash には、これらを扱いやすくする仕組みが備わっています。
EmDashHead で基本のメタ情報を自動付与
EmDash の EmDashHead コンポーネントを <head> に置くと、ページタイトル・説明文・OGPなどの基本的なメタ情報が自動で出力されます。ページごとの手書きは不要です。
---
import { EmDashHead } from "emdash/ui";
---
<head>
<EmDashHead page={pageCtx} />
<!-- og:locale や og:image の補足はここで追加 -->
</head>構造化データ(JSON-LD)を追加する
さらに踏み込んで、運営者情報・記事・FAQ・パンくずなどを構造化データで明示すると、検索エンジンやAIがページの意味を正確に把握できます。代表的なものを押さえておきましょう。

これらは <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を意識したサイト制作のご相談は、お問い合わせからどうぞ。