みんな、聞いてー！👋 最近、仕事で「動的コンテンツ」の構造化データについて色々調べてて、結構面白い発見があったからシェアさせて！
ECサイトの商品レビューとか、イベントページの残席情報みたいに、ページを開くたびに内容が変わる部分のことね。これをちゃんとGoogleに伝えるの、意外と奥が深いんだよね…。🤔
結論から言うと、動的JSON-LDはマジで大事。でも注意点も…
いきなり結論から。動的に生成されるコンテンツ（ユーザーレビューとか、在庫状況とか）にJSON-LDで構造化データを設定するのは、SEO的に「やった方がいい」っていうか、もう「必須」レベルだと思う。👍
ちゃんと設定できれば、検索結果にリッチリザルト（星評価とか価格とか）が表示されやすくなるし、クリック率アップも期待できる。でも、やり方を間違えると、Googleに全然認識されなかったり、最悪の場合、間違った情報がインデックスされちゃうこともあるから、そこは注意が必要かな。まさに諸刃の剣って感じ。😅
実際、Googleってどこまで見てるの？【実例】
「JavaScriptで後から生成したJSON-LDって、本当にGooglebotは読んでくれるの？」って疑問、あるよね。答えは「イエス」なんだけど、少し条件があるんだ。
GoogleはページをレンダリングしてJavaScriptを実行するから、クライアントサイドでJSON-LDを埋め込んでも基本的には認識してくれる。実際に、多くのSPA（Single Page Application）サイトがこの方法でリッチリザルトを表示させてるしね。
ただ、注意したいのが、Googleの公式ドキュメントでは「サーバーサイドレンダリング（SSR）や静的サイト生成（SSG）を推奨する」ってニュアンスが強いこと。 これは、クライアントサイドでのレンダリングはGooglebotのリソースを余分に消費するし、実装によってはレンダリングに失敗するリスクがあるからだと思う。まあ、Google側の都合だよね（笑）。
面白いのは、海外のドキュメント、例えばGoogle Developersのサイトなんかを見ると、「とにかく正確なデータを渡してくれれば、方法は問わない」というスタンスが強いように感じる。 でも、日本の大手ECサイトの実装とかを見ていると、Googleが定義していない独自のプロパティを追加して、内部でのデータ管理に役立てているケースを見かけることがあるんだ。これは、純粋なSEO目的だけじゃなくて、社内のデータ分析とかにも構造化データを活用してるってことなんだろうね。この辺は文化の違いというか、活用の幅の違いが見えて面白いポイント。
じゃ、どうやって実装するの？【コピペOK？】
さて、具体的な実装方法。一番シンプルなのは、JavaScriptを使って動的にJSON-LDを生成して、それを内に挿入する方法かな。
例えば、商品の情報をAPIから取ってきて、その内容でJSON-LDを作る感じ。こんなコードになると思う。
<script type="text/javascript">
// 商品情報をAPIから非同期で取得する関数（仮）
function fetchProductData(productId) {
// 実際にはここでfetch()などを使ってAPIを叩く
return Promise.resolve({
name: "すごい動的なTシャツ",
image: "https://example.com/t-shirt.jpg",
description: "着るたびに色が変わる（かもしれない）未来のTシャツです。",
sku: "DYN-TSHIRT-001",
brand: {
name: "ミライウェア"
},
review: {
reviewRating: {
ratingValue: "4.8", // この値が動的に変わる
reviewCount: "125" // この値も動的に変わる
}
},
offers: {
price: "2980",
priceCurrency: "JPY",
availability: "https://schema.org/InStock" // 在庫状況も動的
}
});
}
// ページが読み込まれたら実行
document.addEventListener('DOMContentLoaded', () => {
const productId = '12345'; // 実際にはURLなどから取得
fetchProductData(productId).then(productData => {
// JSON-LDオブジェクトを作成
const schema = {
"@context": "https://schema.org",
"@type": "Product",
"name": productData.name,
"image": productData.image,
"description": productData.description,
"sku": productData.sku,
"brand": {
"@type": "Brand",
"name": productData.brand.name
},
// ここがポイント！動的なレビュー情報
"review": {
"@type": "Review",
"reviewRating": {
"@type": "Rating",
"ratingValue": productData.review.reviewRating.ratingValue,
"bestRating": "5"
},
"author": {
"@type": "Person",
"name": "匿名ユーザー"
}
},
"aggregateRating": {
"@type": "AggregateRating",
"ratingValue": productData.review.reviewRating.ratingValue,
"reviewCount": productData.review.reviewRating.reviewCount
},
"offers": {
"@type": "Offer",
"url": window.location.href,
"priceCurrency": productData.offers.priceCurrency,
"price": productData.offers.price,
"availability": productData.offers.availability,
"seller": {
"@type": "Organization",
"name": "すごいショップ"
}
}
};
// scriptタグを生成してheadに追加
const script = document.createElement('script');
script.type = 'application/ld+json';
script.text = JSON.stringify(schema);
document.head.appendChild(script); // これで注入完了！
console.log('JSON-LDを動的に注入しました！');
});
});
</script>
こんな感じで、APIから取得したデータを使ってschemaオブジェクトを組み立てて、それを新しい
