ブログ|静的志向

言語言語切替
日本語 English
サイト内検索

札幌在住のTakaによる静的htmlで作成したブログです。

素早く表示されるブログを作ることを目的として書いています。

実物を見て覚える!AMPで必要なJSON-LDの書き方

AMPに対応させるにはAMP HTML以外にJSON-LDの記述が必要です。今回は実際にこのページのJSON-LDの書き方と、その解説をしていきます。

元の書き方を見ることで、自分自身のブログでも記載できるようになるはずです。

このページのJSON-LD

<script type="application/ld+json">

{
"@context": "http://schema.org",
"@type": "BlogPosting",
"datePublished": "2017-06-22T18:00:00+09:00",
"dateModified": "2017-06-22T18:00:00+09:00",
"articleSection": "ブログ",
"headline": "実物を見て覚える!AMPで必要なJSON-LDの書き方|静的志向",
"mainEntityOfPage": {
"@type": "WebPage",
"@id": "http://kentampontam.com/jp/blog/2017/06/22-1-json-ld.html"
},
"description": "AMPに対応させるにはAMP HTML以外にJSON-LDの記述が必要です。今回は実際にこのページのJSON-LDの書き方と、その解説をしていきます。元の書き方を見ることで、自分自身のブログでも記載できるようになるはずです。",
"image": {
"@type": "ImageObject",
"url": "http://kentampontam.com/img/blog/2017/06/ogp/jp/22-1-json-ld.png",
"width": 1200,
"height": 630
},
"author": {
"@type": "Person",
"name": "Taka"
},
"publisher": {
"@type": "Organization",
"name": "静的志向",
"logo": {
"@type": "ImageObject",
"url": "http://kentampontam.com/img/logo/jp/3-1-index.jpg",
"width": 180,
"height": 60
}
}
}

以下詳細について説明していきます。

JSON-LDの宣言

<script type="application/ld+json">

↑このスクリプトを書きます。あとは{}でJSON-LDの中を記入していくだけです。

schema.orgで書いていくよ、の宣言

"@context": "http://schema.org",

↑@で始まり、スクリプトが続く場合は「,」で行を終わらせます。

投稿のデータ

"@type": "BlogPosting",

↑ブログの投稿です。他の書き方として

  • "@type": "Article",
  • "@type": "NewsArticle",

↑などもあります。個人的に

  • "@type": "Article",←万能
  • "@type": "NewsArticle",←ニュース関係

↑このようなイメージで使い分けています。

"datePublished": "2017-06-22T18:00:00+09:00",

↑記事の投稿日時です。書き方は

年-月-日T時:分:秒+標準時刻からの時差

日本からの投稿は、標準時刻からの時差は+09:00ですね。

"dateModified": "2017-06-22T18:00:00+09:00",

↑記事の更新日時です。投稿内容を変更したときは、こちらも更新します。

"articleSection": "ブログ",

↑投稿記事のカテゴリーです。

"headline": "実物を見て覚える!AMPで必要なJSON-LDの書き方|静的志向",

↑headタグ内のtitleと同じです。

"mainEntityOfPage": {
"@type": "WebPage",
"@id": "http://kentampontam.com/jp/blog/2017/06/22-1-json-ld.html"
},

↑投稿記事のURLを表します。とりあえず@idの中が記事ごとに違うと覚えてください。

またURLは絶対URLで記述します。「/」や「./」で始まるのではなく、http~で始まると言う意味です。

"description": "AMPに対応させるにはAMP HTML以外にJSON-LDの記述が必要です。今回は実際にこのページのJSON-LDの書き方と、その解説をしていきます。元の書き方を見ることで、自分自身のブログでも記載できるようになるはずです。",

↑headタグ内のmeta name="description"と同じです。投稿記事の説明文を表します。

"image": {
"@type": "ImageObject",
"url": "http://kentampontam.com/img/blog/2017/06/ogp/jp/22-1-json-ld.png",
"width": 1200,
"height": 630
},

↑投稿記事のイメージ画像です。これも絶対URLで記述します。

  • "url": "画像の場所",
  • "width": "画像の幅",
  • "height": "画像の高さ"

私はOGP(オープングラフフォト,SNSで共有されたときに表示される画像)と同じものを使用しています。

ImageObject

ImageObjectを指定することで、このように検索結果で表示されるようになります。

"author": {
"@type": "Person",
"name": "Taka"
},

↑投稿者の情報です。

  • "name": "投稿者"

"publisher": {
"@type": "Organization",
"name": "静的志向",
"logo": {
"@type": "ImageObject",
"url": "http://kentampontam.com/img/logo/jp/3-1-index.jpg",
"width": 180,
"height": 60
}

↑サイトの情報です。サイト名やサイトのロゴのURLを記述します。

  • "name": "サイト名",
  • "url": "ロゴのURL",
  • "width": "ロゴの幅",
  • "height": "ロゴの高さ"
ImageObject

ロゴはAMP検索結果のニュースで表示される運営サイトのイメージ画像です。

ロゴの画像は600x60pxの範囲内に収める必要があります。

参考記事:amp用のロゴを作りました

以上で各JSON-LDのパラメータ解説は終了です。「難しい!」と感じたら、以下のコピペ用を活用してください。

コピペ用JSON-LD

<script type="application/ld+json">

{
"@context": "http://schema.org",
"@type": "BlogPosting",
"datePublished": "「年」-「月」-「日」T「時」:「分」:「秒」+09:00",
"dateModified": "「年」-「月」-「日」T「時」:「分」:「秒」+09:00",
"articleSection": "「カテゴリー」",
"headline": "「投稿記事のタイトル」",
"mainEntityOfPage": {
"@type": "WebPage",
"@id": "「投稿記事のURL」"
},
"description": "「投稿記事の説明文」",
"image": {
"@type": "ImageObject",
"url": "「投稿記事の画像URL」",
"width": 「画像の幅」,
"height": 「画像の高さ」
},
"author": {
"@type": "Person",
"name": "「投稿者」"
},
"publisher": {
"@type": "Organization",
"name": "「ブログやサイトの名称」",
"logo": {
"@type": "ImageObject",
"url": "「ブログやサイトのロゴ画像」",
"width": 「画像の幅」,
"height": 「画像の高さ」
}
}
}

↑これをheadタグ内にコピペしてください。

各記事やサイトごとに変更すべき箇所は「」でくくってあります。

JSON-LDが正しいかどうか調べる方法

Google 構造化データテストツール」にアクセスします。

Google 構造化データテストツール

↑JSON-LDの記述を調べたいページのURLを入力します。

JSON-LD

↑JSON-LDの記述が正しければ、エラーなしと表示されます。

あとがき

これでJSON-LDの記述もできるはずです。ぜひAMPページの制作では、構造化データも記述してみてください。

↓鋭意制作中↓

ダイエットエラミカ

私自身の実践と経験に基づくリバウンドしないダイエットについて詳しく解説しています。

筋肉量31.4kg

BMI21.9 筋肉型スリム

元の用紙はこちら

↑このように私自身の体組成結果をすべて公開しています。現時点で2年以上のデータ、体脂肪率1桁の結果は21ヶ月連続で達成中です。

詳しくは「ダイエットエラミカ」よりご覧ください。

Sponsor Link

シェアしてくれると嬉しいです