Web開発

パーソナルウェブサイトのためのJSON-LD解説

JSON-LD explained for personal websites (hawksley.dev)

195 pointsby ethanhawksley2026年6月22日57 コメント

要約

この記事では、パーソナルウェブサイトに構造化データを追加するためのJSON-LDについて解説しています。JSON-LDは、Webクローラーがサイトのセマンティック構造を理解するのを助け、検索ランキングの向上やリッチなリンクプレビュー表示に寄与します。実装方法、`@context`や`@graph`といった基本的な要素、そして`WebSite`、`WebPage`、`Person`などの主要なノードタイプについて具体例を交えて説明しています。

全文翻訳

JSON-LD、またはJSON Linked Dataとして知られるものは、ウェブページに構造化データを追加するためのフォーマットです。これはWebクローラーがあなたのサイトのセマンティック構造を理解するのに役立ち、よりリッチなリンクプレビューの資格を得たり、潜在的に検索ランキングを向上させたりすることができます。このサイトの構築について説明した最初の投稿から4ヶ月が経ち、Wakatimeの推定では、リサーチやテストに費やした時間を含めずに、約100時間をコーディングに費やしました。それ以来、このサイトは各ページにJSON-LDを追加するなど、多くの磨きをかけてきました。 JSON-LDの基本ページにJSON-LDを追加するには、`<head>`セクションのどこかに以下を追加します。 `<script type="application/ld+json"> { "@context": "https://schema.org", "@graph": [ { "@type": "WebSite", "@id": "https://hawksley.dev/#website", "url": "https://hawksley.dev/", "name": "Ethan Hawksley" }, // Insert more nodes here. ] } </script> 各部分が何をするか見ていきましょう。 `<script type="application/ld+json">`これはMIMEタイプ`application/ld+json`を持つ新しいスクリプトを宣言します。このタイプが指定されているため、ブラウザのJSエンジンはこれを実行しません。Googlebotのような専門のクローラーがこれらの要素を探し出し、内容をパースします。 `{ "@context": "https://schema.org" }`ここで、JSONオブジェクトが初期化され、プロパティ`@context`が`https://schema.org`に設定されます。JSON-LDでは、データの構造は適切なコンテキストを割り当てることによって決定されます。WebクローラーはSchema.orgに標準化されており、これによりJSONのすべての有効なキーと値のペアが定義されています。 JSON-LDが従うスキーマを定義したので、ウェブページを記述できます！ `{ "@graph": [ { "@type": "WebSite", "@id": "https://hawksley.dev/#website", "url": "https://hawksley.dev/", "name": "Ethan Hawksley" } // Insert more nodes here. ] }`JSON-LDドキュメントは、`@graph`の下に保存されたラベル付き有向グラフと考えることができます。グラフは、有向アークで互いに接続された複数のノードを含みます。ノードは以下を持っています：`@type` - ノードが何であるかを記述します（例: `WebSite`や`SoftwareApplication`）`@id` - ノードの一意の識別子で、通常は末尾に一意のハッシュ値を持つURLです。Properties - ノードの属性を記述するキー/値のペア上記の例では、タイプは`WebSite`、IDは`https://hawksley.dev/#website`で、`url`と`name`の2つのプロパティを持っています。 Webクローラーは、ノードがIDを共有している限り、複数のページにわたってノードのプロパティをマージできます。ただし、LLMのように1ページしか読み取らないスクレイパーはプロパティをマージしません。JSON-LDがページ間で再利用される場合、このバランスを考慮することが重要です。IDは、ノードを一意に識別するURLとハッシュ（例: `#website`）が続く形式がベストプラクティスです。 Schema.orgのコンテキストは多くの種類のノードを定義していますが、このガイドではSEOに顕著な影響を与えるノードのみを扱います。さらに興味がある場合は、セマンティックウェブを調べてみてください。楽しい探求の道です。サイトの各ページに含めるべきノードに移りましょう。各タイプについて、このサイトのJSON-LDを含めているので、コピー＆ペーストして自分のサイトに合わせて編集できます。 WebSite WebSiteの抜粋は以前にも見ましたね！さあ、これが完全版です。 `{ "@type": "WebSite", "@id": "https://hawksley.dev/#website", "url": "https://hawksley.dev/", "name": "Ethan Hawksley", "alternateName": ["hawksley.dev", "Hawksley"], "description": "The personal site and technical blog of Ethan Hawksley, a UK-based CS student with a focus on systems programming, low-level computing, and cybersecurity.", "inLanguage": "en-GB", "publisher": { "@id": "https://hawksley.dev/#person" }, "image": { "@type": "ImageObject", "@id": "https://hawksley.dev/#website-image", "url": "https://hawksley.dev/logo-square.png", "caption": "Ethan Hawksley Logo" } }`WebSiteはサイトに関するメタデータを説明します。クローラーにサイトの表示方法に関するヒントを与えます。ここで、Googleが`name`フィールドをドメインを代表するものとして解釈し、結果を適切にラベル付けしていることがわかります。 WebSiteはすべてのページに適用されますが、その完全版をすべてのページに含める必要はありません。ドメインのルートページは完全に詳細に記述されるべきですが、他のページでは簡易版を使用しても全く問題ありません。 `{ "@type": "WebSite", "@id": "https://hawksley.dev/#website", "url": "https://hawksley.dev/", "name": "Ethan Hawksley" }`これは単一ページクローラーに十分なコンテキストを与え、サイト名を正しく認識させますが、完全な詳細を必要としません。 WebPage WebPageは現在のページを記述しますが、`BlogPosting`（後で説明）のような他のタイプと区別することが重要です。`WebPage`は物理的なページ自体、つまりHTMLを表します。ページのコンテンツを含みます。 `{ "@type": "WebPage", "@id": "https://hawksley.dev/blog/hack-club-campfire/#webpage", "url": "https://hawksley.dev/blog/hack-club-campfire/", "isPartOf": { "@id": "https://hawksley.dev/#website" }, "name": "Winning the Hack Club Campfire Hackathon", "inLanguage": "en-GB", "breadcrumb": { "@id": "https://hawksley.dev/blog/hack-club-campfire/#breadcrumb" } }`WebPageにはより具体的なサブタイプがあります。この記事では`ProfilePage`と`CollectionPage`を扱います。あまり一般的でないものは、Schema.orgの`WebPage`の定義の下部で見つけることができます。 Person パーソナルウェブサイトのすべてのページに含めるべきもう1つのノードは`Person`です。これはあなたが誰であるかを記述し、Googleはこれをコンテンツ品質指標の一部として使用します。LLMクローラーも、回答で誰を引用するかを決定するためにこれをますます使用しています。 WebSiteとは異なり、これはすべてのサイトページに含めるべき重要なコンテキストです。警告 - かなり長いです！ `{ "@type": "Person", "@id": "https://hawksley.dev/#person", "url": "https://hawksley.dev/", "name": "Ethan Hawksley", "alternateName": "ethanhawksley", "givenName": "Ethan", "familyName": "Hawksley", "description": "Long Description", "disambiguatingDescription": "Shorter Description", "jobTitle": "Computer Science Student", "knowsLanguage": "en-GB", "knowsAbout": [ // Keywords ], "nationality": { "@type": "Country", "name": "United Kingdom" }, "homeLocation": { "@type": "Place", "address": { "@type": "PostalAddress", "addressCountry": "GB" } }, "affiliation": { "@type": "HighSchool", "url": "https://www.alcestergs.co.uk", "name": "Alcester Grammar School", "sameAs": [ "https://www.wikidata.org/wiki/Q4713005", "https://en.wikipedia.org/wiki/Alcester_Grammar_School" ] }, "alumniOf": [ { "@type": "HighSchool", "url": "https://www.brookeweston.org", "name": "Brooke Weston Academy", "sameAs": [ "https://www.wikidata.org/wiki/Q4974495", "https://en.wikipedia.org/wiki/Brooke_Weston_Academy" ] } ], "image": { "@type": "ImageObject", "@id": "https://hawksley.dev/#person-image", "url": "https://hawksley.dev/ethan-hawksley.png", "caption": "Ethan Hawksley", "width": 1200, "height": 1200 }, "sameAs": [ "https://github.com/ethan-hawksley", "https://www.linkedin.com/in/ethanhawksley", "https://lobste.rs/~ethanhawksley", "https://news.ycombinator.com/user?id=ethanhawksley" // etc. etc. ] }`ふう！`Person`にはたくさんのプロパティがありますね。入力する際には、記述を少なくするよりも多くする方が役立つと思います。最も重要なプロパティを見ていきましょう：`url` - ルートページを指し、ノードを固定します。 `name`, `givenName`, `familyName` - あなたの名前を明確に記述します。 `image` - できればあなたの写真、またはあなたに関連するロゴ。あなたの公式なイメージにあなたを接続します。 `sameAs` - 特に一般的な名前の場合、曖昧さの解消に非常に役立ちます。クローラーにあなたの他のプロフィールが何であるかを明確に知らせ、複数のページにわたるあなたの知識グラフ表現を構築させます。執筆時点では、私のGoogle知識グラフIDは`/g/11m62cgdtf`です。 `Person`の他のプロパティは詳細を追加するのに役立ちますが、厳密には必要ありません。わずかな影響で、これらを省略することも可能です。 ProfilePage `ProfilePage`は、ご想像のとおり、人物に関するサイト上のページを記述します。例えば、私はこれを使用しています。