How to Setup AMP for Wordpress

How to Setup AMP for WordPress

Page Speed.

How important is it as a ranking factor?

The answer is: A fast loading website is in-friggin’-dispensable. The human attention span is in a downward spiral – no one wants to wait, especially if they are on a mobile device.

How fast do we need to be? Google recommends a page load time of less than two seconds.

There are many popular measures across on-page and technical domains of SEO that help you meet the goal.

However, one of those measures – Setting up Accelerated Mobile Pages (AMP) for the mobile version of a website – is used sparingly.

Why? In a nutshell, going AMP takes a fair bit of time, effort, and funds depending on how big a website is. In the end, it may not even be worth it.

Is it worth it for you to invest in AMP? If the answer is yes, this post will help you with a step-by-step process of effectively setting up AMP for your WordPress website.

Step 1: Choose the right plugin

Plugin options

WordPress offers many plugins for AMP. I have tried a few of them with success to varying degrees. One of them gave marvelous results in the Google Pagespeed Insights for a while. But it broke all my AMP pages on mobile!

My recommendation

I would recommend the AMP for WP – Accelerated Mobile Pages – WordPress plugin. This plugin provides a lot of options to customize mobile webpages. The rest of the post will be about setting up AMP for your website using this plugin.

After you install and activate the plugin, the WordPress dashboard will show the option of opening the AMP version of your website. You will also see the new plugin (AMP) as highlighted in the below image.

implement-AMP-AMP-for-WP

As in the image above, you will see a set of options, we will cover each of them one-by-one.

Lets jump into the settings.

Step 2: Basic setup of the plugin

Website type

How to Setup AMP for Wordpress

Select the option that best represents your business. Select ‘other’ if nothing else matches, you will get an option to type in your website type after that.

Where do you need AMP?

How to Setup AMP for Wordpress

Select where you want to implement AMP. When you go for AMP, you are deciding to keep your mobile web pages almost completely HTML. You need to let go of the CSS/JS codes that reduce the load speed.

The downside to that is, the user experience (UX) gets impacted. For instance, you can no longer have a call-to-action (CTA) button that swivels to attract a visitor’s attention. AMP cuts out that code, thus saving on page load time. This may eventually result in a reduced engagement rate.

In the above list, you may want to choose to have AMP on your pages, or posts, or both.

Design and presentation

implement-AMP-design-and-presentation-setup-your-logo

Here, you can Setup Your Logo, the recommended size is 120 x 90 pixels. I would recommend not using the logo as it adds to page load time. If no logo is updated on this panel, the AMP page will only have the website name in place of the logo.

The Global Color Scheme option will help you pick a color for your AMP pages that appears on the CTA links on the page, and on the footer link.

Analytics tracking

implement-AMP-setup-analytics-tracking

In this option panel, you can enable the tools that you use for tracking. For instance, you can enable Google Analytics by adding the Tracking ID. This way data from the AMP pages will get updated directly in your Google Analytics account.

Similarly, you can add multiple other tracking tools as listed in the image above.

Privacy settings

implement-AMP-privacy-settings-cookie-notice-bar-gdpr

The Cookie Notice Bar enables you to seek consent from visitors for the cookies you are using on the website. In the below image, the dialogue box in black is a cookie notice bar.

implement-AMP-monster-insights-hello-world

Image Source – Monster Insights

If you or your audience base is from a GDPR country, you need to turn on the settings for GDPR – General Data Protection Regulation.

Please note, if you have to choose, you can choose only one of the two options, not both.

implement-AMP-advertisement-amp

In this segment, choose where you want to position your Advertisements. You can customize as per need – you can have Ads published sitewide or on single posts, or headers among other options.

implement-AMP-advertisement-positions

You can choose the Ad type, Ad size, and Data Ad Client and Data Ad Slot from the Adsense Ad Code.

3rd party compatibility

The last entity captures the list of plugins that you need AMP compatibility for.

implement-AMP-wordpress-3rd-party-compatibility

Gravity Form and Elementor for AMP require you to pay for extensions. Structured Data, Ads for WP, and PWA for WP are free plugins. The last three shall be covered in a bit more detail later in the post.

Step 3: More AMP settings

General Settings

implement-AMP-wordpress-general-settings

implement-AMP-wordpress-general-settings-2

