ブログ

検証!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とは?Googleの本質を理解し、自社サイトを強化する





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

無料メルマガのご登録(無料)

SEOの最新情報を無料でお届けします!





プライバシーポリシー

監修者:笹本 雅人

記事一覧

SEOシニアコンサルタント

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

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



無料資料ダウンロード

サービス資料ダウンロード

用語集

ソースコード集

お役立ちリンク集

無料メルマガのご登録(無料)

SEOの最新情報を無料でお届けします!





プライバシーポリシー

お役立ちツール

カテゴリ一覧

タグクラウド

新着記事一覧

  1. ウェブマスターオフィスアワーまとめ(2019年8月9日)

    8月9日のウェブマスターオフィスアワーが行われました。 Googleの金谷さんとあんなさんが発言した内容をまとめます。 目次 イベント告知金谷さんのツイートピックアップ10年前のサイトも検索に表示される7月から新規サイト […]...

    1. Google検索品質評価ガイドラインの要約とSEOへの活用方法

      Googleの検索品質評価ガイドラインとは、Googleが自身の検索エンジンの品質を評価するために、外部の品質評価者に向けて評価方法を説明した資料のことです。 検索品質評価ガイドラインには、Googleがどのようなページ […]...

      1. サクラサクラボ7月のツイートまとめ

        当サイトのツイッターアカウント(@sakurasakulabo)のツイートから、7月のイベントを振り返ります。 ツイッターのフォローはこちらからお願いします。 Follow @sakurasakulabo 目次 robo […]...

おすすめコンテンツ

  1. コンテンツマーケティングとは?特徴と事例、社内でできる方法を解説します

    ここ数年で急激にコンテンツマーケティングという言葉を聞くようになりました。しかし、「興味があるがまだ着手できていない」という人や、「そもそもどんなコンテンツを作ればいいのかわからない」、「社内で運用しているが成果がでない […]...

    1. SEO対策(検索エンジン最適化)とは~Googleで上位表示を実現する方法

      目次 1. SEO(Search Engine Optimization:検索エンジン最適化)とは 2. SEOの現在(検索エンジン最適化≒Google最適化) 3. Google Search Consoleの活用とS […]...

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

        目次 SEOに強いコンテンツとは回答性網羅性文字数ユーザー体験[回答性×網羅性×文字数×ユーザー体験]を考慮したSEOに強いコンテンツ制作お問い合わせフォーム SEOに強いコンテンツとは 検索エンジンで上位表示をさせるた […]...

最新情報を取得する

PAGE TOP