【AMPのSEO効果で検索1位!!】シンプルなHTMLの書き方のまとめ

 Googleの進めるAMP Accelerated Mobile Pagesプロジェクトは、スマートフォンでの高速表示を目的とした、いわゆるスピードを最重要視したもの。不要なものは切り捨てて軽量で高速なものにするため、JavaScript、外部CSS、Objectなどの重くなる要素を徹底的に排除してあります。

 このため、文章+画像のみで構成できるようなページには、圧倒的に有利になります。もっとも、従来のコンテンツを対応させようとすると、できないことの方が多いので無理に導入すると作業量ばかり増えてしまい効果はほとんどなしということにもなります。コンテンツ次第ですが、文章メインのページであれば、比較的かんたんに作成できます

 参考までに、このページはAMPに対応した記述で作成してあります。

【AMP HTMLの書き方】基本書式はコピペでOK

 AMPは、基本的にはHTMLの機能を限定して軽量化して高速表示することに特化したものです。書式は、HTMLと同じです。部分的に限定された書式を記述する必要がありますので、その点だけ注意が必要です。

 基本書式は、https://www.ampproject.org/ja/docs/tutorials/create/basic_markup AMPプロジェクトの公式サイト(別タブで開きます。) に掲載されているものをコピペでOKです。

 上記サイトのコピペでOKなのですが、script type="application/ld+json" の構造化マークアップの部分は、削除しても問題なさそうなので、このページでは削除しました。

 AMPテストページがGoogleから提供されているので、確認しながら作成すると便利です。

 重要な点は、AMPテストページで一つでもエラーが発生していると、Googleの検索結果には反映されないという点。IMGタグやCSSのインライン記述などはエラーとなります。

 AMPのエラーチェックをしてみた例です。

 このページのエラーチェックで有効でなかった場合には、問題点の修正が出てきます。修正後に有効なAMPページになるかの確認は細かくしておいた方が良いです。

コンテンツは画像+文章メイン

 AMPでは、できないことが多くあります。画像タグも通常のIMGタグは利用できません。JavaScriptも利用できません。外部CSSの読み込みもできません。

 コンテンツは、文章と画像のみで構成できるものに限定されていると考えておいた方が良いです。このページではテキストがメインで画像もところどころ使用しているので、比較的かんたんにAMP対応させることができましたが、作成してみると面倒な点がかなりありますのでページ内での表現はかなり限られるとお考えください。

CSSの記述はHEADタグ内のみ

 外部CSSは使えません。AMPでは、HEADタグ内にCSSの記述をする必要があります。

 このページのHTMLソースを見ていただくと分かりますが、<style amp-custom></style>内にbodyタグなどまとめてCSS記述をしています。正直かなり面倒に感じますが、書く場所が限定されている仕様のため仕方ありません。
 AMPの書き方では、<span style=”font-size:9pt;”> などのインライン記述はできません。

 できないことだらけですがCSSはHEAD内の<style amp-custom></style>内のみ記述可能です

画像タグはamp-img

画像タグは、IMGタグは使用できませんamp-img タグのみ使用可。高さと幅の指定が必要です。レスポンシブ対応には、layout=”responsive の指定が必要。

 このページでは画像タグの記述に以下を使用しています。高さと幅は画像に応じて変更を。
<amp-img src="img/xxx.jpg" alt="" height="120" width="500" layout="responsive"></amp-img>

構造化マークアップはパンくずのみ

 AMPでは、構造化マークアップが必要らしいのですが、無理に導入してもSEOでの効果がイマイチ明確でない部分があります。このページでは、パンくずリストのみMicrodataで記述しています。

 構造化マークアップの仕様を定めたschema.org では、細かい仕様と記述方法を提供しています。今のところ、Googleの対応しているのが一部のみということもあって、どの程度記述をしていくのかは迷うところです。さらに、記述方式がMicrodata、JSON-LD、RDFaと3タイプあるので、これがまた迷うところです。

 記述が比較的かんたんにできるのは、JSON-LDですがMicrodataの方が検索結果への反映がされやすいという話もあり、今のところ明確にはわからないところです。

 seotechでは、今のところパンくずリストのみ構造化マークアップの記述を取り入れていますが、正直なくてもいいかなと感じる部分ではあります。

 構造化マークアップにもGoogleからテストツールが提供されていますので、記述のエラーチェックは行っておくことをおすすめします。Google構造化データのテストページ(別タブで開きます)

 このページのパンくずリストをチェックしたものです↓

 記述に間違いがある場合には、エラー表示がでてきますので、一度確認しておくことがおすすめです。

重複コンテンツには要注意

 従来のページをAMP対応させた際、重複コンテンツによる検索結果への悪影響をさけるために、HEADタグの一番上に、rel=canonicalの記述を絶対にお忘れなく。