The General tab covers the options we covered in the basic set-up. In addition, you get to choose if you want to have AMP on archives, category, and tags pages.

Enabling the last option – AMP Takeover (Beta) – will cause your desktop and mobile version to be the same. This means, your desktop version will also have AMP pages.

I would recommend keeping this option off. Page load is usually better on desktop than on mobile. Having AMP on desktop means trading off UX for a small increment in Page speed. Not a good bargain.

SEO

implement-AMP-SEO

If you choose to turn on Meta Description, the text you fill in the Head Section will be picked up by Google. This will be different from the text you filled in for the desktop version. I would recommend keeping the setting off, and keeping the Meta Description consistent across the two versions.

OpenGraph Metadata tags are snippets of code that control how URLs are displayed when shared on social media. This section is visible for the desktop version when you are setting up Title and Metadata in your SEO plugin. Below is an example of the Yoast SEO plugin.

implement-AMP-yoast-seo

You can find it by going to the Editor section of any post or page, scroll to the bottom. Once you see the section for Yoast, click on the ‘Social’ tab, then you can choose the social media platform of choice.

The AMP plugin allows you to select the SEO plugin of choice on the same option panel. In the above example, Yoast is the plugin chosen. All the data you enter into Yoast for the Desktop version gets copied into the AMP version.

implement-AMP-advance-setup

You will see the option to Remove Paginated Pages Indexing and URL Inspection Tool Compatibility.

Paginated pages should be indexed but only as canonical. I would recommend keeping this setting off.

URL Inspection Tool Compatibility fosters a more transparent search for you. It provides detailed reports on crawl, index and serving information in your Google Search Console account. I would recommend keeping it turned on.

Elementor Support

implement-AMP-elementor-support

The option of AMPforWP PageBuilder will let you build individual pages for the AMP version, different from the desktop version. It is useful when you want to have slightly different text or CTA for AMP pages.

For example, if you have a ‘Contact Us’ CTA for desktop but you would rather the mobile visitors to call you, you can activate this option and create a separate page.

PWA

implement-AMP-settings-PWA

As per AMP for WP Plugin’s description – Progressive Web Apps (PWA) transforms your website into a web application and gives visitors a native mobile app-like experience.

It is a design enhancement. Activating the module is a matter of choice.

Performance

implement-AMP-performance-enhancement

The Performance panel delves deeper into page speed optimization.

It enables you to Minify CSS/JS to reduce bandwidth usage without impacting UX or functionality. Leverage Browser Cache enables you to speed up load time for returning visitors. I would recommend keeping both the options turned on.

Enabling Optimize CSS will trigger the tree shaking feature of optimizing CSS. You can keep it turned on in case you don’t have a different plugin that already does that job.

Analytics, Structured Data, Notice Bar and GDPR

These sections have the same options as those covered in the basic setup.

Push Notifications

implement-AMP-push-notifications

In case you want to set-up push notifications, you can opt for one among OneSignal, iZooto and Truepush.

In the above example, I have selected OneSignal. However, for any selection, you will see a section to enter the APP ID, an option to enable push notifications for Pages. In addition, you need to choose where you want to position the notification (bottom of the page for example), and what text you want to display.

Contact Forms

implement-AMP-contact-forms

This enables you to choose one of the 3 plugins to optimize AMP for – Contact Form 7, Gravity Forms, and Ninja Forms.

All three require you to pay for an extension. In case your CTA is focused mainly on forms, it is prudent to invest in the extension.

implement-AMP-comments

This screen lets you choose where you want the user-generated comments to show on your website. You can also choose the sources to display comments from.

Choose the settings that work best for you.

Instant Articles

implement-AMP-instant-articles

Instant Articles is a feature on the Facebook App for mobile users that lets you host your website articles.

The benefit of turning this feature on is an even faster load time compared to having the same article on your website. Since the article loads within the App, you get up to 10 times faster load speed.

However, since the content stays on Facebook, you might lose out on some website traffic. It’s a trade-off between page-speed and website traffic. I would recommend keeping it off.

If you choose to keep it on, you will see the below settings.

implement-AMP-instant-articles-facebook-instant-articles-setup
implement-AMP-instant-articles-facebook-instant-articles-setup-2

