閲覧履歴 マイ注目リスト
おかげ様でご利用4万社突破!ノベルティグッズ名入れ制作は実績No1の卸売りセンターへ。周年記念、卒業記念品もご相談ください。

販促レポート

<WordPress> ワードプレスで企業サイト制作|AMP対応編

投稿日:2018/04/12 カテゴリ: ワードプレス

企業サイトで収益を伸ばすならブログソフトのワードプレスが断然おすすめ。使えるプラグイン(オプション機能)も豊富で、何といっても無料で操作も簡単。今回は、SEOやモバイル検索で超重要な要素、AMPについて徹底解説いたします。

 

AMPとはいったい何だろう?
<WordPress> ワードプレスで企業サイト制作|AMP対応編

AMPとは、Accelerated Mobile Pagesの略で、Googleが2015年に発表したモバイルページの高速表示を目的としたオープンソースプロジェクトです。

「AMP HTML」というオープンソースを使えば、サイトの読み込み時間を大幅に短縮することができます。2016年6月時点で、GoogleがインデックスしたAMP対応済ページは1億2,500万といわれています。
参考:www.slideshare.net

AMPは、通常リンクをクリックしてからHTMLを読み込みページ表示されるところを、ウェブページのHTMLをあらかじめGoogleにキャッシュ(一時保存)させておくことで、読み込み時間を大幅に削減しています。

ただし、検索ボックスにキャッシュURLが表示されてしまう問題点があります。この点に関しては、Googleが推進するAMP Projectが「Web Packaging」という技術によってオリジナルドメインを表示させることができると発表しています。正式な導入時期は未定です。



AMPに対応するメリットとデメリット
<WordPress> ワードプレスで企業サイト制作|AMP対応編

AMPに対応することで得られるメリットはたくさんありますが、概ね以下が代表的なものになります。

トップニュース枠にカルーセル表示される
AMP対応していると、優先的にGoogleのモバイル検索結果の上部「トップニュース枠」にカルーセル表示されます。視認性が高まるため、クリック率、インプレッションの向上が期待できます。ただし、必ず表示されるわけではありません。

モバイルページの読み込みが早くなる
最大のメリットは、モバイルページの読み込みが早くなることです。Googleはモバイルの表示速度をモバイル検索の順位評価に反映させる「スピードアップデート」を2018年7月から導入すると発表しており、今後はSEOにも大きな影響を与えそうです。

AMPマークが表示される
2016年10月から、Googleのモバイルの検索結果において「AMPマーク」が表示されるようになりました。トップニュース枠同様、より多くのユーザーの注意を引くことができ、クリック率、インプレッションの向上が期待できます。

=====

一方で、わずかながらAMP対応のデメリットもあります。

hタグやSNSボタンなどが表示されなくなる
AMPには、独自の「AMP HTML」という規格があるため、既存ページのhタグやSNSボタン、関連記事が表示されず、表示崩れを起こす場合があります。また、Java Scriptの使用も制限されるため、サイトの一部機能が正常に作動しなくなる恐れがあります。

コードの管理が2重になる
上で述べたように、「AMP HTML」というコードが必要になるため、既存のHTMLとAMP HTMLの二つのコードを管理する必要があります。また、AMP HTMLでは利用できない、制限されているタグも多く、cssの記述方式にも制限があり注意が必要です。



ワードプレスサイトのAMP設定手順
<WordPress> ワードプレスで企業サイト制作|AMP対応編

ワードプレスで構築された企業サイトのAMP設定はすごく簡単。今回は、プラグインを使った手順をご説明します。

手順1.プラグイン「AMP」をインストールする
プラグイン「AMP」をインストールし有効化します。これでAMP対応は完了ですが、この設定だけではモバイルからの訪問者に対し、自動的に表示をAMPページに切り替えることはできません。本文(テキスト)以外の要素もほとんど表示されない状態になっています。
プラグイン:AMP for WordPress|WordPress プラグイン

