TechRacho WordPressのモバイル記事をAMP対応いたしました!

こんにちは、hachi8833です。

TechRachoは2016年10月よりモバイルでのAMP表示に対応いたしました。BPS Webチーム若手のikaさんがほぼ一人で対応を完了させてくれました。ありがとうございます!

TechRacho AMP対応

AMP対応

AMP Project logo

AMPの仕様に厳密に合わせたモバイルHTMLを生成することで、自分のいる地域の最寄りにあるGoogle極太CDN経由で記事が配信されるため、モバイル表示が劇的に高速化されます

モバイル検索で表示される雷マークとAMPの文字が、AMP対応の目印です。

amp_lighteningmark

さらにニュース記事ならAMPがモバイル検索でカルーセル化されるなど、料金不要でGoogleから特別待遇を受けられるので、主に日本のSEO/マーケティング業界を中心にAMP化が盛り上がっているわけです。

たとえば以下のリンクをクリックするとAMPページを開くことができます。記事URLの末尾を/ampとすることでAMP表示できます。

AMP 対応のポイント

  • AMPに対応するには、AMPの仕様をすべて厳格に守る必要があります。以下はその一部です。
    • 静的なHTMLである必要があります(JavaScriptは利用できません)
    • 画像のwidth/heightも定められています

validationツールとしては公式のAMP Validatorがあり、ここでひととおりAMP対応を確認できます。

注意: Google Search Consoleで検出されるAMPエラー

AMP対応後に判明したのですが、Google Search Consoleでは、上の公式validatorでは検出されないAMPエラーを指摘されることがあります。たとえば、WordPressの記事ごとのアイキャッチ画像がなくてもAMP Validatorのチェックはパスしますが、Search Consoleではエラーが表示されます。

AMP error

上の[テストツールを開く]をクリックすると、以下のようなエラーが表示され、imageフィールドが空欄になっていると指摘されます。

image field error

こうしたエラーはAMP運用を開始してSearch Consoleによるクロールが行われないと通知されないので、そのときに対応することになります。可能であれば事前にすべての記事にアイキャッチをつけておきましょう。

関連記事

Ruby on RailsによるWEBシステム開発、Android/iPhoneアプリ開発、電子書籍配信のことならお任せください この記事を書いた人と働こう! Ruby on Rails の開発なら実績豊富なBPS

この記事の著者

hachi8833

Twitter: @hachi8833 コボラー、ITコンサル、ローカライズ業界を経てなぜかWeb開発者志願。 これまでにRuby on Rails チュートリアルの大半、Railsガイドのほぼすべてを翻訳。 かと思うと、正規表現の粋を尽くした日本語エラーチェックサービス enno.jpを運営。 仕事に関係ないすっとこブログ「あけてくれ」は2000年頃から多少の中断をはさんで継続、現在はnote.muに移転。

hachi8833の書いた記事

週刊Railsウォッチ

インフラ

Rubyスタイルガイドを読む

BigBinary記事より

ActiveSupport探訪シリーズ