After entering your Facebook Page ID, you can customize the article settings. A setting that requires more explanation is – Crawler Ingestion.

When the link of your article hosted on your website gets shared on Facebook, Facebook crawlers look for the ia:markup_url tag. If it’s present, Facebook ingests your article and creates an instant article on your Facebook page.

Tools

implement-AMP-tools

The Individual AMP Page option lets you choose if you want to show the AMP pages by default or not. When you choose Show by Default, all your pages will show the AMP version. However, you can choose to hide AMP for individual posts or pages.

To do that, go to any page and click on Edit Page. In the Settings tab toward the right, you can find the option of turning it off.

implement-AMP-home-settings-show-amp-for-current-page-bar

Similarly, you can choose to Hide the AMP versions for selected categories and posts.

Query Monitor is the developer tools panel for WordPress. If you are a developer, who needs to see the queries on the page, you should keep the setting turned on.

Advance Settings

implement-AMP-advance-settings

The Advance Settings option panel has a host of settings most of which are self-explanatory.

I would recommend keeping the default settings turned on unless you are a WP developer or have hired an expert to design your website.

eCommerce

implement-AMP-e-commerce

If you own an online store, you can customize your AMP version for WooCommerce. If you primarily sell digital assets, you can turn on the Easy Digital Downloads Support option. Both the options require you to enable a paid extension.

Translation Panel

implement-AMP-translation-panel

This panel enables you to select the right translations for a commonly used set of words into the language of your choice.

For instance, you need to type in the translation for the View Non-AMP Version suited to your audience.

For multilingual translations, you can turn on the Use POT file method of Translation. POT (Portable Object Template) file is a template for the PO files. They are plain text files that contain the translations. Each language has its own file extension. For instance French has po.fr.

Step 4: Design

Themes

implement-AMP-design-themes

Just like for the desktop version of your website, you can pick a theme for the AMP version.

There are four free options to choose from.

  • Design One
  • Design Two
  • Design Three
  • Swift

In addition, every page and post has a section that enables you to create your own design.

Here’s how you can find it. Go to the page or post, and click on ‘Edit Page’ in the top toolbar. Scroll down to see the below screen.

implement-AMP-page-builder

If you select the Use Builder checkbox, the template you create will be shown, if not, the free template you select will be shown.

In case you are building your own template, you have the below modules to choose from.

implement-AMP-use-builder-columns

Remember, AMP is basically an HTML page. You can not get much customization or fancy buttons.

Please note: You have to select a theme. The plugin needs it to pick icons and structure – even when you create your own design.

Global

This option panel lets you customize your AMP version.

implement-AMP-global-color-scheme-typography

You can select the colors of choice as above. In addition, you can select Google Fonts. However, I would recommend keeping it off as Google Fonts increase the load time, defeating the purpose of AMP.

implement-AMP-general

Further on, you can choose to keep Sidebar and Infinite Scroll on if that’s what you want your webpage to look like. However, from a page speed perspective, you should keep it off.

The Font Icon Library will be the same as the theme you had chosen at the beginning of the Design panel.

Header

implement-AMP-header-design

The Header options panel, lets you decide the layout of your header and how your navigation menu should look.

implement-AMP-header-settings

It also lets you add a Call Now Button. It’s a useful button for mobile users.

implement-AMP-call-now-button

You may choose to show your Non-AMP link in the Header. However, if your audience is not technically SEO oriented, they may not click on the link.

You can also enable the Search bar. It’s beneficial if you have a blogging website.

implement-AMP-advance-header-options

The Advanced Header Option enables you to get more specific with your header section settings. It’s a matter of choice. However, keep in mind not to add to the code, as it will negatively impact the page load speed.

Homepage, Single, Footer, Page, Social Sharing, Date and Misc

These option panels, just like the header, are completely a matter of design choice. You can choose any settings that suit you the best.

Summing up

The above steps will help you implement AMP effectively on your website. Once you have saved the changes, check out the AMP version on your phone, or, by appending ‘/amp’ after the URL.

The below images capture the features of your AMP page.

AMG PAGE VISUAL

implement-AMP-page-visual

FOOTER

implement-AMP-footer

There you have it. Follow these steps to have error free, superfast pages that load in less than 2 seconds for mobile phone visitors.

Leave a Reply

error: Content is protected !!