Casual Developers Notes

初級・中級のエンジニアやデザイナー向けに技術情報と英語学習情報を提供中。エンジニアもデザイナーも技術と英語を身に着けて海外に飛び立とう!

  • ホーム
  • 技術 Tips & Tutorials
  • 技術塾
  • ライフハック
  • 海外留学
  • 英語学習
  • コラム
  • お問い合わせ
You are here: Home / Archives for blog

2017年8月16日 By Keid Leave a Comment

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

2015年12月31日 By Keid Leave a Comment

[column] 正月だし御節食べながら技術ブログ書きませんか?

[column] 正月だし御節食べながら技術ブログ書きませんか?

2016年、明けましておめでとうございます。

迷走系エンジニアのKeidです。このブログ「Keid’s LIFE」も4年目に入りました。当初の記事を見るとどんどん黒歴史が出来上がっていますね(笑)この間テレビで30手前で人生を考え直した的なあるある話を見て、俺もまさにその時期だな、と感じています。後悔だけはしたくないなー。

このブログは、平日400PV、休日は150PVくらいのアクセスがあり、一週間に2000人強が見に来てくれています。学生時代にプライベートな日記ブログを書いていたことがありますが、その時は1日1人も見に来てくれればラッキーくらいの過疎地で、今のアクセス数は驚きです。それだけ、役に立っていると言うことだと思いますので、嬉しいことです。

俺がブログをしている理由は今のところ一つだけです。

「世界のエンジニアやデザイナの小さな助けになるため」です。

(日本語で書いてますけど、アメリカやヨーロッパからもアクセスがあるんですよ、不思議と。)

エンジニアなら誰もが経験したことがあるはずです。何か技術的な問題にぶち当たり、その解決策をググりにググり、ある記事によって助けられた経験が。何度も(笑)

このブログは、世界の技術ブロガーへの感謝の気持ちを込めて、その恩返しとして、同じようにググっているエンジニアやデザイナへ貢献するための「小さな一歩」だと考えています。

技術ブログなんて、本当に小さな記事で良いと思います。その記事がどんなに小さな問題解決であっても、それで助けられる人はいますから。インターネットのロングテールは小さな記事を誰もが発見できるようにし、多くの人を助ける仕組みを提供してくれています。

少し話が変わりますが、前に、それなりに有名なエンジニアが集まるセッションを見に行ったことがあります。その時の有名エンジニアの方々が「ずっとコードを書いていたい。(まともな食事もとらずに)お菓子だけでずっとコーディングしている。(俺、かっこいいでしょ)」的な発言をしていました。俺は「こいつら、正気か?」と思ったのは言うまでもありません。うまいもの食べながらコーディングしたいですから。まったく、有名人の言うことは意味が分かりません(笑)

コーディングもブログも、ガッツリうまいもの食べて、リラックスできる空間で、テイラースウィフトの音楽を聴きながらしたいものです(^ー^)

ということで、

お正月ですし、豪華な御節でも食べながら技術ブログ書きましょう!

きっと、あなたの記事で助けられる人がいますよ。

カテゴリ : コラム タグ : blog, column, tumblr-imported

技術力と英語力を向上させて
あたなを次のステージへ引き上げるための無料メルマガ

Sponsored Links

About Author

Keid

カナダを拠点に活躍する(予定)デベロッパー。 大学でコンピュータサイエンスを真面目に学び、日本の大手IT企業に就職したまでは予定通りの人生だったが、日本のIT業界に失望したことで考え方が変わり、海外への挑戦を決意。海外に行きたくても英語ができなかっため、語学留学を経て強制的に英語を上達させ、カナダへの切符を手にした。このブログでは海外に挑戦したいエンジニアやデザイナーに少しでも有益な情報を提供していきたいと思う。(写真は旅行で行ったラスベガス)

https://casualdevelopers.com/

最近の投稿

  • 自作のNPMモジュールをsemantic-releaseを使って自動的にセマンティック・バージョニングで管理する方法

    自作のNPMモジュールをsemantic-releaseを使って自動的にセマンティック・バージョニングで管理する方法

    2019年2月15日
  • Go言語でさくっとREST APIを作ろう(Gorilla Mux編)

    Go言語でさくっとREST APIを作ろう(Gorilla Mux編)

    2019年2月4日
  • MacBook ProでApp Storeのアプリをアップデートする際に「This item is temporarily unavailable」と怒られた場合の対処法

    MacBook ProでApp Storeのアプリをアップデートする際に「This item is temporarily unavailable」と怒られた場合の対処法

    2019年2月1日
  • Go言語のためのVisual Studio Codeの設定方法

    Go言語のためのVisual Studio Codeの設定方法

    2019年1月28日
  • reCAPTCHAをWordPressに導入してロボットによるスパムメールを防ぐ方法

    reCAPTCHAをWordPressに導入してロボットによるスパムメールを防ぐ方法

    2019年1月25日

カテゴリ

  • 技術 Tips & Tutorials (85)
  • 技術塾 (5)
  • ライフハック (25)
  • 海外留学 (11)
  • 英語学習 (3)
  • コラム (7)

アーカイブ

最高の学習のために

人気記事ランキング

  • MySQLで「ERROR 2003 (HY000): Can't connect to MySQL server」と怒られた時の対処法
    MySQLで「ERROR 2003 (HY000): Can't connect to MySQL server」と怒られた時の対処法
  • [tips][Sublime Text] Sublime Text 3で文字化けしない方法
    [tips][Sublime Text] Sublime Text 3で文字化けしない方法
  • [tips][bat] バッチで明日の日付を計算する。
    [tips][bat] バッチで明日の日付を計算する。
  • Jupyter Notebookで「The kernel appears to have died. It will restart automatically.」というエラーが出た場合の原因と対処法
    Jupyter Notebookで「The kernel appears to have died. It will restart automatically.」というエラーが出た場合の原因と対処法
  • [tips][perl] Perlで文字コードをいい感じに処理する方法
    [tips][perl] Perlで文字コードをいい感じに処理する方法
  • データサイエンスのためのAnaconda環境構築とTensorflowのインストール方法(Docker編)
    データサイエンスのためのAnaconda環境構築とTensorflowのインストール方法(Docker編)
  • SpringBootのProfile毎にプロパティを使い分ける3つの方法
    SpringBootのProfile毎にプロパティを使い分ける3つの方法
  • SAKURAのメールボックスで独自ドメインのメールを設定し、Gmail経由で送受信する方法
    SAKURAのメールボックスで独自ドメインのメールを設定し、Gmail経由で送受信する方法
  • PythonでWebスクレイピング入門(Scrapy+Selenium編)
    PythonでWebスクレイピング入門(Scrapy+Selenium編)
  • Herokuの無料dynoをスリープさせないで24時間稼働させる4つの方法
    Herokuの無料dynoをスリープさせないで24時間稼働させる4つの方法

Bitcoin寄付

Bitcoinを寄付しよう

BTC
Select Payment Method
Personal Info

Donation Total: BTC 0.0010

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

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

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

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

Copyright © 2019 Keid - Casual Developers Notes