UGA Boxxx

つぶやきの延長のつもりで、知ったこと思ったこと書いてます

【SEO】構造化マークアップとは

SEO

構造化マークアップというGoogleにページのコンテンツを解析してもらいやすくる方法を知ったので調査した

構造化マークアップをすることで、よりユーザーの興味をひく検索結果を表示できるようになり、ウェブサイトの利用も増えることが期待される

これは通称リッチリザルトと呼ばれており、Googleの検索結果で以下のような見せ方ができるようになる

他にもたくさん用意されており、以下にまとめられていた

developers.google.com

構造化マークアップをするには構造化データを用意する必要がある

構造化データのフォーマットは大きく分けて２つある

記述方法は、Schema.orgにあるのここ読むとよい
schema.org

Schema.orgとはGoogle、Microsoft、Yahoo、および Yandex によって設立された団体で、構造化マークアップの規格を決めている

これ通りに記述すると、クローラーが正しく情報を認識できるようになる

microdataで記述した場合のArticleの例

<html>
  <head>
    <title>Title of a News Article</title>
  </head>
  <body>
    <div itemscope itemtype="https://schema.org/NewsArticle">
      <div itemprop="headline">Title of News Article</div>
      <meta itemprop="image" content="https://example.com/photos/1x1/photo.jpg" />
      <meta itemprop="image" content="https://example.com/photos/4x3/photo.jpg" />
      <img itemprop="image" src="https://example.com/photos/16x9/photo.jpg" />
      <div>
        <span itemprop="datePublished" content="2015-02-05T08:00:00+08:00">
          February 5, 2015 at 8:00am
        </span>
        (last modified
        <span itemprop="dateModified" content="2015-02-05T09:20:00+08:00">
          February 5, 2015 at 9:20am
        </span>
        )
      </div>
      <div>
        by
        <span itemprop="author" itemscope itemtype="https://schema.org/Person">
          <a itemprop="url" href="https://example.com/profile/janedoe123">
            <span itemprop="name">Jane Doe</span>
          </a>
        </span>
        and
        <span itemprop="author" itemscope itemtype="https://schema.org/Person">
          <a itemprop="url" href="https://example.com/profile/johndoe123">
            <span itemprop="name">John Doe</span>
          </a>
        </span>
      </div>
    </div>
  </body>
</html>

JSON-LDで記述した場合のArticleの例

<html>
  <head>
    <title>Title of a News Article</title>
    <script type="application/ld+json">
    {
      "@context": "https://schema.org",
      "@type": "NewsArticle",
      "headline": "Title of a News Article",
      "image": [
        "https://example.com/photos/1x1/photo.jpg",
        "https://example.com/photos/4x3/photo.jpg",
        "https://example.com/photos/16x9/photo.jpg"
       ],
      "datePublished": "2015-02-05T08:00:00+08:00",
      "dateModified": "2015-02-05T09:20:00+08:00",
      "author": [{
          "@type": "Person",
          "name": "Jane Doe",
          "url": "https://example.com/profile/janedoe123"
        },{
          "@type": "Person",
          "name": "John Doe",
          "url": "https://example.com/profile/johndoe123"
      }]
    }
    </script>
  </head>
  <body>
  </body>
</html>

他参考

https://www.akindo2000.net/blog/structured-markup/

https://seolaboratory.jp/95442/