手順2.AMPページのデザインをカスタマイズする
「AMP for WP – Accelerated Mobile Pages」というプラグインを使うと、ロゴの設定、カスタムCSSの追加、SNSボタン設定とかなり細かい部分までカスタマイズできます。また、AMP用のアナリティクスタグの設定も行うことができます。
プラグイン:AMP for WP – Accelerated Mobile Pages|WordPress プラグイン

手順3.Googleアナリティクスで新しいプロパティを作成する
AMPのアクセス数を計測するには、Googleアナリティクスで新しいプロパティを作成する必要があります。作成すると、新しいトラッキングコードを取得できるので、さきほどのプラグイン「AMP for WP」の「Analytics」という項目に取得したコードを入力しましょう。続いて確認作業です。

手順4.「AMPテスト」でチェックする
チェックしたいAMPページのURLを入力すると、有効なAMPページか判断してくれます。特に問題がなければ「有効なAMPページです」と表示されます。設定が間違っている場合は、修正する必要のある問題点が表示されます。
参考:AMPテスト|search.google.com

手順5.「構造化データテストツール」でチェックする
構造化データテストツールでは、正しくHTMLがマークアップされているかチェックすることができます。もし、エラーが表示されている場合は、トップニュースへのカルーセル表示がされない可能性が高くなります。修正しておきましょう。
参考:構造化データテストツール|search.google.com

手順6.Search Consoleでエラーを確認する
Search Console の[検索の見え方]から[Accelerated Mobile Pages]という項目を表示し、エラーの有無を確認しましょう。問題のURLとエラーの概要は表示されますが、詳細は分かりません。詳細はChromeの右クリックメニュー[検証]からデベロッパーツールに入り、 [console]の項目から確認しましょう。

AMP対応をしたのにインデックスされていない、正しく表示されていないとなれば、設定した意味がありません。設定が完了したら、必ずエラーチェックを行いましょう。



AMPの設定で覚えておきたい注意点
<WordPress> ワードプレスで企業サイト制作|AMP対応編

前段では、AMPの設定手順について解説しました。最後に、ここでは設定における注意点をお伝えしたいと思います。

メリットとデメリットを事前に知る
表示速度が向上するなどメリットも大きいですが、表示崩れによるUIの低下、管理コストや手間の増加といったデメリットも考えておかないといけません。現状のサイトのデザインやアクセス数などを鑑みて導入を検討してみてください。

AMPページが検索結果に必ず表示されると限らない
グーグルの検索結果に、通常のページ、AMPページのどちらが表示されるかはアルゴリズム次第で、必ずAMPページが表示されるとは限りません。もちろん、正しい設定を行っていれば表示される可能性はグンと高まります。

AMPのURLを変更した場合は、リダイレクト設定が必要
AMP対応の運用を「プラグイン」から「テーマ」に変えた場合、末尾のampを含むURLが変わる場合があります。変更前のURLは検索結果や閲覧者のブックマークに残ったままになるので、元URLから新URLへリダイレクト設定を行う必要があります。


いかがでしたか?
今回はAMP対応について解説いたしました。AMPはまだ新しい規格で導入しているサイトもさほど多くありませんが、今後SEOにおいて非常に重要なテーマになることは間違いありません。ぜひ、この機会に導入を検討してみてください。サイト制作について最初からおさらいしたい場合は、バックナンバーをどうぞ。


<ライタープロフィール>
担当ライター:ryusuke
WordPressサイト制作/Web集客の専門家。大手広告代理店にて、百貨店や出版社のリスティング広告運用を担当。その後独立、広告代理店で培ったSEOやデータ分析の知見を活かし、個人メディアを運営する傍らフリーのコンテンツライターとして活動中。執筆テーマは、集客やマーケティングなどビジネス関連、グルメや音楽関連。
公式ブログ
公式フェイスブック

 

 

販促レポートは、特集記事や販売促進コラム、オフィスでの問題解決など、皆さんのビジネスに少しでも役立つ情報をお届け。編集長の弊社代表と様々な分野で活躍する若手ライター陣によって、2008年より地道に運営されております。

 

 

 

このレポートと併せてオススメしたいノベルティグッズ

ノベルティ:<アウトレット売切廃盤> ビーチマチ付ポーチ

<アウトレット売切廃盤> ビーチマチ付ポーチ ホワイト

