HTML CSS - 2019-08-23

schema.orgで構造化マークアップを導入してクリック率を上げたい-JSON編

構造化マークアップとは?

構造化マークアップとは、テキスト情報をマークアップしてクローラーが理解できるようにタグ付けしたものを指します。
構造化マークアップをきちんと実装すると、副次的効果として検索結果の表示が変化することがあります。
商品のレビューやパンくずリストを検索結果に表示することができ、ページの内容が検索ユーザーに伝わりやすくなるため、クリック率が上がります。
こういった、検索結果で表示される情報(スニペット)の情報を豊か(リッチ)にすることをリッチスニペットといいます。
今回はJSON-LDでschema.orgの構造化データをしてみます。
HTMLで構造化サンプルはこちら

WebSite

TOPページに書きます。

<script type="application/ld+json">
{
    "@context": "http://schema.org",
    "@type": "WebSite",
    "url": "ウェブサイトURL",
    "name": "ウェブサイト名",
    "publisher": {
        "@type": "Organization",
        "name": "組織の名前",
        "url": "組織のURL",
        "logo": {
            "@type": "ImageObject",
            "url": "組織のロゴURL",
            "width": 横幅,
            "height": 縦
        },
        "address": {
            "@type": "PostalAddress",
            "postalCode": "組織の郵便番号",
            "addressRegion": "組織の都道府県",
            "addressLocality": "組織の市町村",
            "streetAddress": "組織の住所その他"
        }
    },
    "image": {
        "@type": "ImageObject",
        "url": "ウェブサイトのイメージ画像",
        "width": 横幅,
        "height": 縦
    }
}
</script>

パンくず

<script type="application/ld+json">
{
    "@context": "http://schema.org",
    "@type": "BreadcrumbList",
    "itemListElement": [
        {
            "@type": "ListItem",
            "position": 1,
            "item": {
                "@id": "親ページのURL",
                "name": "親ページの名前"
            }
    }, {
            "@type": "ListItem",
            "position": 2,
            "item": {
                "@id": "2階層目のURL",
                "name": "2階層目の名前"
            }
    }, {
            "@type": "ListItem",
            "position": 3,
            "item": {
                "@id": "3階層目のURL",
                "name": "3階層目の名前"
            }
    }
  ]
}
</script>

Article、NewsArticle、BlogPosting

“@type”:”Article”の中身を適当に変更してください。
基本的にはニュースサイトはArticleもしくは、NewsArticleになります。ブログの場合はBlogPostingを使用します。

<script type="application/ld+json">
{
    "@context":"http://schema.org",
    "@type":"Article",
    "mainEntityOfPage": {
      "@type": "WebPage",
      "@id": "記事のURL"
    },
    "headline":"記事タイトル",
    "image":"記事のイメージ画像URL",
    "datePublished":"記事公開日",
    "dateModified":"記事更新日",
    "author":{
        "@type":"Person",
        "name":"作者の名前"
    },
    "publisher":{
        "@type":"Organization",
        "name": "ウェブサイト名",
        "url": "ウェブサイトURL",
        "logo": {
            "@type": "ImageObject",
            "url": "ウェブサイトのイメージ画像URL",
            "width": 横幅,
            "height": 縦
        }
    },
    "description":"記事の説明分"
}
</script>
Related Posts

Related Posts

schema.orgで構造化マークアップを導入してクリック率を上げたい-HTML編

2018-07-04

WEB制作に役立つ便利ツール・ジェネレーターまとめ

2019-08-21

WordPressのカスタムフィールドやカテゴリを検索対象に含める方法

2018-02-07

ソーシャルシェアボタンの設置方法まとめ-WordPress編

2019-08-13