AMP HTMLの記述例

前回はAMP HTMLの概要をご紹介いたしました。今回は具体的な記述例をサンプルを交えてご紹介いたします。

モバイルの表示が爆速になるAMP(Accelerated Mobile Pages)
去年Googleが提唱したAMP(Accelerated Mobile Pages) が、最近また活発になってきたようです。 というわけで...

AMP HTML

amp-twitter

amp-twitterタグでツイッターを表示するには、ツイートIDを記述します。

head内に「amp-twitter」ライブラリを読み込みます。

全ソース

サンプル

ツイートIDを確認する

埋め込みたいツイッターのページで「リンクをコピー」を選択します。

ツイッター リンクをコピー

ウィンドウが表示されるので、URLの数字をコピーし、タグの「data-tweetid=””」の「””」に張り付けます。

amp-facebook

amp-facebookタグでフェイスブックを表示するには、投稿ページのURLを記述します。

head内に「amp-facebook」ライブラリを読み込みます。

全ソース

サンプル

フェイスブックの投稿ページのURLを確認する

埋め込みたいページにある「外部へ埋め込む」を選択します。

フェイスブック 外部へ埋め込むを選択

赤枠で囲っているエリア内に、httpsから始まるURLが記述されているので、そちらをコピーし、タグの「data-href=””」の「””」に貼り付けます。

フェイスブック ソース選択

amp-youtube

amp-youtubeタグでユーチューブを表示するには、ビデオIDを記述します。

head内に「amp-youtube」ライブラリを読み込みます。

全ソース

サンプル

YouTubeのIDを確認する

埋め込みたいページの「共用」にあるIDを「data-videoid=””」の「””」に記述します。

ユーチューブ 共用にあるIDを選択

検証する

AMP HTMLのバリデーションを行いたい場合は、検証したいページのURLの末尾に「#development=1」を記述します。

例:http://www.pc-weblog.com/sample/amp/twitter.html#development=1

Chromeブラウザで確認した場合、下記のように「AMP validation successful.」という表示がされていれば、バリデーションはOKとなります。

AMP HTML Validation

まとめ

  • amp-twitterタグでツイッターを表示するには、ツイートIDを記述する。
  • amp-facebookタグでフェイスブックを表示するには、投稿ページのURLを記述する。
  • amp-youtubeタグでユーチューブを表示するには、ビデオIDを記述する。
  • AMP HTMLのバリデーションを行いたい場合は、検証したいページのURLの末尾に「#development=1」を記述する。

AMP HTMLの記述はそれほど難しくはないので、どんどんタグを試してAMP HTMLに慣れ親しんでいきましょう。

スポンサーリンク
記事のタイトルとURLをコピーする

シェアする

フォローする

AMP HTMLの記述例
この記事をお届けした
PC ウェブログの最新ニュース情報を、
いいねしてチェックしよう!