Casual Developers Note

エンジニアやデザイナー向けの技術情報・英語学習情報・海外留学情報・海外旅行情報を提供中。世界を旅して人生を楽しもう。

  • ホーム
  • 技術 Tips & Tutorials
  • 技術塾
  • ライフハック
  • 海外留学
  • 英語学習
  • コラム
  • お問い合わせ
現在の場所:ホーム / アーカイブamp

2017年8月16日 By KD コメントを書く

TumblrとWordPressのAMP設定方法とAMPエラーの対処方法

TumblrとWordPressのAMP設定方法とAMPエラーの対処方法

TumblrでもWordPressでも、ブログを運営していると、ある日突然Google Search Console Teamから「AMPページのエラーを修正してください」というメールが送られてくることがあります。実際にGoogle Consoleを見ると同様のエラーが表示されるわけですが、皆さんは対応済みですか?自分も対応したので、その時の方法を共有します。ついでに、AMPの設定方法も紹介します。

そもそもGoogleが推奨するAMPとは?

AMPとはAccelerated Mobile Pagesの略称で、GoogleとTwitterが共同開発している、モバイル端末でブログなどの静的コンテンツを高速に表示するための仕様です。

つまり、この仕様に従ってHTMLを記述すると、GoogleによりAMPのページであると判定され、キャッシュなどによりページの表示が高速化します。さらに、Google検索の結果にAMPのマークが付き、SEO的にも有利になります。

TumblrでAMP機能を有効にするには?

AMPは仕様なので、HTMLを空で書くと準拠するのがめんどくさいですが、Tumblrには簡単にAMPに対応するためのボタンが追加されているため、以下の手順で簡単にブログをAMPに対応させられます。

「外観を編集」->「テーマの編集」->「詳細設定」から「Google AMPを有効にする」を選択する。

WordPressでAMPを有効にするには?

WordPressの場合は「AMP for WP」というそのままのネーミングのプラグインを入れれば自動的に生成されます。

AMP for WP – Accelerated Mobile Pages
AMP for WP – Accelerated Mobile Pages
Download QR-Code
AMP for WP – Accelerated Mobile Pages
Developer: Ahmed Kaludi, Mohammed Kaludi
Price: Free

GoogleからAMPエラーだと言われた時の対処方法

ここでやっと本題です。AMPを有効にした後で、そのブログがAMPの仕様に違反している場合に、Google Search Console Teamから「AMPページのエラーを修正してください」というメールが届きます。あるいは、自分でGoogle Search Consoleからエラーが無いか確認できます。エラーがあった場合はどう対処すればよいのでしょうか?順を追って説明します。

1. AMPのエラーの数を確認する

  1. Google Search Consoleを開く
  2. AMPエラーがある場合は対象のページに「AMP ページのエラーを修正してください 詳細を表示」の表示を確認し、「詳細を表示」のリンクをクリックする
  3. 「レポートを開く」のボタンをクリックする
  4. 「Accelerated Mobile Pages」が表示され、「重大な問題のある AMP ページ」の数を確認できる

2. AMPのエラーの詳細を確認する

  1. 「Accelerated Mobile Pages」から「AMP タグに無効なレイアウト プロパティがある」のリンクをクリックする
  2. エラーのあるAMPページのURLが出てくるので、選んでクリックする
  3. 「ページをテスト」をクリックし、AMPページをテストする
  4. エラーの詳細が確認できる

3. AMPのエラーに対処する

  1. エラーの詳細に沿って原因となっているHTMLを修正する
  2. 「ページをテスト」をクリックして、「有効なAMPページです」と表示されれば完了

これで対処は完了です。

自分の場合の原因と対応

対処方法は分かっていても、いざやってみるとハテナになる場合もありますよね。ということで、自分の場合のAMPエラーを説明しますので参考にしてください。

Tumblrで発生していたAMPエラーのメッセージ

暗黙的レイアウト「CONTAINER」はタグ「amp-img」ではサポートされていません。

原因と対応

このメッセージを見たTumblrユーザはこう思うはずです。「amp-img」タグなんて使ってないけど?カラクリを説明すると、TumblrのAMP機能を有効にした場合、ブログ内の「img」タグは自動的に「amp-img」タグに変換されます。この時「amp-img」タグの使い方が仕様に準拠していないとエラーになるわけです。

自分の場合は「amp-img」タグの仕様を確認した結果、要素に「width」と「height」が足りていないことが原因だったため、その「img」タグ(自分で記事を書いている時はまだ変換される前なので注意)の要素に「width」と「height」を追加することで解決しました。

WordPressで発生していたAMPエラーのメッセージ

タグ「span」の属性「id」に無効な値「AMP」が設定されています。

原因と対応

このメッセージが出たのはまさにこのページなのですが、AMPプラグインで自動生成したHTMLのspanタグに「id=”AMP”」という記述があるという意味でした。これはどういう場合に起こるかというと、h2タグなどの見出しとなるタグ内の文字にアルファベットがAMPしか含まれない場合です。例えば、「AMPとは?」という見出しにするとこのエラーが発生します。これは日本語ならではの現象で、英語で全て書いていれば起こりえません。