450円 ⇒ 225円

名入れ対応品 推奨品 

注目リストでお見積り

ノベルティ:[粗品(キッチンラップ)] 旭化成 サランラップ 粗品レギュラー

[粗品(キッチンラップ)] 旭化成 サランラップ 粗品レギュラー

200円 ⇒ 125円 ⇒ 123円

名入れ対応品 推奨品 値引き品 ノベルティ:[粗品(キッチンラップ)] 旭化成 サランラップ 粗品レギュラーの関連レビュー 

注目リストでお見積り

ノベルティ:[防災グッズ] 安全スベリ止手袋

[防災グッズ] 安全スベリ止手袋

100円 ⇒ 56円 ⇒ 55円

名入れ対応品 値引き品 

注目リストでお見積り

ノベルティ:[粗品/お土産] 和柄ふせんセット 椿/つばき

[粗品/お土産] 和柄ふせんセット 椿/つばき

320円 ⇒ 140円 ⇒ 138円

値引き品 推奨品 フルカラー名入れ対応品 

注目リストでお見積り

 

 

 

<こちらの関連記事もいかがでしょうか?>

WordPress小技:プラグインを使ってリンク切れをチェックする方法

WordPress小技:プラグインを使って記事に目次を設置する方法

WordPress小技:プラグインを使ってスパムコメントを防御する方法

WordPress小技:プラグインを使って、人気記事ランキングを設置する方法

WordPress小技:Facebookページプラグインを設置する方法

WordPress小技:ログイン画面に二段階認証を設定する方法

<WordPress> ワードプレスで企業サイト制作|AMP対応編

カテゴリ: <ワードプレス> の一覧

 

 

 

<もしよければ、このページの共有をお願いいたします>

 

[お探しの検索ワードはコチラですか?]

クルトガ消臭剤ストールスポーツタオルギフトステンレスボトル事務用品バス用品PRバッグボールペン&シャープペン血圧計フリクションパスケース


[特集] 特急7営業日!名入れスピード印刷、お急ぎのお客様は諦めずにご相談ください

[特集] 写真も綺麗に印刷!フルカラー対応ノベルティ インクジェット、昇華転写など

[特集] 格安ウェットティッシュ 1,000個よりオリジナルラベル対応

[特集] 名入れができる「卒業記念品」と「卒園記念品」<2017年春> 卒業記念品の納入実績 新着

スペシャルカテゴリー

3色ペン同数オマケ付キャンペーン

3色ペン同数オマケ付

注文同数の「3色ペン」をプレゼント12/31迄 新着

アマゾンギフト券5,000円分プレゼント!人気ボトルキャンペーン

アマゾンギフト券5千円

必ず貰える!人気ボトルキャンペーン11/30迄 新着

名入れ 卒業記念品

2019年春 卒業記念品

後払い・送料0円・名入れデータ作成0円 新着

<ギフト用ラッピングバッグ> 全員プレゼントキャンペーン

ラッピングバッグ貰える

対象商品のご注文でプレゼント!11/30迄 新着

[Xmas] 各種クリスマス景品

各種クリスマス景品

お菓子ブーツ、イベント用品、ミニツリー 新着

2018年秋の新作商品

2018年冬の新作商品

名入れ対応!エコバッグ・ボトルなど

熨斗(のし)ノベルティ特集

熨斗(のし)ノベルティ

時節柄を問わない新アイテム 粗品・ご挨拶

不織布バッグ新シリーズ

不織布バッグ新シリーズ

お手頃で優しい風合い
選べる7カラー

防災グッズ

防災・防犯グッズ特集

名入れ対応!非常用ライト・救急セットなど

名入れスピード印刷

スピード印刷対応品

ご相談下さい!名入れ印刷、特急7営業日

フルカラー対応ノベルティ

フルカラー印刷対応品

写真も綺麗に印刷!フルカラー対応ノベルティ

価格別

GRobOZ^[

LOiꕶ[

mxeBObYȆiELOi̖J^O

mxeBObYȆiELOi̖J^O

FOLLOW @pqnavi
LIKE @pqnavicom

ページTOP

管理用