AstroブログにJSON-LDを実装してSEO強化する方法

この記事では、AstroブログにJSON-LDを実装してSEOを強化する方法を解説します。

この記事でわかること:

JSON-LDと構造化データの基礎知識
Schema.orgの仕様と使い方
Astroでの具体的な実装方法
リッチリザルトテストによる検証方法

JSON-LDとは

JSON-LD is a lightweight Linked Data format. It is easy for humans to read and write. It is based on the already successful JSON format and provides a way to help JSON data interoperate at Web-scale.

JSON-LD(JavaScript Object Notation for Linked Data)は、Webページに構造化データを埋め込む手法の一つです。

構造化データを埋め込むことで、検索エンジンがWebページの内容を適切に理解し、検索結果の質を高めることができます。

つまり、SEO(検索エンジン最適化)の改善に役立ちます。

また、埋め込んだ構造化データには、コンテンツのタイトルや説明、画像などのメタデータが含まれるため、ソーシャルメディアでのコンテンツ共有を促進する効果もあります。さらに、JSON-LDはJSONベースの記述なので、Web開発者にとって親しみやすい形式となっています。このようにJSON-LDを活用することで、Webサイト全体の可視性とアクセシビリティが向上し、ユーザーへの情報伝達がスムーズになります。

JSON-LD - JSON for Linked Datajson-ld.org

Schema.org について

基本的にJSON-LDで構造化データを検索エンジンなどに提供するに当たっては、Schema.org の仕様に従うのが良いです。

Schema.orgとは、Google、Microsoft、Yahoo!、Yandexなどの主要な検索エンジンが共同で開発し、ウェブサイトの構造化データマークアップを標準化したものです。

基本的な概念

アイテムスコープ(Itemscope)
- 構造化データのルート要素を定義します。
アイテムタイプ(Itemtype)
- 構造化データの種類を定義します。
アイテムプロパティ(Itemprop)
- アイテムに関する具体的な情報（名前、説明、画像など）を指定します。

JSON-LDでは上記を以下の様にJSON形式で記述します。

{
  "@context": "https://schema.org",
  "@type": "WebSite",
  "name": "フナイログ",
  "url": "https://funailog.com",
  "author": {
    "@type": "Person",
    "name": "Ryota Ikezawa"
  }
}

この例では、@context によって、Schema.orgの語彙が使用されていることが宣言されます。 @type によってアイテムの種類がウェブサイトであること、また制作者の名前が指定されています。

具体的にどのようなスキーマがあるかは、 https://schema.org/docs/schemas.html で確認することが可能です。

JSON-LDを組み込むためのステップ

今回はAstro.buildで構築されたこのブログの記事ページに対して、JSON-LDを組み込んでみます。

これは先に述べたように、ブログ記事の検索性を向上させるための一手段です。コンポーネントの分離や構成にも寄りますが、記事を描画するコンポーネントの冒頭に以下のようなscriptを書いて外から個別の値を渡すのが良いと思います。

<script type="application/ld+json">
  {
    "@context": "https://schema.org",
    "@type": "WebSite"
    // ...
  }
</script>

あるいは、以下のようにするのも良いでしょう。

---
import { Article, WithContext } from 'schema-dts';
type Props = {
  jsonLd?: WithContext<Article>;
};

const { jsonLd } = Astro.props;
---

<head>
  {
    jsonLd && (
      <script
        is:inline
        type="application/ld+json"
        set:html={JSON.stringify(jsonLd)}
      />
    )
  }
</head>