対処としては、AMPが含まれている見出しに他のアルファベットを入れて修正する必要があります。例えば、「AMPとは?」ではなく「Googleの推奨するAMPとは?」という風に修正すればエラーがなくなります。

最後に

ここまで辿り着いた皆さんはAMPに対応したブログを完成できましたか?これであなたのページはAMPパワーを存分に発揮してくれることでしょう。

カテゴリ : ライフハック タグ : amp, blog, google, tumblr, tumblr-imported

ブログ更新情報や海外の関連情報などを配信する無料メルマガ

Sponsored Links

About Author

KD

世界を旅し日本を愛するエンジニア。大学でコンピュータサイエンスの楽しさを学び、日本の大手IT企業で働く中で、新しい技術やスケールするビジネスが北米にある事に気づく。世界に挑戦するための最大の壁が英語であったため、フィリピン留学およびカナダ留学を経て英語を上達させた。現在は日本在住でエンジニアとして働きつつ、次の挑戦に備えて世界の動向を注視している。挑戦に終わりはない。このブログでは、エンジニアやデザイナー向けの技術情報から、海外に留学したい人向けの留学情報、海外に興味がある人向けの海外旅行情報など、有益な情報を提供しています。

https://casualdevelopers.com/

最近の投稿

  • 2020年JS周辺のバックエンド寄りの注目技術!ネクストNodeJSの「Deno」と分散型パッケージレジストリの「Entropic」の紹介

    2020年JS周辺のバックエンド寄りの注目技術!ネクストNodeJSの「Deno」と分散型パッケージレジストリの「Entropic」の紹介

    2020年1月13日
  • 今さら聞けないJavaによる関数型プログラミング入門 ~ラムダ式、ストリーム、関数型インターフェース~

    今さら聞けないJavaによる関数型プログラミング入門 ~ラムダ式、ストリーム、関数型インターフェース~

    2019年11月4日
  • ReactのためのEslintおよびPrettierの設定方法 ~Airbnb JavaScript Style Guideの適用~

    ReactのためのEslintおよびPrettierの設定方法 ~Airbnb JavaScript Style Guideの適用~

    2019年10月30日
  • BashからZshに移行する方法(Mac編)

    BashからZshに移行する方法(Mac編)

    2019年10月21日
  • Create React Appを使わないでゼロからReactの開発環境を構築する方法(Webpack/Docker編)

    Create React Appを使わないでゼロからReactの開発環境を構築する方法(Webpack/Docker編)

    2019年9月30日

カテゴリ

  • 技術 Tips & Tutorials (100)
  • 技術塾 (6)
  • ライフハック (26)
  • 海外留学 (12)
  • 英語学習 (3)
  • コラム (6)

アーカイブ

最高の学習のために

人気記事ランキング

  • MySQLで「ERROR 2003 (HY000): Can't connect to MySQL server」と怒られた時の対処法
    MySQLで「ERROR 2003 (HY000): Can't connect to MySQL server」と怒られた時の対処法
  • Expressで「Cannot set headers after they are sent to the client」と怒られた時の対処法
    Expressで「Cannot set headers after they are sent to the client」と怒られた時の対処法
  • SAKURAのメールボックスで独自ドメインのメールを設定し、Gmail経由で送受信する方法
    SAKURAのメールボックスで独自ドメインのメールを設定し、Gmail経由で送受信する方法
  • 爆速でJenkinsをマスターしよう(GitHubアカウント統合編) ~ JenkinsのGitHub Organizationの設定方法 ~
    爆速でJenkinsをマスターしよう(GitHubアカウント統合編) ~ JenkinsのGitHub Organizationの設定方法 ~
  • [tips][perl] Perlで文字コードをいい感じに処理する方法
    [tips][perl] Perlで文字コードをいい感じに処理する方法
  • FacebookログインのJavascriptのSDKをサクッと試す方法
    FacebookログインのJavascriptのSDKをサクッと試す方法
  • Jupyter Notebookで「The kernel appears to have died. It will restart automatically.」というエラーが出た場合の原因と対処法
    Jupyter Notebookで「The kernel appears to have died. It will restart automatically.」というエラーが出た場合の原因と対処法
  • SLF4JとLogbackによるJavaのロギング入門(SLF4J + Logback + Lombok)
    SLF4JとLogbackによるJavaのロギング入門(SLF4J + Logback + Lombok)
  • [tips][bat] バッチで明日の日付を計算する。
    [tips][bat] バッチで明日の日付を計算する。
  • PythonでWebスクレイピング入門(Scrapy+Selenium編)
    PythonでWebスクレイピング入門(Scrapy+Selenium編)

Bitcoin寄付 / BTC Donation

Bitcoinを寄付しよう

BTC
Select Payment Method
Personal Info

Donation Total: BTC 0.0010

このブログの運営のためにBitcoinでの寄付を募集しています。お気持ち程度の寄付を頂けると管理者の励みになります。

Bitcoin寄付について知りたい方はこちらの記事へ

ビットコイン取引ならここ

  • ホーム
  • 技術 Tips & Tutorials
  • 技術塾
  • ライフハック
  • 海外留学
  • 英語学習
  • コラム
  • サイトマップ
  • タグ一覧
  • プライバシーポリシー
  • お問い合わせ

Copyright © 2023 KD - Casual Developers Notes