ウェブサイトにアクセスして、そのホームページの読み込みに時間がかかる(homepage takes ages to load)ことに気付くほどイライラすることはほとんどありません。さらに悪いことに、画像の品質が低く、レイアウトが適切に最適化されていない場合があります。
実際、Googleの調査(Google study)によると、53%の人が、3秒以内に読み込まれないサイトを離れるため、バウンス率が高くなり、収益が減少します。
これらの問題に対処するために、Googleは(Google)Accelerated Mobile Pages(AMP )を作成しました。AMPはサイトの読み込み時間を短縮するだけでなく、魅力的なサイトの設計(design a compelling site)、スリリングなモバイルエクスペリエンス、平均クリック率(CTR)の向上にも役立ちます。
このガイドでは、Google AMPがモバイルページでGoogleが推奨する形式である理由と、 (Google AMP)WordPress用(WordPress)にAMPを実装する方法について説明します。
Google AMPとは何ですか?(What Is Google AMP?)
Google AMPは、 (Google AMP)2015年10月(October 2015)にリリースされたウェブコンポーネントフレームワークであり、軽量でユーザーファーストのウェブサイトの作成と構築を支援します。モバイルイニシアチブは、Webページの簡略化されたバージョンを提供することによってWebを高速化するように設計されています。
WordPress、Pinterest、Washington Post、Redditなどの多くの大企業がAMPを採用しており、毎月のユニークビジター数が増加してい(increase in monthly unique visitors)ます。
ウェブページがGoogleの(Google)AMPを介してモバイルユーザーに提供されると、基本的で単純に見えるため、AMPの目標である、非常に高速で動的なエクスペリエンスと使いやすさの向上を実現できます。
WordPressサイトにAMPが必要ですか?(Do You Need AMP on Your WordPress Site?)
AMPは高速ですが、Webページの読み込みを高速化したり、サイトの速度を上げ(increase your site speed)たりする唯一の方法ではありません。
出版社、企業、その他の業界に対するAMPのプラスの影響を示す多くのケーススタディがありますが、多くのケーススタディの失敗もあります。これは、 AMP(AMP)がすべてのサイトに対応しているかどうかについて明確な決定がないことを意味します。
しかし、本当のことは、AMPの成功はいくつかの決定要因に依存しているということです。たとえば、ユーザーが主にデスクトップを使用している場合、 AMPページはデスクトップに豊富な機能を備えて表示されず、AMPキャッシュ(AMP Cache)から提供されないため、ユーザーはこれらのメリットを享受できない可能性があるため、 AMPは適していません。
黄金律は、AMPは主にニュースサイトやブログを運営している出版社に推奨されるということです。ポートフォリオサイトやランディングページのような他のものは、必ずしもAMP(AMP)を必要としません。
さらに、AMP以外のページを2.5秒の標準内またはそれ以下で読み込むことができる場合は、AMPをインストールまたは維持する必要はおそらくありません(AMP)。
WordPressサイトにAMPを実装する方法(How to Implement AMP on a WordPress Site)
WordPressでウェブページのAMPバージョンを作成することは、開発者だけが処理できるタスクのように見えるかもしれませんが、少しの知識といくつかのガイダンスがあれば、自分でそれを行うことができます。
Googleには、 (Google)AMPページの作成、ページの統合と最適化、分析トラッキングの設定(set up analytics tracking)、サイトのニーズに合わせたページのデザインをガイドするワークフロープロセスがあります。
まず、Googleからテンプレートコードが提供されます。このコードをコピーして.html拡張子に保存し、必要なマークアップを追加できます。これにより、ページが実行可能なAMPHTML(AMP HTML)ドキュメントに変わります。
公開する前に、サイドバーに記載されている手順を使用して、画像を含めたり、レイアウトを変更したり、SEOに合わせてページを最適化したり(optimize the page for SEO)、プレビューしたり、ページを完成させたりすることができます。
必要に応じて、独自のWordPress(WordPress)サイトで試す前に、amp.devホームページでAMPを試すことができます。
WordPressにGoogleAMPをインストールする方法(How to Install Google AMP on WordPress)
WordPressサイトに(WordPress)GoogleAMPを手動で設定してインストールするのは複雑です。ただし、WordPress用の公式AMPプラグイン、(official AMP plugin for WordPress) WP用AMP(AMP for WP)、またはAMP WPなどのプラグインを使用して、プロセスを簡単にすることができます。
このガイドでは、公式のWordPressAMPプラグインを使用してWordPressサイトに(WordPress)AMPをセットアップしてインストールする方法を説明します。
WordPressAMPプラグインを使用してAMPをインストールする方法(How to Use the WordPress AMP Plugin to Install AMP)
- 開始するには、 WordPress(WordPress)サイトにWordPressAMPプラグインをインストールしてアクティブ化します。WordPressダッシュボードに移動し、[Plugins > Add New選択します。
- 検索ボックスに「AMP プラグイン」と入力し、 (plugin)[今すぐインストール](Install Now)を選択してプラグインをインストールします。
注(Note):WordPress.comを使用している場合は(WordPress.com)、プラグインをインストールするには(install any plugins)ビジネス(Business)プランにアップグレードする必要があります。
- Plugins > Installed Pluginsに移動し、 AMPを見つけて[アクティブ化](Activate )リンクを選択し、 AMPプラグインをアクティブ化して、サイトで機能させるようにします。
- プラグインを有効にしたら、設定を調整してAMPページをカスタマイズします。プラグインを構成するには、AMP > Settingsに移動し、ウィザードを使用してAMPページの設定を構成します。
- 設定の調整が完了したら、[公開(Publish )]ボタンを選択します。サイトは訪問者に表示されたり、Googleで検出されたりすることはありませんが、ページ、投稿、またはその両方を(Google)AMPサイトに表示するかどうかを選択できます。これを行うには、AMP > Settings > Advanced Settings, サポートされているテンプレート(Supported Templates)]チェックボックスの選択を解除してその他のオプションを取得します。
- 必要なオプション(options)を選択してから、[変更を保存](Save Changes)を選択します。
- Plugins > Add NewYoast SEOとAMP(Yoast SEO & AMP)を(Yoast SEO)検索して、 YoastSEOをAMPセットアップに統合することもできます。
- [今すぐインストール]を(Install Now)選択し、プラグインをアクティブ化します。(Activate)有効になったら、SEOに移動し、[ (SEO)AMP ]を選択してページのカスタマイズオプションをさらに取得し、[変更を保存](Save Changes)を選択します。
- 公開する前に、必要な投稿またはページのURLの最後に(URL)ampを追加して、 (amp)AMPサイトをプレビューします。たとえば、https://yourwebsite.com/blog-post-title/amp/にアクセスできます。
WordPressAMPを検証する方法(How to Validate WordPress AMP)
WordPressサイトにAMPがインストールされている場合、次のステップは、AMPが正しく機能することをテストすることです。それだけでなく、検証により、サポートされているプラットフォームがサイトにアクセスしてリンクできることが保証され、トラブルシューティングのための(errors for troubleshooting)AMPエラーを見つけることができます。
WordPress AMPは手動で、またはGoogleのAMPテストツール(Google’s AMP Testing tool)を使用して検証できます。
WordPressAMPを手動で検証する方法(How to Validate WordPress AMP Manually)
- これを行うには、AMPページを開き、検証するWebページのURLの末尾に#development=1
- ブラウザに移動し、開発ツールコンソール(developer tools console)を開きます。Firefoxを使用している場合は、menu > Web Developer > Web Consoleを選択します。AMPページにエラーがある場合は、赤で強調表示されます。
検証エラーは、不正なコード、無効なプレフィックス、または許可されていないタグが原因で発生する可能性がありますが、エラーの横に原因の説明が表示されます。
GoogleのAMPテストツールを使用してWordPressAMPを検証する方法(How to Validate WordPress AMP Using Google’s AMP Testing Tool)
- Google AMPテストツール(Google AMP Testing tool)ページを開き、サイト、投稿、またはページのURLを入力して、[(URL)テストURL](Test URL)を選択します。サイトのコードを貼り付けて、[テストURL](Test URL)を選択することもできます。
- Googlebotがサイトを分析し、有効な場合は、AMPページがGoogleSERP(Google SERPs)にどのように表示されるかをプレビューします。
Google AMPテスト(Google AMP Testing)ツールを使用すると、AMPエラーを特定し、(AMP)サイトの問題の原因となるコードを確認できます。[共有(Share)]ボタンを選択して、分析を同僚と共有することもできます。
また、Google AMP(Google AMP Validator)検証ツールを使用してコードが検証されていることを確認するか、Chrome AMP拡張機能(Chrome AMP extension)を使用してページを検証し、警告やエラーを表示することもできます。
WordPressサイトを強化する(AMP up Your WordPress Site)
Google AMPは、特にモバイルトラフィックがすでに多い場合、どのサイトにとっても大きな変化です。ニュースコンテンツのあるサイトを運営している場合は、AMPをすぐにインストールするのが理にかなっているかもしれませんが、他のビジネスでは、間違ってしまうとコンバージョンを損なう可能性があります。
サイト全体で使用することを決定する前に、トラフィックの多いいくつかのページでAMPをテストして、肯定的な結果が得られるか否定的な結果が得られるかを確認することをお勧めします。
WordPressサイトでAMPを試しましたか?AMP for WordPressの使用について共有する他のヒントはありますか?コメントで私たちと共有してください。
What Is AMP for WordPress and How To Install It
Few things are more frustrating than visiting a website only to find that its homepage takes ages to load. Worse still, is when the images are of poor quality and layouts aren’t well optimized.
In fact, a Google study found that 53 percent of people leave sites that fail to load in three seconds or less, which leads to high bounce rates and decreased revenues.
To deal with these issues, Google created the Accelerated Mobile Pages (AMP). Not only does AMP accelerate your site’s loading time, but it also helps you design a compelling site, thrilling mobile experience, and increase in average click-through rate (CTR).
In this guide, we’ll explain why Google AMP is Google’s preferred format for mobile pages, and how you can implement AMP for WordPress.
What Is Google AMP?
Google AMP is a web component framework launched in October 2015 to help create and build lightweight, user-first websites. The mobile initiative is designed to speed up the web by serving up a stripped down version of your webpage.
Many large companies including WordPress, Pinterest, Washington Post, and Reddit have adopted AMP and experienced an increase in monthly unique visitors.
When your webpage is served to mobile users via AMP in Google, it’ll look basic and simplistic, thus achieving AMP’s goal of lightning fast, dynamic experiences and better usability.
Do You Need AMP on Your WordPress Site?
AMP is fast, but it’s not the only way to make web pages load faster or increase your site speed.
There are many case studies that demonstrate AMP’s positive impact on publishers, businesses, and other industries, but there are also many case study failures. This means there’s no clear-cut decision as to whether AMP is for all sites or not.
What rings true though is that the success of AMP depends on some decision factors. For example, if your users are primarily from desktop, AMP isn’t for you because AMP pages don’t display with rich features on desktop, and they’re not served from the AMP Cache so users may not enjoy these benefits.
The golden rule is that AMP is recommended primarily for publishers running news sites and blogs. Anything else like a portfolio site or landing pages doesn’t necessarily need AMP.
Plus, if your non-AMP pages can load within or below the 2.5-second standard, you probably don’t need to install or maintain AMP.
How to Implement AMP on a WordPress Site
Creating an AMP version of your web page on WordPress may look like a task only developers can handle, but with a little knowledge and some guidance, you can do it on your own.
Google has a workflow process that guides you as you build an AMP page, integrate and optimize the page, set up analytics tracking, and then design the page for your site’s needs.
To get started, Google will provide you with a template code, which you can copy and save to a .html extension, and then add the required mark-up. This will turn the page into a workable AMP HTML document.
Before you publish, you can include images, modify the layout, optimize the page for SEO, preview, and finalize the pages using instructions provided on the sidebar.
If you want, you can experiment with AMP on the amp.dev homepage before trying it out on your own WordPress site.
How to Install Google AMP on WordPress
Manually setting up and installing Google AMP on your WordPress site is complicated. However, you can use plugins like the official AMP plugin for WordPress, AMP for WP, or AMP WP to make the process simpler.
For this guide, we’ll show you how to set up and install AMP on a WordPress site using the official WordPress AMP plugin.
How to Use the WordPress AMP Plugin to Install AMP
- To get started, install and activate the WordPress AMP plugin on your WordPress site. Go to the WordPress dashboard, select Plugins > Add New.
- Type AMP plugin in the search box, and select Install Now to install the plugin.
Note: If you’re using WordPress.com, you have to upgrade to the Business plan to install any plugins.
- Go to Plugins > Installed Plugins, find AMP and select the Activate link to activate the AMP plugin and make it work on your site.
- Once you activate the plugin, adjust the settings to customize the AMP pages. To configure the plugin, go to AMP > Settings and use the wizard to configure your AMP page settings.
- Select the Publish button once you’re done adjusting the settings. Your site won’t be visible to your visitors or discoverable by Google, but you can choose whether you want the pages, posts, or both to be shown on your AMP site. To do this, go to AMP > Settings > Advanced Settings, and deselect the Supported Templates checkbox to get more options.
- Select the options you want and then select Save Changes.
- You can also integrate Yoast SEO into your AMP setup by going to Plugins > Add New and then search for Yoast SEO & AMP.
- Select Install Now, and Activate the plugin. Once activated, go to SEO and select AMP to get further customization options for your page, and then select Save Changes.
- Before publishing, preview your AMP site by adding amp to the end of any post or page URL you want . For example, you can go to https://yourwebsite.com/blog-post-title/amp/
How to Validate WordPress AMP
With AMP installed on your WordPress site, the next step is to test that it works correctly. Not only that, but validation also ensures that supported platforms can access and link to your site, and you can find AMP errors for troubleshooting.
You can validate WordPress AMP manually or using Google’s AMP Testing tool.
How to Validate WordPress AMP Manually
- To do this, open an AMP page, and then add #development=1 to the end of the URL for the web page you’re validating.
- Go to your browser and open the developer tools console. If you’re using Firefox, select the menu > Web Developer > Web Console. If there are any errors on the AMP page, they’ll be highlighted in red.
Validation errors can be caused by incorrect code, invalid prefixes, or disallowed tags, but you’ll see an explanation of the causes next to the error.
How to Validate WordPress AMP Using Google’s AMP Testing Tool
- Open the Google AMP Testing tool page, enter the URL of your site, post, or page, and then select Test URL. You can also paste the site’s code and select Test URL.
- The Googlebot will analyze your site and if valid, you’ll see a preview of how your AMP pages could appear on Google SERPs.
With the Google AMP Testing tool, you can identify AMP errors and see the problem-causing code on your site. You can also select the Share button to share the analysis with your colleagues.
You can also use Google AMP Validator tool to make sure that your code validates, or use the Chrome AMP extension, which also validates the pages, and shows any warnings or errors.
AMP up Your WordPress Site
Google AMP is a major change for any site, especially if you already have lots of mobile traffic. If you run a site with newsy content, it may make sense to install AMP right away, but for other businesses, you could hurt your conversions if you get it wrong.
We recommend testing AMP on a few high-traffic pages to see if you get positive or negative results before making the decision to use it across your entire site.
Have you tried AMP on your WordPress site? Do you have any other tips to share about using AMP for WordPress? Share with us in the comments.