FrontEnd

Next.jsでJSON-LDを実装する

投稿日:

はじめに

Next.jsでリッチリザルト表示する為にJSON-LDを実装する方法を調べたので紹介したいと思います。

リッチリザルトとは

Google検索した際に通常の検索結果に加えて、画像やFAQやパンくずなどの情報が追加された検索結果のことです。
こちらのビジュアル付きの一覧を見ると分かりやすいです。現在は全部で34種類あるようです。
リッチリザルトが検索結果に表示される為にはGoogleにページ内容を理解してもらう為の構造化データを準備しておく必要があります。

構造化データとは

構造化データとは、ウェブページのコンテンツの詳細を検索エンジンが理解しやすくするために使用されるデータフォーマットです。
Google検索では、JSON-LD、microdata、RDFaの3つがサポートされていますが、JSON-LDが推奨されているので今回はJSON-LD形式で実装したいと思います。

@context のshcema.orgはGoogle、Microsoft、Yahoo!、Yandexの4社が共同で開発された構造化データを記述するための標準スキーマで、ウェブページのコンテンツを検索エンジンにより理解させるための統一された語彙を提供しています。
以下の例で言うと、 headline 以下が語彙となっています。
簡単に言えば、JSON-LDはデータの書き方で、schema.orgはそのデータの意味を表していると言えます。
語彙については公式を確認してみてください。

Next.jsでJSON-LDを実装

JSON-LDデータの作成

今回はTypescriptで実装したいと思います。
公式のサンプルにあるように、JSON-LD用の型定義ライブラリの schema-dts を使用して型チェックしてます。
以下では記事の構造化データを作成していて、 WithContext<Article> でJSON-LDの型定義しています。ジェネリクス型になっているのでArticleを他データ型に変更出来ます。

JSON-LDデータの埋め込み

作成したJSON-LDコンポーネントをscript>タグの中に埋め込みます。

 

リッチリザルトテスト

実際にGoogleに正しく構造化データが認識されるかテストして確認出来ます。
テストツールでJSON-LDスクリプトを含むページの公開URL、scriptタグのコードをテストツールに入力して確認出来ます。
以下ではコードを直接入力する形でテストした結果です。正しく実装出来てれば各値が確認出来て、不備等あれば教えてくれてます。

さいごに

リッチリザルト表示用の構造化データを実装してテストまでの流れを紹介しました。

おすすめ書籍

実践Next.js —— App Routerで進化するWebアプリ開発 エンジニア選書 Next.js超入門

 

 

page_footer_responsive




-FrontEnd
-,

執筆者:

免責事項

このブログは、記事上部に記載のある投稿日時点の一般的な情報を提供するものであり、投資等の勧誘・法的・税務上の助言を提供するものではありません。仮想通貨の投資・損益計算は複雑であり、個々の取引状況や法律の変更によって異なる可能性があります。ブログに記載された情報は参考程度のものであり、特定の状況に基づいた行動の決定には専門家の助言を求めることをお勧めします。当ブログの情報に基づいた行動に関連して生じた損失やリスクについて、筆者は責任を負いかねます。最新の法律や税務情報を確認し、必要に応じて専門家に相談することをお勧めします。


comment

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

CAPTCHA


関連記事

react-icon

Vite 3を使ってみた

1 はじめに2 なぜViteは早いのか2.1 Native ESMの活用2.2 esbuildによる事前バンドル3 Viteのセットアップ3.1 Reactテンプレートでのセットアップ3.2 vite ...

Vue 3とVuex 4とTypeScriptでタイプセーフに開発する

1 はじめに1.1 インストール1.2 Storeの設定2 Storeの作成3 StoreをComponentから使用する4 $storeプロパティに型をつける5 さいごに6 おすすめ書籍 はじめに ...

AMPに対応してモバイルページを高速に表示させる

1 はじめに2 AMPとは3 なぜAMPでは高速に表示されるのか3.1 非同期スクリプトのみを許可3.2 リソース読み込みに優先度を付ける3.3 プリレンダリング4 AMPの3要素4.1 AMP HT ...

フロントエンドで動画デコレーション&レンダリング

1 はじめに2 レンダリング方法の検討3 背景部分のキャプチャ3.1 modern-screenshotの導入3.2 DOMのキャプチャ4 ffmpeg.wasmで画像と動画を合成4.1 ffmpeg ...

react-icon

【初級者向け】Reactの開発環境の構築

1 はじめに2 Reactとは2.1 Declarative2.2 Component-Based2.3 Learn Once, Write Anyway2.4 Reactのメリット、デメリット3 環 ...

フォロー

blog-page_side_responsive

2024年7月
 123456
78910111213
14151617181920
21222324252627
28293031  

アプリ情報

私たちは無料アプリもリリースしています、ぜひご覧ください。 下記のアイコンから無料でダウンロードできます。