【ITニュース解説】Using JSON-LD for SEO in Free DevTools & Icon Websites
2025年09月20日に「Dev.to」が公開したITニュース「Using JSON-LD for SEO in Free DevTools & Icon Websites」について初心者にもわかりやすく解説しています。
ITニュース概要
Webページの内容を検索エンジンに正確に伝える「JSON-LD」は、SEOを強化する構造化データだ。大規模サイトでもjsonld.jsで自動生成可能で、ReactやVueなど主要JSフレームワークに簡単に組み込める。これにより、検索結果での表示が豊かになり、Webサイトの視認性と集客力が向上する。
ITニュース解説
ウェブサイトを公開する際、多くの人が自分の作ったページをたくさんの人に見てもらいたいと考える。そのためには、Googleなどの検索エンジンに自分のサイトを適切に「理解」してもらい、「評価」してもらうことが重要である。検索エンジンは日々膨大な量のウェブページを巡回しているが、単にページ上のテキストを読むだけでは、そのページが具体的に何を意味するのか、どんな種類の情報を提供しているのかを完全に把握することは難しい。例えば、「帽子」という単語があっても、それがファッションアイテムとしての帽子なのか、ウェブサイトのアイコンとしての帽子なのかを文脈だけで判断するには限界がある。
ここで登場するのが「構造化データ」という考え方である。構造化データとは、ウェブページの内容を、人間だけでなく検索エンジンにもわかりやすいように、特定のルールに沿って整理し、マークアップした情報のことである。いわば、検索エンジンに「このページはこういう内容です」と、明確な「説明書」を渡すようなものである。これにより、検索エンジンはページの主題や各要素の意味を正確に理解し、より適切に検索結果に表示できるようになる。
構造化データを記述する方法はいくつか存在するが、現在最も主流で、Googleをはじめとする主要な検索エンジンが推奨しているのが「JSON-LD（JavaScript Object Notation for Linked Data）」である。JSON-LDは、ウェブページ内にJSON形式でデータを埋め込むことで、構造化データを表現する方法である。JSONは、JavaScriptのオブジェクトの記述方法に似た、非常にシンプルで人間にも読み書きしやすいデータ形式であるため、開発者にとっても扱いやすいという利点がある。
JSON-LDをウェブサイトに導入することには、数多くの大きなメリットがある。まず、検索結果の表示が「リッチ」になるという点だ。通常、検索結果にはタイトルと簡単な説明文が表示されるが、JSON-LDを使うことで、商品レビューの星評価、イベントの日付、FAQ（よくある質問と回答）、パンくずリスト（サイト内の階層を示すナビゲーション）といった追加情報が検索結果に表示されるようになる。これらは「リッチスニペット」と呼ばれ、ユーザーの目を引き、クリック率の向上に繋がる可能性が高い。次に、ページの「内容が明確になる」点がある。例えば、あるページが単なる画像ではなく「SVG形式のハットアイコン」であることをJSON-LDで明示できる。これにより、検索エンジンはそのページがユーザーにとってどのような価値を持つかを正確に判断できるようになり、関連性の高い検索クエリに対して表示されやすくなる。さらに、JSON-LDは「自動生成しやすい」という特徴を持つ。ウェブサイトに数千ページものコンテンツがある場合、一つ一つのページに手動で構造化データを記述するのは現実的ではないが、JSON-LDはプログラムによる動的な生成に適しているため、大規模なサイトでも効率的に導入できる。「拡張性」も高く、開発ツール集やアイコンライブラリのように多くのコンテンツを持つサイトに最適である。
具体的なJSON-LDの記述例を見てみよう。もしあなたのウェブサイトに「ハットのSVGアイコン」をダウンロードできるページがあるとする。このページに以下のようなJSON-LDをHTMLの<head>タグ内に埋め込むことで、検索エンジンにそのページの情報を伝えることができる。
1<script type="application/ld+json"> 2{ 3 "@context": "https://schema.org", 4 "@type": "ImageObject", 5 "name": "Hat SVG Icon", 6 "description": "Download a free hat SVG icon in multiple styles and formats.", 7 "contentUrl": "https://example.com/svg/hat.svg", 8 "thumbnailUrl": "https://example.com/images/hat-icon.png", 9 "license": "https://example.com/license" 10} 11</script>
このコードでは、「@context」で使われているschema.orgは、構造化データの語彙（どのような情報をどのような名前で表現するかというルール）を定義している標準的なウェブサイトである。そして「@type」で「ImageObject（画像オブジェクト）」と指定することで、このページが画像リソースであることを明示している。さらに「name（名前）」「description（説明）」「contentUrl（コンテンツのURL）」「thumbnailUrl（サムネイル画像のURL）」「license（ライセンス）」といったプロパティを使って、アイコンに関する詳細な情報を提供しているのである。
このようにJSON-LDを記述することで、検索エンジンはこのページが単なるウェブページではなく、「ハットのSVGアイコン」という明確な名前と説明を持ち、ダウンロード可能なURLを持つ画像リソースであることを正確に理解できるようになる。
ウェブサイトが数百、数千ものページを持つ場合、手動でJSON-LDを記述するのは非常に手間がかかる作業である。この課題を解決するために「jsonld.js」のようなJavaScriptライブラリが役立つ。jsonld.jsは、JSON-LDデータをプログラム的に扱うためのツールである。このライブラリを使うと、複雑な構造のJSON-LDを簡単に処理したり、逆に簡潔な形式のデータを標準的なJSON-LD形式に変換したりできる。例えば、「Compact」機能は、長いURLで表現されたスキーマのプロパティ名を、短いキーに変換してデータを簡潔に表現する際に利用される。これにより、開発者は扱いやすい形式でデータを定義し、最終的に検索エンジンが理解できる標準形式に変換して出力することが可能になる。
現代のウェブ開発では、React、Vue、AstroといったJavaScriptフレームワークが広く使われている。これらのフレームワークを利用したサイトでも、JSON-LDを簡単に組み込むことができる。例えば、ReactやNext.jsを使用している場合は、Next.jsの組み込み<Head>コンポーネント内に、JavaScriptで生成したJSON-LDデータを埋め込むことができる。VueやNuxt.jsの場合は、head()プロパティを使って、同様にスクリプトタグとしてJSON-LDを挿入できる。Astroのようなビルド時に最適化されるフレームワークでは、ページのテンプレート内で直接JSON-LDデータを生成し、<head>タグ内に埋め込むことが可能である。どのフレームワークを使っているかに関わらず、JavaScriptの力を使ってJSON-LDを動的に生成し、ページのHTMLに組み込むという基本的な考え方は共通している。
どのような種類の情報に対して、どのようなスキーマタイプを使えば良いかという疑問が生じるかもしれない。schema.orgには非常に多くのタイプが定義されており、自分のコンテンツに最適なものを選ぶことが重要である。例えば、アイコンを専門とするウェブサイトであれば、個々のアイコンページには「ImageObject」を、アイコンのカテゴリページ（例：「動物アイコン」のページ）には「CollectionPage」を使用するのが適切である。開発ツールを提供するサイトであれば、「SoftwareApplication」タイプを使って、そのツールがソフトウェアアプリケーションであることを示すことができる。また、ウェブサイト内にFAQ（よくある質問）セクションがある場合は、「FAQPage」を使うことで、検索結果に質問と回答を直接表示させることが可能になる。サイト内のナビゲーションを示す「パンくずリスト」を検索結果に表示させたい場合は、「BreadcrumbList」を使用すると良いだろう。これらの適切なスキーマタイプを選択し、正確な情報をJSON-LDで提供することで、検索エンジンはサイトのコンテンツをさらに深く理解し、ユーザーに役立つ形で提供できるようになる。
JSON-LDの導入は、検索エンジン最適化（SEO）戦略において非常に強力な手段である。これにより、検索エンジンはあなたのウェブサイトの内容をより明確に理解し、その結果、検索結果での表示がより豊かになり、ユーザーからのクリック率も向上する可能性が高まる。また、jsonld.jsのようなツールと組み合わせることで、たとえ数千ページに及ぶ大規模なサイトであっても、構造化データの生成と管理を効率的に自動化できる。React、Vue、Astroといった様々なJavaScriptフレームワークにも柔軟に統合できるため、現代のウェブ開発環境において非常に実用的な技術である。
結論として、大規模な開発ツールサイトやアイコンサイトのように、多くのコンテンツを扱うウェブサイトでSEOを真剣に考えるのであれば、構造化データの導入、特にJSON-LDの活用は避けて通れない道である。JSON-LDを適切に利用することで、ユーザーにとって有用なだけでなく、検索エンジンにとっても完全に理解できるサイトを構築することが可能になる。これは、インターネット上であなたの素晴らしいコンテンツをより多くの人々に届けるための、非常に重要な一歩となる。