icon.wordpress

How to Use AMP with WordPress — SitePoint

search engine optimization google, SEO BLOG / By


To learn more about developing for mobile and other device sizes, take a look at the SitePoint Premium course Responsive Tips and Tricks

AMP with WordPress

More from this author

Google’s Accelerated Mobile Pages (AMP) project has been launched on 24 February 2016. With this launch, thousands of developers became active participants in the project. Countless websites now have AMP versions of pages, and many developers are learning to use AMP – in this case, learning to use AMP with WordPress.

Google takes AMP very seriously. It is one of their search engine ranking criteria as well. In that way, Google is making AMP almost a necessity for many sites. In this article, I am going to give you detailed information about Google’s Accelerated Mobile Pages project. This includes the steps for invoking it in your WordPress site.

What is AMP?

Some developers might not be all that familiar with AMP yet. It is a mobile-friendly framework that enables fast loading of your web page on mobile browsers. It is an open source technology designed to empower website publishers to efficiently improve the speed and user experience of loading content pages on mobile devices. And all of this enhancement occurs with zero effect on advertisement revenue.

If you’re an experienced developer, you can achieve a similar kind of enhancement through comprehensive page loading optimizations. However, Accelerated Mobile Pages make these optimizations very easy to execute without spending as much time and energy on mobile layout.

For websites who are already working double time for their SEO rankings, this just adds more tasks to their to-do list, of course, because AMP pages can also enhance the SEO ranking of your website. That is, perhaps, the main reason big enterprises are also adopting AMP.

AMP Project

AMP consists of three major components:

  • AMP HTML
  • AMP JS
  • AMP Cache

AMP HTML

It is a subset of HTML with many restrictions, custom tags, and custom properties. Adapting to this is not complicated if you have a pre-existing familiarity with HTML. Yet if you find that you have any difficulty, I suggest you visit this link to learn more about how to create your AMP HTML page.

AMP JS

AMP provides a limited amount of JavaScript for mobile web pages. Now an important thing to bear in mind about JS in AMP is that third party JavaScript is not allowed with AMP.

AMP Cache

The Google AMP Cache is a CDN for delivery of AMP pages. You all know the core function of Content Delivery Networks – they distribute resource loading to servers nearer to your website’s viewers. For an AMP page, this CDN will allow for the minimum loading time due to distance latency that is possible.

The Relevance of the AMP Sign for SEO

Back in 2016, when Google was launching AMP, AdAge.com published an interview with Google’s senior director of news and social products, Richard Gingras. In that interview, he said that AMP usage would not directly correlate to your search ranking, as it is not a direct factor. He then added, “All of the other (search engine ranking) signals need to be satisfied as well.”

However, after this clarification, everything becomes more clear. He said, “If we had two articles that from a signaling perspective scored the same in all other characteristics but for speed, then yes, we will give an emphasis to the one with speed because that is what users find compelling.”

Even Google doesn’t deny the relevance of AMP website for SEO. Speed is always an influencing factor when it comes to search engine optimization. If an AMP page gets more clicks and less bounce rate due to faster loading, Google will definitely rank the website higher because of the better user experience.

Watch Introduction to Responsive Web Design

Responsive design without the hype.


How Can One AMP Their Website?

You have to maintain two versions of an article page on a website. The original article page, for default web user, and an AMP version for potential mobile users.

Also note that AMP doesn’t allow form elements and third party JavaScript. This means you cannot put a contact form or on-page comments in a standard implementation, as AMP is primarily for the delivery of content.

  • I recommend rewriting the entire website template to cope with the restrictions. For instance, the CSS of an AMP page must be in line and the page size less than 50 kb. Also, due to the fast loading of fonts, they should be loaded with the help of the amp-font extension in order to efficiently load the page.
  • It is advised that multimedia must be handled with special care. For images, you need to utilize the element and precise width and height. Also, if your images are GIFs, then you will need to use the separate amp-anim extended component.
  • For videos, there are two choices. There is a custom tag for embedded videos called amp-video. However, if you want to embed a YouTube video, there is a specific tag for that called amp-youtube.
  • For embedding slideshows, you can use amp-carousel. In addition to that if you want to add an image lightbox you can use amp-image-lightbox.
  • For embedding social media platforms such as Twitter, Facebook, Instagram, Pinterest, and Vine, you can use each respective component.
  • This point is very important. Now, once everything is set and you’re ready to go with your AMP page, you have to let Google know about your AMP website. You will have to add a tag on your main post page with information about your AMP page <link rel="amphtml" href="http://www.yourblog.com/blog-post/amp/"> as well as a canonical tag on the AMP page with information about the main page <link rel="canonical" href="http://www.yourblog.com/blog-post/">.

You can learn more about AMP tags and Schema.org metadata for AMP here. Schema.org metadata “is a requirement to make your content eligible to appear in the demo of the Google Search News carousel”. So, if you wish to achieve success through Google AMP, you have to get your schema right.