<link rel="canonical" href="https://xxx.xxx">

 このページでは、AMPで書いたHTMLページしか作成していないため、重複コンテンツの心配はありませんが、PC用、スマホ用で作成したページにAMP対応させたページをさらに追加する際には、重複の対策が必要です。

検索結果に画像が表示されないトラブル

 ありがちなトラブルですが、下の画像のようにGoogleの検索結果から表示されるキャッシュされたページに画像が表示されないことがあります。

 ↓左の青枠側が、URLでアクセスすると表示されるサーバ側で公開しているページ。右の赤枠がAMP記述が反映されてGoogleにキャッシュされたものです。画像がキャッシュされなかった事例です。

 この場合は、画像フォルダ内の.htaccessファイル記述が原因になっていることが多くあります。画像の直リンク防止に.htaccessで参照元を制限した方は多いのでは?その場合に、Googleの画像検索も弾いてしまっています。

 もっとも、Googleの画像検索からの流入を意識しない場合は問題ないのですが、AMPの結果にまで画像が表示されないのは問題です。この場合は仕方ないので.htaccessの記述にgoogleを追加する必要あり。これでしばらくするとキャッシュされるはずです。

AMPは更新の反映が遅い

 もう一つトラブルとまではいきませんが、AMPの最大のデメリットはページを更新してからGoogleのキャッシュに反映されるまでの期間が異常に長いという点。

 普通のサイトであれば、タイトルやDescriptionを変更すると割と早い段階で検索結果に反映されるのですが、AMPの場合はタイトルやDescriptionの反映は早くてもキャッシュされている内容の更新はイマイチ遅いという状況が続いています。

 日数は、7~10日3~10日程度かかってキャッシュが更新されていることが多いので、これぐらいの日数がかかると考えておいた方がよさそうです。

 何か意図的に遅くしているのではないかとも思われますが、詳細は不明。AMPの更新後のキャッシュへの反映が遅いと覚えておくほうが無難です。

 単純に更新が多く、画像の差し替えが多いページはAMPには向いていないと考えて差し支えありません。今後Google側のキャッシュの更新が速くなればいいのですが、こればかりはGoogle次第です。

 更新頻度などを試していますが、アクセス数の多いページについては早ければ3日程度でキャッシュが更新されています。一般的なサイトでは、7日から10日程度で更新されています。

SEO効果は抜群

 では、気になるAMPのSEO効果の点ですが、はっきり言って効果抜群です

 新規で作成したページの反映と検索結果の上昇はかなり早くなります。HTMLで軽量なページよりもはるかに早いです。Googleが推進するAMPプロジェクトなので、AMP対応ページが上位に表示されやすいのは、当然予想できますが実際に体感すると驚きです。

検索5位以内が連発

 seotechでもいくつかのページはAMP対応していますが、コンテンツとキーワードを考えてAMPのページにした場合は、かなり多く検索結果の5位以内に表示されています。

 もちろんコンテンツと狙っていくキーワード次第ですが、ページをアップして被リンクが0でも、5位以内に固定されることもありますので、2018年のSEOではAMPがやや強力になっていくかもしれません。

アフィリエイト広告の対応は?

 広告に関しては、提供されるタグがimgタグを含んでいないなど提供されるアフィリエイトタグ次第です。ほとんどのアフィリエイト企業は、AMP対応タグの提供を開始していますので、この点はあまり心配がいらないと思います。

2018年のSEOはAMP必須?

 ここまで、AMPの書き方とSEO効果を書いてきましたが、AMPはできないことだらけです。軽量化と高速化に特化して、機能と表現を制限しているのでプラスの部分はありますが、今のところマイナスの部分が強いので、今後普及していくかは未定です。

 無理にAMP対応させるよりも、現在のコンテンツの高速化や軽量化によるかんたんな対処方法の方が手間とコストの部分でもメリットが多いように気がします。

 コンテンツが文章と画像のみで構成されているシンプルなものであれば、AMPに特化してHTMLの書き方に慣れてしまえば、SEO効果も高く、広告収入もかなり期待できるのではないかと考えられます。2018年はAMP必須とまではいかないまでも、やや普及するスピードが速くなっていくのではないかと思います。

 以上、WEBページ作成の際の参考になれば幸いです。

■このページをご覧になった方がよく見ている記事

【1ページ3MBが目安!!】WEBサイトの容量を軽量化で超SEO効果
【2秒で離脱!?】WEBページの3秒ルールがさらに短縮で高速化が最重要に

■更新履歴
2018/2/23 記事を公開しました。
2018/2/24 一部画像と記事を修正しました。
2018/3/5 画像フォルダのhtaccessを設定しました。
2018/3/8 記事の内容を一部追加修正しました。
2018/3/16 記事の内容を一部追加修正しました。

↑ページの上へ戻る