“T he key strength of AMP isn’t just that it makes your pages fast, but that it makes your pages fast in a way that can be validated. This way, third parties such as Twitter, Instagram or Google Search can feel great about serving AMP pages to readers in increasingly interesting ways.” The AMP Project
AMP Who Needs It?
Mobilegedden is coming! and if you haven’t installed AMP on your WP site it’s time to prepare. AMP is an acronym for Accelerated mobile pages and if you have a WordPress website or running Woo Ecommerce it’s a fairly simple process to install and configure.
Recent stats show 44% of all websites visited are through a desktop computer and the percentages keep dropping. Mobile browsing is taking over and Google will be moving towards big changes in search results mobile indexing first in 2018. We are living in a time when site speed and delivering content quickly is crucial to getting found and it is excellent for the user experience and a known ranking factor for search engine optimization, especially Organic SEO. In my recent post, I discussed How Does Your Host Affect Your Online Presence? to cover how hosting affects SEO and site speed and from here we will take on another level of the user experience, site speed, and SEO through installing AMP for WordPress.
What Is AMP?
Accelerated Mobile Page AMP is exactly as it sounds and aims to drastically improve the mobile performance of web sites by delivering content quickly. According to the AMP project, “The significant power of AMP isn’t just that it makes your pages fast, but that it makes your pages fast in a way that can be validated”. Even though responsive websites have become the industry standard it only resolves issues of rendering across various screen sizes from desktop computers to mobile devices giving visitors a seamless visual experience not speed. Now AMP takes this to another level by taking your web site and stripping it down to a code called AMP HTML ( Hypertext Markup Language) which is the basic code a website uses to render your web pages.
In a nutshell, AMP builds and delivers mobile content statically, which is content that doesn’t change VS dynamically interactively based content that depends on the user’s input when viewing a particular page. Some examples of static content are the logo, the navigation menu, or any other information in header or footer versus if someone were to land on your website and choose a product with variations, or blog commenting, logging into an account or basically a personalized delivery of content based on a users input meaning one code many methods of delivery.
Why Use AMP In WordPress?
Over half of all site visits come from mobile and smart devices such as tablets and Ipads. mobile phones, using Accelerated Mobile Pages dramatically improves the performance and user experience of the mobile web by loading web pages instantaneously across multiple platforms and devices so that content can appear everywhere in an instant, no matter what type of device the user is using. Installing AMP in WordPress is fairly easy compared to other CMS systems and doesn’t require any special coding, just configuration, and testing and when done right can really boost your visuality in search results on mobile devices and improve SEO.
How To Install AMP In WordPress
The process is quite simple and straight forward to install AMP on WordPress this is the method I personally used for my site and if you would like to try other plugins or configurations there are many options to find within a web search. So let’s start with what you need:
The Plugins needed:
- AMP for WP – Accelerated Mobile Pages by Ahmed Kaludi, Mohammed Kaludi
* If you’re using Yoast for SEO I recommend also adding Glue for Yoast SEO & AMP
The Steps To Install & Configure
Below is a quick and easy way to Install AMP, configure and test.
Configuration
You will need to have some assets ready for the AMP installation for WordPress these will be a Logo, specifically for this AMP plugin the recommend logo size is 190x36px. Make sure to use a logo dark or light that fits your overall brand feel in the AMP page you will be creating.
*These are basically the settings I am using and a simple guide on how to properly setup AMP in WordPress and verify that it is working.
Tips on using a logo for AMP
If you would like some more info on branding and logo usage for AMP please visit:
https://developers.google.com/search/docs/data-types/articles#logo-guidelines
- Step One
Go to AMP in the admin panel and then go to general settings.
Here you will upload a logo, you may choose a custom size, I simply added the recommended size but it depends on the style of logo you have and the best way for it to be displayed.
Next you will have the option of adding AMP to all of your pages, personally, I prefer just to use it for my blog posts but if you’re running an Ecommerce, a large standard web site, portfolio, or a business site this is something you may want to use. Simply it’s just a preference.
*Keep in mind each page will generate a new AMP page with an AMP in the URL and can cause duplicate title issues if done properly amp will invoke a canonical tag so make sure to run a site audit with an SEO professional to check for these.
For example
Normal post: www.mywebsite.com/services
AMP post: www.mywebsite.com/services/AMP
2) Step Two Configuration
Page Builder: I like the freedom to customize my AMP pages so I have this option set to “On” but if you can’t be bothered you can turn this off. More on this in a bit.
Design: Here is where you can customize the look of your AMP pages and launch the page builder. Before you do that you will see a drop down of prebuilt themes. 1 and 2 are pre-configured for you so if you want a quick install go for it, I prefer to use my branded color palette for this and control the colors and feel of my AMP pages so I choose Option 3. You will then see all the options for colors of your color scheme, header background color, font color, anchor link color, and header elements colors.
Next, you will have additional options to add a featured slider, search bar, call now button, credit link, and even more customization if you know CSS. I prefer to keep my AMP pages minimal and clean this is up to you what features you want to add.
Now click on the button “Launch Post Builder” now you will see a preview or example of your AMP page, at this point you can continue and configure further with the options displayed or revisit your design options and come back.
In the Post builder, you will see a bunch of advanced design options in the Design Manager. Here you can live edit your AMP page and turn elements on and off and change the color scheme and drag and drop elements around. Play with this until you get the desired style that represents your brand best and serves the needs of your target audience.
Single: This is where you can add more features and functionality to your AMP single pages such as authors bio, pagination, to turn or off sticky social icons. Click the features you want to display for static pages. You can revisit and launch the post builder to preview again our AMP single page.
Advertisement: If don’t run ads but if you do, configure this as needed.
Menu: Here you can add AMP to the end of the URL in the menu, I prefer not to use this feature and have it turned off.
Social: This is pretty much straight forward you can turn on off your preferred social media accounts. I prefer to link to my social media accounts for social signals and configure Social Media Profiles (Design #3) and add my social media accounts.
SEO: Here you can configure what SEO settings you want to use. I have turned on the meta description and since I’m using Yoast SEO plugin I have turned on meta tags from Yoast and Yoast Description in ld+json for structured data and schema markups. JSON-LD (JavaScript Object Notation Linked Data) is a cool way of presenting structured data to the search engine to make it easy for the search engines to better understand the content and context of your web pages.
Analytics: Here you can connect AMP to your Google analytics, I always connect to my GA account when possible. So go ahead and enter your GA tracking code or any type of analytics you want from the drop down and save.
Structured Data: Structured data will display ratings and other info below your meta title in search results above the meta description and star ratings. This is called schema markup and for more info, you can read about it here https://moz.com/learn/seo/schema-structured-data
Now upload a default logo and post or page image in case you don’t have a featured image this will take its place as default same goes for the logo. Configure the sizes and save.
Contact Forms: I use another plugin for my contact forms but if you’re using gravity or contact form 7 you can turn on support for this.
Notifications: If you’re in the EU or UK you must follow web guidelines and notify if your site is using cookies, here you can turn this feature on or off if necessary.
Comments: If your running comments on your website you can toggle this feature and customize how many comments to show and add Facebook or discus support.
Translation Panel: If you are running a multi language site here you can configure and translate the elements of your AMP pages and POT file method of translation.
I basically have skipped Facebook instant articles support but this is up to you.
The last configuration I use in “Advanced Settings” is to Link to Non-AMP page in Footer I think this adds to the user experience to give users the option to view a non AMP page and I toggle this to ON.
The Result….
Save all your changes and preferred designs and now you are ready to test your AMP on WordPress Validation by visiting a few URLs. If you configured everything correctly you should have a successful installation of AMP in WordPress the right way.If you get any errors revisit the steps above or do a web search on the exact errors you receive.
How To Test Your AMP Installation
https://search.google.com/test/amp
Official documentation of the AMP plugin for WordPress
https://ampforwp.com/tutorials/article/amp-wp-installation-tutorial/
My approach to search engine optimization is called Organic SEO and most people call me the “Authority Detective.”
What I do is investigate your entire visitor and search engine experience and find opportunities for quick wins with a verifiable return on investment.
My process is to investigate your competition and your website and site visitor’s experience, identify friction points within site structure that is hindering conversions and deeper indexing of your content. The strategy is executed on-page optimization and content marketing strategies that create a solid foundation for organic traffic and content marketing and increased social metrics.
My experience started 25 years ago with corporate marketing, in-depth psychological consumer-based market research, branding, and product design; working with major companies such as Ford, Pepsi, RJ Reynolds, and Tommy Hilfiger. For the past 10 years, I have applied my background of consumer psychology and branding and WordPress design to online presence management and Organic SEO.
My SEO services are all in house, hand-done, zero outsourcing, zero paid links getting you the long-lasting results and ROI you need to establish your online presence, gain traffic organically, and brand your online presence or business.
Are you looking to solidify your brand name and promote your business? getting the more exposure and increase your rankings safely and organically, getting found is a process, not a project.