Does Google Analytics work on AMP?

Yes, of course, Analytics works on AMP. In fact, Analytics on AMP is quite smart as well. In order to prevent a website to slow down due to multiple analytics trackers, they work on the core philosophy of, “Measure Once, Report to Many”. Generally, there are two paths to enable Analytics with AMP for your website.

  • The amp-pixel element: It is a simple tag to count a number of page views (similarly to a tracking pixel) by using a GET request.
  • The amp-anayltics extended component: This component is more advanced than the amp-pixel. You can use it to measure any activity on an AMP page. It enables you to specify JSON config which provides details for what to measure and where to send the report.

How to Use AMP with WordPress Websites

One of the simplest ways to use AMP, in fact, is to implement it on your WordPress website. You can use the official plugin developed by Automattic/WordPress.

Step One: Install the WordPress Plugin

Let’s begin the installation! download the plugin from the above link and nstall the plugin on your WordPress site. After the installation, you just need to append “/amp/” to an article page. If you don’t have pretty permalinks enabled, you can try ?amp=1.

Step Two: Validate & Tweak

Google search console picks up the AMP version of your article page from the metatag which will be appended by the plugin. However, the problem arises because it usually takes days to detect these kinds of changes.

So, now what to do? To handle these tricky situations, I recommend using a combination of the Chrome validation process and the search console. In order to use the Chrome validation process, visit any of your AMP pages in Chrome. Then at the end of the URL append #development=1. Now hit Control+Shift+I to open the Chrome developer tools.

Refresh the page, and either it will say, “AMP Validation Successful” or give you a detailed list of issues to be fixed.

You can see that installing a plugin is not enough alone. You have to validate every data by visiting the page and repeating the above steps in order to be benefiting from the Accelerated Mobile Pages.

Step Three: Validate Schema Markup

You’ve already learned that validating Schema Markup is very crucial for your AMP pages. I recommend Google’s Structured Data Testing Tool to test your pages for valid schema markup. However, I found some problems with WordPress over the display of logo. So, I made some modifications in order to overcome this issue.

Go to the Plugins, click on “Editor” and then select “AMP”. Change these lines in the editor to modify the plugin.

if ( $site_icon_url ) {
  $metadata['publisher']['logo'] = array(
    '@type' => 'ImageObject',
    'url' => $site_icon_url,
    'height' => self::SITE_ICON_SIZE,
    'width' => self::SITE_ICON_SIZE,
  );
}

to:

$metadata['publisher']['logo'] = array(
  '@type' => 'ImageObject',
  'url' => 'http://yourdomain.com/wp-content/uploads/logo-company.png',
  'height' => 60,
  'width' => 170,
);

Please make sure that in the URL, you specify the location where your logo is and specify the height and width accordingly.

Step Four: Integrate Google Analytics with the AMP WordPress Plugin.

Now, you are almost done. However, I prefer to use Google Analytics to track the stats. The AMP WordPress plugin did not proactively activate amp-analytics, however, it is quite easy to execute.

In order to enable the AMP WordPress plugin to work in collaboration with Google Analytics, go to the Plugins -> Editor -> select “AMP” and add the following code to the end of it.

add_action( 'amp_post_template_head', 'amp_post_template_add_analytics_js' );
function amp_post_template_add_analytics_js( $amp_template ) {
    $post_id = $amp_template->get( 'post_id' );
    ?>
    <script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>
    <?php
}

add_action( 'amp_post_template_footer', 'xyz_amp_add_analytics' );

function xyz_amp_add_analytics( $amp_template ) {
    $post_id = $amp_template->get( 'post_id' );
    ?>
    <amp-analytics type="googleanalytics" id="analytics1">
    <script type="application/json">
    {
      "vars": {
        "account": "UA-XXXXX-Y"  ←(YOUR GOOGLE ANALYTICS PROPERTY ID)
      },
      "triggers": {
        "trackPageview": {
          "on": "visible",
          "request": "pageview"
        }
      }
    }
    </script>
    </amp-analytics>
    <?php
}

Make sure that you change the value UA-XXXXX-Y to your own Google Analytics Property ID!

After making this change, re-validate your AMP pages, and then your AMP pages will be trackable.

A Verdict on Google’s AMP Project

Google wants the AMP project to be a good experience for the users. Still, the question is whether or not AMP can make everything super fast. The answer to this question is pretty open-ended. If you optimize your website poorly, then AMP will result in some significant boost-ups.

However, Accelerated Mobile Pages are not magic bullets. Techniques to improve website’s speed have been available from the start. AMP is just an attempt to combine and eliminate all the major slow-loading factors and offer a better solution for the users.

What do you think of the AMP Project? Please share your views in the comments section below!



Source link

?
WP Twitter Auto Publish Powered By : XYZScripts.com