ブログ

検証!AMPに沿ったマークアップとエラーチェックの方法をご紹介!

今回は、以前ご紹介した「AMP」の仕様に沿ったマークアップの一部と、正しくマークアップできているかどうかのチェック方法をご紹介します。

(前回の記事)
Googleが推奨するAMPとは?-特徴から対応方法まで基礎解説

この記事の目次

従来のHTMLをAMPに沿って書き直す

記載必須の項目

次の表の1~8はAMPで必須とされている項目となります。その下が表の項目を実装したHTMLソースのキャプチャになります。

※表とHTMLソースの番号が紐づいています。

1 html5でDOCTYPE宣言
2 amp記号の導入
3 headタグとbodyタグをもれなく記載
4 canonicalの設定
5 meta charset=”utf-8″を指定
6 meta name=”viewport”を指定
7 ampのjavascriptの読み込み
8 AMP boilerplate codeの読み込み

amp-2-0001

さらに、記載必須の項目として列挙されてはいないものの、GoogleのJohn Mueller(ジョン・ミューラー)氏によると構造化データの記載も必須であるとのことです。
したがって、schema.orgのNewsArticleまたはBlogPostingを使って以下のように構造化データを作成し、head内に記載しておきましょう。

参考:AMPコンテンツとしてGoogleモバイル検索に表示させるには、有効なAMPページと構造化データが必須

WS000002

主要なAMPタグ

AMP仕様に沿ったページを作成する際に、おそらく一番作業量の多い項目がimgタグとiframeタグ、amp-adタグになるかと思います。
imgタグはamp-imgタグに、iframeタグはamp-iframeタグにそれぞれ変換する必要があります。無駄な計算を省くためAMPではこれらのタグに対してサイズ指定が必須となります。
Googleアドセンス等の広告はamp-adタグを使って表示します。

amp-imgタグ
基本的にwidth(横幅)、height(縦幅)、src(画像のパス)は必須の属性となります。また、imgタグにはなかった閉じタグも追加されています。

<amp-img width=284 height=177 src=”./img/400_400.jpeg”></amp-img>

amp-iframeタグ
上端から測って、600pxとviewport縦幅75%を比較して、小さい方の数値以上離れた箇所でないと記載できないといった設置位置の制約があります。
ただし、以下のように一時的なplaceholderとしてiframeがロードされるまで表示させておく仮の画像を設定している場合は、前述の制約を受けません。
amp-iframeを使う場合、あらかじめ以下の用にamp-iframeのモジュールを読み込んでおく必要があります。

モジュール <script async custom-element=”amp-iframe” src=”https://cdn.ampproject.org/v0/amp-iframe-0.1.js”></script>

amp-iframeを使ってyoutube動画を埋め込む場合、以下のようになります。この場合、設置位置の制約を考慮し、仮の画像をplaceholderとして設定しています。
画面ロード時、最初にplaceholderの画像が表示され、amp-iframeのロードが完了するとそちらに切り替わります。

<amp-iframe width=300 height=300
sandbox=”allow-scripts allow-same-origin”
layout=”responsive”
frameborder=”0″
src=”https://www.youtube.com/embed/XXXXXX”>
<amp-img layout=”fill” src=”./img/320_240.jpg” placeholder></amp-img>
</amp-iframe>

amp-youtubeタグ
amp-iframeでyoutube動画を埋め込む方法をご紹介しましたが、youtube動画の埋め込み専用のamp-youtubeタグが別途用意されているので、そちらで実装することも可能です。
amp-youtubeを使う場合、あらかじめ以下の用にamp-youtubeのモジュールを読み込んでおく必要があります。

モジュール <script async custom-element=”amp-youtube” src=”https://cdn.ampproject.org/v0/amp-youtube-0.1.js”></script>

amp-youtubeを使ってyoutube動画を埋め込む場合、以下のようになります。

<amp-youtube data-videoid=”ahHmHzdx748″ width=”300″ height=”300″ layout=”responsive”></amp-youtube>

amp-adタグ
Googleアドセンス等の広告を表示させるためのタグです。一般的に広告はjavascriptを使って表示させる場合が多いですが、
AMPでは外部のjavascriptは禁止なので、amp-adタグを使って表示することになります。
現在サポートされている広告サービスはこちらで確認することができます。

