れもんす 40代主婦のお気楽日記ブログ

40代主婦が書くメンタル・wordpress・家事・占いなどの複合お役立ちブログ

スマホ イメージ画

wordpress

Affinger4 AMP ページと 構造化データ 設定方法

投稿日:

今回は、人気有料テーマ Affinger4 AMP ページに関する話をまとめてみたいと思います。今回は、WordPressに関するお話しです。

前回書いたブログ開設 から16日経った今 seo成功しているか? で、AMPページ対応の話を書いたため、構造化データ設定方法を紹介しておこう…と思い、まとめることにしました。

 

Affinger4 AMP ページ

 

人気テーマAffinger4は、これでもか?というくらいいろいろな機能が備わっています。その中でも、お気に入りの機能 がAMPページです。簡単にAMPページも作成でき、AMPプラグインで作成したページより、見やすいなぁと思います。

 

Affinger4 AMP モバイル表示高速化

 

AMPページを作成した人なら分かるかもしれませんが、GoogleのAMPページ規定がかなり詳細です。きちんと設定しないと、Google search consoleでエラーになってしまいます。

今回は、Affinger4のAMPページに関することと構造化データ設定をおこなってエラー回避できたやり方を書き留めておきたいと思います。

 

Affinger4なら、面倒な設定なく簡単にAMPページが作れる

 

AMPページについて

 

AMPページとは?上手く説明するのが、難しいと思いましたので、wikiを引用させていただきます。"(-""-)"

Accelerated Mobile Pages (AMP) は、Googleが中心となって立ち上げた、モバイルでのウェブサイト閲覧を高速化することを目的とするオープンソースプロジェクトである。

wiki参照

 

今、Googleが力を入れていること。それは、モバイル快適化です。

 

スマホの普及率は留まることなく、どんどん増えている状態です。Googleがモバイル快適化のひとつとして、AMP対応ページも勧めているようなのです。

Googleが、スマホの快適化や、AMP対応ページを勧める理由は、増え続けるスマホユーザ-が快適にネットを活用することが現時点で優先事項と考えているためです。

 

Affinger4 AMP モバイル表示高速化 イメージ画②

 

れもんす
三年ほど前、携帯ショップで働いていたのですが、大半の人がパソコンにほこりが被っている。と言われました…。光回線のサービス促進のために配属された私は、かなりショックでした…"(-""-)"。

 

AMPプロジェクト

こちらのサイトで、AMPページの作り方など詳しく記載されています。

 

れもんす
これを読んで、bloggerブログのAMP化を試みたのですが、ハードルが高く挫折…。今ならなんとなく理解できるかなぁ。得意な人は簡単な設定なのかも。

 

モバイルインデックスがメイン?

 

 

 

こちらの記事をチェックしていただくと分かるかと思います。

今までパソコンインデックスがメインとして扱われて、モバイルインデックスはサブ的な役割だったのですが、今後はパソコンインデックスがサブ的になり、モバイルインデックスがメインとして今後扱われるといった内容がまとめて書かれています。

 

順序が逆転 イメージ画

 

れもんす
サブとメインが反対に?

 

この記事で、Googleがモバイルに力を入れていることが分かってもらえるかも?…と思い、記事をリンクさせていただきました。

 

ほかのサイト運営者さんたちの動き

 

ということで、AMP対応サイトに切り替えている人も増えてきているようです。

サイト運営を勉強するために活用しているサイトの運営者さんたちが次々、AMPページ化していると、最近気付きました。

 

私が、この情報を知ったのは今年になってから。出だしが遅くて焦ってしまいました。…が、今年の春に使い始めた、Affinger4なら簡単にAMPページが作れるということで、今はとても助かっています。

 

れもんす

度々、にお邪魔するブロガーさんのページがいつの間にかAMP対応に…(;^_^A

 

Affinger4で作るAMPページ

 

テーマをインストールした後、通常の新規投稿ページの右サイドバーにあるAMPページ設定にチェックを入れるとAMPページも作成できます。

Affinger4なら簡単に、通常ページとは別にAMPページも同時に作れます。

 

れもんす
簡単とは、こういうこと?

 

通常、同じ内容の記事を作成すると、Google規定で、重複コンテンツとみなされ、ペナルティが課せられます。

ですがAMPページに関しては、問題なく通常ページとAMPページ二つ用意しても問題ないとのことです。

 

AMPページ対応のyoutube設定も楽、アドセンス設定も楽でしたよ~(*'ω'*)

 

れもんす
全投稿ページをAMP対応一括設定もできます。でも、これはやめておいた方がいいかも…。

 

作成したAMPページの確認方法

 

作成したAMPページの確認方法は、通常の記事URLの後に、/ampと入力すると

確認できます。

AMP Validatorというchrome拡張機能を設定することで、簡単にチェックできます。

 

設定した後、chromeツールバーに⚡マークが表示されます。この⚡マークが、AMP Validator のボタンになります。AMP対応されたページの場合、⚡マークはグリーンになります。

設定されていない場合、マークはグレーのままです。

 

このボタンをクリックすると、AMPページ化された記事を確認できます。

 

AMPページが有効化をテストするなら

 

テスト しないとびっくりする結果が イメージ画

 

AMPページは簡単に作れるのですが、実はいろいろな制限や規定があります。

ここをクリアしないと、後ほど Google search console にエラーが発生します。

 

作ったAMPページにエラーが発生していないか?確認するとき。

Google AMPテスト

こちらで確認できます。

 

さきほど、Affinger4で全ページをAMP対応できるということを書きました。そして、やめておいた方がいいとも書いたのですが…。

たくさん、作成した記事の中には、AMP対応できないソースもたくさんあります。うっかり、作っていたサイトで、この設定をすると、エラーが大量に発生する危険があります。

これは、体験済みだから言えます。

 

れもんす

700くらいエラーを出してしまいました。、正直びっくり唖然としました。

 

 

Affinger4 のAMPページ対応 構造化データはコピー&ペースト

 

Affinger4の公式サイトにも注意書きがあります。構造化データ設定は行っていません。ということです。

 

調べた結果、こちらのサイトで作成されたソースが一番良かったです。

下記のリンクからコピーさせてもらい、ペーストしました。

 

WordPress 投稿の構造化データを設定する方法

 

ここに記述されたソースをコピーし、テーマ編集にあるAFFINGER4親テーマの single-amp.phpの一番最後にペタッと貼り付け終了です。

私の場合、この方法でエラー報告がなくなりました。

 

れもんす
この方法で構造化データ設定をする場合、バックアップを行ってから、がいいかと思います(;^_^A

 

ブロトピ:ブロトピ投稿でアクセスアップ‼

ブログランキングに参加しています。良かったら応援してくださいね(*'ω'*)

人気ブログランキングへ







-wordpress

Copyright© れもんす 40代主婦のお気楽日記ブログ , 2017 AllRights Reserved Powered by AFFINGER4.