SEO研究所サクラサクラボ

SEO・コンテンツマーケティングを成功に導くパートナー

  • SEO・コンテンツマーケティングなら
    サクラサクマーケティングにお任せください。

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

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

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

【無料】ねぎお社長のSEOメールマガジン※30秒で登録完了
購読者数は既18000人を突破!
SEO業界20年のねぎお社長が最新情報、ノウハウ、考え方などこのメルマガでしが入手できない情報を配信。SEO,コンテンツマーケティングで売上を上げたい方は、是非、ご購読下さい。
詳細はこちら

記載必須の項目

次の表の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メールマガジン(無料)

    【登録者1.8万人以上】SEOの最新情報をお届け!






    プライバシーポリシー

           

    執筆者 / 監修者

    執行役員 CTO
    コンテンツマーケティング部 部長
    プロダクトエンジニアリング部 部長

    株式会社CSK(現株式会社SCSK)にて保守運用マネージャとして活躍後、独学でプログラミングおよびSEOを学び、サクラサクマーケティングの前身である株式会社ブルトアに入社。
    SEOの知識と技術力を生かして主にSEOにおけるツール開発、R&Dなどを進め、中核事業に成長させる。

    現在はエンジニア以外にシステム運用チーム、コンテンツマーケティングチームも合わせて取りまとめ、プロダクト全般を統括中。

    ◇担当サービス
    ・SEO:システム設計、開発(インフラ、サーバサイド)
    ・コンテンツマーケティング:プランナー / ディレクター
    ・ASO:コンサルタント / システム設計、開発(インフラ、サーバサイド)


    ◇得意言語
    ・PHP
    ・JavaScript
    ・C#


    ◇その他(個人の活動)
    ・アプリ開発
    個人アプリの企画、開発を手掛け、50万DLを超える実績を持つ。

    ・Webサービス開発
    個人でもWebサービス開発を行い、「共起語」で長く1位を獲得している共起語ツールなども手がけている。

    Blog | Twitter | Facebook | Note | Qiita

    その他のブログ記事

    Return Top