<amp-ad type=”adsense” data-ad-client=”xxxxxxxxx” data-ad-slot=”xxxxxxxxx” width=”300″ height=”200″></amp-ad>

CSSはインラインで

AMP公式ページに「CSSの読み込みを禁止しインラインでの記載のみ許可することで、多くのサイトと比較して1つまたはそれ以上のHTTPリクエストを削減できる」と書かれており、
CSSの読み込みがレンダリングやページロードの妨げになっていることを懸念しています。
このような理由により、CSSを読み込む代わりにamp-custom属性を付与したstyleタグをhtmlファイルにインラインで記載します。

<style amp-custom>・・・</style>

AMPで書いたHTMLのチェック

AMPの仕様に沿って正しく書けているかどうか、GoogleChromeの開発者モードを使ってチェックできます。
作成したページURLの末尾に「#development=1」を付与して閲覧すると、開発者モードのコンソールにチェックログが出力されます。

まず、正しく書けている場合、AMP validation successful.というログが出力されます。

amp-2-log1

先ほどご説明したamp-imgで正しくサイズを指定しない場合、以下のようなエラーログが出力されます。
(※縦幅(height)の指定を行わなかった場合)

amp-2-log2

また、必須とされるcanonicalタグを指定しない場合も同様にエラーログが出力されます。

amp-2-log3

まとめ

ここまでAMPの具体的な実装例とチェックの方法をご説明してきました。
まだまだ発展途上の部分が多いのが現状ですが、今後着実に浸透してくる技術だと思いますので、
現段階から実装方法など押さえておきましょう。





■関連情報:サクラサクマーケティングのSEOコンサルティングサービス
中小・ベンチャー企業の売上をサポートするSEO対策低価格・高品質なSEOコンサルティング

監修者:笹本 雅人

記事一覧

SEOシニアコンサルタント

2013年株式会社ブレインネットに入社し、会社合併を経てサクラサクマーケティング株式会社に合流した後も現在に至るまでSEOコンサルタントとして大小問わず様々なクライアントの集客向上に貢献。

特にシステム開発がからむSEOを得意としているほか、自社メディアのブログの作成・監修を行い、数多くのキーワードで上位表示を達成している。



SEOトレンドレポート

資料ダウンロード

用語集

ソースコード集

お役立ちリンク集

お役立ちツール

カテゴリ一覧

タグクラウド

新着記事一覧

    1. 観測ワード数50倍!超大型サイトの健康状態を瞬時に把握可能になったアイスタイル様(@cosme)事例

      大規模なサイトを運営するweb担当者が抱えるミッションには、「サイトの健康状態をいかに明瞭に把握できるか」、「いかに社内共有しやすい環境を作るか」といった点が挙げられるでしょう。特にサイトの規模が大きければ、それだけ自然 […]...

      1. 2019年 新年のご挨拶

        新年、明けましておめでとうございます。 サクラサクラボを運営しております、 サクラサクマーケティング株式会社 取締役社長の根岸でございます。 このブログの場を借りまして、新年のご挨拶を申し上げさせて頂きたく存じます。 皆 […]...

おすすめコンテンツ

  1. モバイルファーストインデックス(MFI)とは?導入時期や必要な対策まとめ

    2016年11月、Googleウェブマスターブログから、モバイルファーストインデックスMFI)についての取り組みを紹介するブログが公開されました。 Google ウェブマスター向け公式ブログ: モバイル ファースト イ […]...

    1. Googleの順位変動が起こる原因と必要な対策(2017年版)

      2017年に入って以前にも増してGoogleの順位変動が大きくなっています。 これまで安定していた順位が下落し、ひどい時には圏外まで急落するなどの経験をされたWeb担当者さまもいると思います。 すでにSEOにおいてはこの […]...

      1. SEOに強いコンテンツは回答性×網羅性×文字数×ユーザー体験

        SEOに強いコンテンツとは 検索エンジンで上位表示をさせるためには、サイトパワーとユーザーが求めるコンテンツが必要です。 ユーザーが求めるコンテンツとは、情報や課題の解決方法であり、それを満たすコンテンツを多く提供してい […]...

最新情報を取得する

PAGE TOP