Google AMP-リンク

ampのLinkタグは、利用可能なampページと非ampページについてGoogle検索エンジンに通知するために使用されます。この章では、Linkタグに関連する側面と、Googleがampページとnon ampページについて決定する方法について詳しく説明します。

AMPページの発見

www.mypage.comというサイトがあるとします。ニュース記事はページにリンクしています-www.mypage.com/news/myfirstnewsl。

ユーザーがGoogle検索エンジンで検索し、たまたまアンプページへの参照を取得するために、非アンプページを取得する場合、以下に示すようにリンクタグを使用してアンプのURLを指定する必要があります-

例

非アンプページのページURL *

<link rel = "amphtml" href = "https://www.mypage.com/news/amp/myfirstnews_ampl">

ここでは、_rel =” amphtml” _がampバージョンを指すようにamp以外のページに指定されているため、プラットフォームに基づいて適切なものが表示されます。

*amp-pageのページURL*

<link rel = "canonical" href = "https://www.mypage.com/news/myfirstnewsl">

ここで_rel =” canonical” _はampページでhtmlの標準バージョンを指すように指定されているため、Googleはプラットフォームに基づいて正しいバージョンを表示します。

あなたのサイトがアンプページである1つのページしか持っていない場合、それ自体を指すrel =” canonical”を追加することを忘れないでください-

<link rel = "canonical" href = "https://www.mypage.com/news/amp/myfirstnews_ampl">

次の図は、ampページを指すrel =” amphtml”および標準のhtmlページを指すrel =” canonical”への参照を示しています。

AMP Html

リンクを使用するフォント

以下に示すように、リンクを使用してフォントを外部から読み込むことができます-

<link rel = "stylesheet" href = "https://fonts.googleapis.com/css?family=Roboto">

ホワイトリストに登録されたオリジンのみが許可されることに注意してください。フォントを取得できるホワイトリストに登録されているオリジンのリストは、次のとおりです-

Fonts.com-https://fast.fonts.net
Google Fonts-https://fonts.googleapis.com
Font Awesome-https://maxcdn.bootstrapcdn.com
Typekit-https://use.typekit.net/kitId.css（kitIdを適宜置き換えてください）

_rel =” canonical” _および_rel =” stylesheet” _を使用した作業例を以下に示します-

例

<!doctype html>
<html amp>
   <head>
      <meta charset ="utf-8">
      <title>Amp Sample Page</title>
      <link rel = "canonical" href = "amppagel">
      <meta name = "viewport" content = "width = device-width,minimum-scale=1,initial-scale = 1">
      <style amp-custom>
         h1 {color: red}
      </style>

      <style amp-boilerplate>
         body{
            -webkit-animation:
            -amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:
            -amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:
            -amp-start 8s steps(1,end) 0s 1 normal both;animation:
            -amp-start 8s steps(1,end) 0s 1 normal both
         }
         @-webkit-keyframes
         -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes
         -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes
         -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes
         -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes
         -amp-start{from{visibility:hidden}to{visibility:visible}}
      </style>

      <noscript>
         <style amp-boilerplate>
            body{
               -webkit-animation:none;
               -moz-animation:none;
               -ms-animation:none;
               animation:none
            }
         </style>
      </noscript>

      <script async src = "https://cdn.ampproject.org/v0.js"></script>

      <link rel = "stylesheet" href = "https://fonts.googleapis.com/css?family=Roboto">
   </head>
   <body>
      <h1>Amp Sample Page</h1>
      <p>
         <amp-img src = "images/christmas1.jpg"
            width = "300" height = "250"
            layout = "responsive">
         </amp-img>
      </p>

      <p style = "font-family: 'Roboto'; font-size:25px;">
         Welcome to Amp Page
      </p>
   </body>
</html>

出力

上記のコードの出力は以下のとおりです-

リンクを使用したフォント

Google-amp-link

Google AMP-リンク

AMPページの発見

例

リンクを使用するフォント

例

出力

目次