AMP

ページを検出可能にする

Important: this documentation is not applicable to your currently selected format websites!

たとえばニュース記事などで、同じページの非 AMP バージョンと AMP バージョンの両方を用意する場合があります。Google 検索がそのページの非 AMP バージョンを検出した場合、AMP バージョンがあることをどのように認識するのでしょうか。この問題について検討してみましょう。

この問題を解決するには、<head> 内の <link> タグを使用して、AMP ページに関する情報と非 AMP ページに関する情報を互いのページに追加します。

非 AMP ページには次のタグを追加します。

<link rel="amphtml" href="https://www.example.com/url/to/amp/document.html">

そして AMP ページには次のタグを追加します。

<link rel="canonical" href="https://www.example.com/url/to/full/document.html">

一方のページだけ存在する場合

一方のページだけが存在し、そのページが AMP ページである場合でも、そのページに正規のリンク、つまりそのページ自体を指すリンクを追加する必要があります。

<link rel="canonical" href="https://www.example.com/url/to/amp/document.html">

参考情報 – Google が AMP ページを検出する方法について詳しくは、「Google 検索での AMP ページに関するガイドライン」をご確認ください。

追加のメタデータでサードパーティプラットフォームと統合する

サードパーティのサイト(AMP ページを埋め込んだサイトや、AMP ページへのリンクが含まれるサイトなど)では、あなたのページが AMP ページであること以外に、ページに関する詳しい情報が必要となる場合があります。たとえば、「ニュース記事かどうか」、「動画かどうか」、「スクリーンショットや短い説明があるか」などのようなページに関する情報が、プラットフォームから求められます。

これは AMP ページだけでなく、すべてのウェブページに当てはまります。このようなメタデータを任意とするプラットフォームもありますが、必須である場合、適切なメタデータを提供しなければ、そのプラットフォームでコンテンツへのリンクは表示されません。コンテンツを表示するプラットフォームで必要とされる適切なメタデータを、必ず提供するようにしてください。

Schema.org を使用して多くの検索エンジンに対応する

Schema.org では、あらゆる種類のコンテンツにメタデータを追加するためのオープンな構文を提供しています。AMP を検索エンジンに対応させるためには、コンテンツの種類(「ニュース記事」など)、見出し、公開日、関連するプレビュー画像などのプロパティが有用な情報となります。

例:

<script type="application/ld+json">
  {
    "@context": "http://schema.org",
    "@type": "NewsArticle",
    "mainEntityOfPage": "http://cdn.ampproject.org/article-metadata.html",
    "headline": "Lorem Ipsum",
    "datePublished": "1907-05-05T12:02:41Z",
    "dateModified": "1907-05-05T12:02:41Z",
    "description": "The Catiline Orations continue to beguile engineers and designers alike -- but can it stand the test of time?",
    "author": {
      "@type": "Person",
      "name": "Jordan M Adler"
    },
    "publisher": {
      "@type": "Organization",
      "name": "Google",
      "logo": {
        "@type": "ImageObject",
        "url": "http://cdn.ampproject.org/logo.jpg",
        "width": 600,
        "height": 60
      }
    },
    "image": {
      "@type": "ImageObject",
      "url": "http://cdn.ampproject.org/leader.jpg",
      "height": 2000,
      "width": 800
    }
  }
</script>

ampproject の examples フォルダには、代替の HTML 属性構文など、このほかにもサンプルが用意されています。

構造化データについて詳しくは、次の関連資料をご覧ください。

より多くのプラットフォームに対応するその他のメタデータ

コンテンツを検出、配信可能にするその他の方法については、Web Fundamentals の「ソーシャルディスカバリー」をご覧ください。