Sharing is caring

WordPress AMP: Direct the links on Accelerated Mobile Pages to its AMP version

WordPress AMP: Direct All the links on Accelerated Mobile Pages to its AMP version

So you have enabled Accelerated Mobile Pages on your WordPress blog with the AMP plugin by Automatic and everything works fine, but wondering how to convert all the links in the posts to AMP version of the linked content instead of the default non-amp links? Well there is a way, you can do this with a little tweaking on your functions.php file of your child theme (main theme unless you have functions.php file).

I have already written extensive guide on customizing WordPress Accelerated Mobile Pages. You can read those articles from the links here if you haven’t yet customized and new to this AMP thing.

WordPress + AMP: Set up & customize Accelerated Mobile Pages, add Google Analytics and AdSense Code to it

WordPress + AMP: How to Add Related Posts to Accelerated Mobile Pages without Plugin

The plugin doesn’t convert the links in your posts to AMP compatible, but rather direct your readers coming to your AMP page from search engines to your usual non-amp version of the link in the content. This gives your readers inconsistent experience, like first post they landed offers faster loading and neat web page while the links in the content take them to completely different site with relatively slower loading time. This is why bloggers need to keep a constant AMP experience for its readers as long as they engage on content after content. And with faster loading time of AMP html, the users are most likely to engage more on your contents than they would do otherwise.

Some may ask why adapt AMP html for your entire blog. Well that is completely up to you and the fact is it doesn’t actually turn your entire site into AMP html, but it is always good practice to give your readers what they would expect from your page. Coming to an AMP page for faster load time and then links within the posts take them to completely different site is not a good impression. And you don’t need to worry about your usual non-amp version of the site as long as the content is yours and Google is just caching them from your site for a better and faster mobile experience and in this way it also reduces the burden on your server.

So to start with the editing functions.php file of your theme, go to your WordPress backend -> Appearance -> Editor and navigate to your theme’s (child theme) functions.php file and load it. It is always recommended to backup your functions.php file before you make any changes to it because you don’t want to mess up things and get your entire site down.

So copy this piece of code and paste it in your functions.php file.

add_filter('the_content', 'replace_href_with_amp_url', 2);
function replace_href_with_amp_url($content ){

if (is_amp_endpoint() ){

     $doc = new DOMDocument();
     $doc->loadHTML( '<meta http-equiv="content-type" content="text/html; charset=utf-8">'.$content );

     $links = $doc->getElementsByTagName('a');

     foreach (  $links as $item  ) {

          if( $item->hasAttribute('href') ){

               if( strpos($item->getAttribute('href') , "/tag/" ) == false && strpos($item->getAttribute('href') , "/wp-content/uploads/" ) === false && strpos($item->getAttribute('href') , "YOURSITE.com" ) !== false){

               //get attribute vlue
               $Url = $item->getAttribute('href').'amp/';

               //removing current href value
               $item->removeAttribute('href');

               //Setting new href value;
               $item->setAttribute('href',  $Url);

             }
         }
      }

  $content = $doc->saveHTML();
}

return $content;
}
 

This code will replace all the non-amp links within your AMP content with AMP version except for /tag/ pages and your media files that may have been linked or attached in the content. If you are using a different  tag base, you may replace “/tag/” with the name you use, for example “/topic/” in this statement

if( strpos($item->getAttribute('href') , "/tag/" ) == false

And that is the case with “/wp-content/uploads/” as well.

Yup! Now on your readers will get consistent and faster mobile expedience throughout your amp contents. You can do even more on your AMP content with some more customization and for that read these articles.

WordPress + AMP: How to insert Adsense Ad in the middle of post content without plugin

WordPress + AMP: Add Social Sharing Buttons to Accelerated Mobile Pages without plugin

If you have any questions or wanna leave a comment, feel free to drop it in the comment section below.

We hope this article really helped you and would love to have some love back by sharing the article on your social sites, forum accounts or linking back and following us on Facebook and Twitter.

Sharing is caring

You may also like...

  • Jamshi Jack

    The AMP plugin should have included this feature in it.. anyway thanks for this .. you are doing great on your AMP articles, very useful.