ニュース記事を AMP 形式に変換したら、ユーザーがコンテンツを検索して見つけられるようにしましょう。

AMP のコンテンツをリンクする

ウェブサイトは、全体が AMP ページで構成される場合と、一部が AMP ページで構成される場合、AMP ページを使用せずに構成される場合が考えられます。ここでは、ウェブサイトの構造に AMP を組み込む方法について説明します。

コンテンツが同じページが複数ある場合に、優先するページを指定するための方法としては、標準の HTML ページに正規ページとのリンクを追加する方法がよく使用されます。

ウェブサイトに AMP を追加する場合、従来からある非 AMP HTML ページの AMP バージョンを作成するという手法がよく用いられます。一般的に、両方のバージョンのコンテンツ(記事のテキストなど)は同じですが、体裁は異なることがあります。このシナリオでは、従来からある HTML ページを「正規」ページとして扱い、そうした HTML ページと AMP ページをペアに設定する必要があります。

可能であれば、AMP を他の JavaScript ライブラリと同じように使用してサイトを構築してください。そうすれば、正規ページとのリンクについて意識する必要がなくなります。AMP を使用してサイト全体を構築すると保守の負担が大幅に軽減されます。

AMP コンテンツのリンク

ここでは、AMP バージョンと非 AMP バージョンのページがあるケースに焦点を当てて説明します。このチュートリアルのウェブサイトにはニュース記事が 1 つ含まれており、この記事には非 AMP の HTML ページ(article.html)と AMP バージョンのページ(article.amp.html)があります。双方のページに link タグを追加して、ページ同士をペア設定します。

AMP ドキュメントの側には <head> に正規ページを指す下記の link タグがすでに追加されているため、最初の手順は完了しています。

<link rel="canonical" href="/article.html">

次の手順として、正規の記事を AMP ページにリンクします。具体的には、正規の記事の <head> セクションに <link rel="amphtml"> タグを追加します。

article.html ファイルの <head> セクションに以下のコードを追加します。

<link rel="amphtml" href="/article.amp.html">

以下の図は、双方のファイルの link タグの方向を示したものです。

AMP コンテンツのリンク

標準 HTML の正規ドキュメントと AMP ドキュメントの関係を検索エンジンに認識させるために、この双方向のリンクの設定が必要となります。リンクが設定されていない場合、記事が標準 HTML ドキュメントの「AMP バージョン」であることをクローラが認識できない可能性があります。こうしたリンクを明示的に設定することで、不明確さをなくすことができます。

構造化データを追加する

schema.org の構造化データは、有効な AMP ページを作成するために必須のものではありませんが、Google 検索などの一部のプラットフォームでは、トップニュース カルーセルなどの特定の機能の提供に構造化データを必要とします。通常は、構造化データを含めることをおすすめします。構造化データがあれば、検索エンジンにウェブページが正しく認識されて、検索エンジンの結果ページ(リッチ スニペットなど)にコンテンツが適切に表示されるようになります。構造化データは、AMP ページの <head> タグ内に application/ld+json タイプの script タグとして追加します。

このチュートリアルのニュース記事では、AMP ドキュメントの <head> セクションの一番下に、以下の構造化データを追加します。

<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "NewsArticle",
"mainEntityOfPage":{
   "@type":"WebPage",
   "@id":"https://example.com/my-article.html"
},
"headline": "My First AMP Article",
"image": {
   "@type": "ImageObject",
   "url": "https://example.com/article_thumbnail1.jpg",
   "height": 800,
   "width": 800
},
"datePublished": "2015-02-05T08:00:00+08:00",
"dateModified": "2015-02-05T09:20:00+08:00",
"author": {
   "@type": "Person",
   "name": "John Doe"
},
"publisher": {
   "@type": "Organization",
   "name": "⚡ AMP Times",
   "logo": {
     "@type": "ImageObject",
     "url": "https://example.com/amptimes_logo.jpg",
     "width": 600,
     "height": 60
   }
},
"description": "My first experience in an AMPlified world"
}
</script>

ブラウザでページを再読み込みし、AMP 検証エラーが発生していないことを確認します。

構造化データを検証する

構造化データが正しいことを確認するために、さまざまなプラットフォームが検証ツールを提供しています。このチュートリアルでは、Google 構造化データ テストツールを使用して構造化データを検証します。

  1. ブラウザ ウィンドウで Google 構造化データ テストツールを開きます。
  2. [コード スニペット] タブを選択します。
  3. AMP ページのソースコード全体をコピーして、テストツールのテキスト エディタ パネルに貼り付けます。
  4. [テストを実行] をクリックします。

構造化データに問題がなければ、「エラーなし」、「警告なし」と表示されます。

おつかれさまでした。これで AMP のニュース記事は完成です。