How To Add Google Instant Pages To Your WordPress Site

As of this writing, browser statistics show that a significant share of web traffic comes from Google Chrome as it has risen to be the second most popular web browser- just barley behind Firefox. With that kind of growth and popularity, you’ll want to ensure your website is configured with Chrome specific features. The focus of this article will be on Google Instant Pages which minimizes site loading time by telling the Chrome browser about a link in your web page that is most likely to be visited from the current page. That prerendering of content in the search engine displays the page in a split second making it a great addition to every website. Adding it to your WordPress site is easy and quick so let’s get started.

Instant Pages builds upon the functionality of Google Instant shaving between 2 to 5 seconds off a search query by using an algorithm of about 200 factors combined with the Google search history to determine which link a user is most likely to click on. It begins contacting the server to load that page in the background as soon as the search results appear. Check out this quick video to give you a better idea just how much faster Instant Pages are!

Google has made this technology works for developers as well as searchers. By following the Guide To Prerendering In Chrome, publishers are able to choose which pages on their site they want to prerender when users are already on the page. However, it is important that you limit the number of prerendered pages because it could result in increased bandwidth usage, slow loading of other links and stale content.

Although the process of implementing Instant Pages is easy, it’s VERY important to make sure you know where to properly place the code. Take it from me, if you aren’t familiar with PHP code placement, you may want to read about the most common mistakes beginners make when trying to copy and paste snippets into their site. If you put it in the wrong place, you WILL break your site. Always do a backup of your site before making any changes and if you’ve made modifications to your theme, it’s best to make changes and test using a child theme.

You will need to add a few lines of code to your theme’s PHP settings. Go to your File Manager and open the header.php file under your theme by clicking the Edit button.

Instant-pages-file-manager

The page of code that is set by default will open displaying the current PHP code settings. Here’s where you’ll add the Instant Pages code to make it compatible with your site and where you need to be most careful! Before the closing </head> tag, include the following code:

<?php if(is_archive()) { ?>
<!-- Instant Pages codes for Google Chrome --> 
<link rel="prerender" href="<?php echo get_next_posts_page_link(); ?>" />
<?php } ?>

It should look like this when placed in the code file:

instant-pages-add-code

Save your changes and test them out on your site. Here you can see the Bombax theme will start to suggest article topics as you start entering letters into the search box. This doesn’t just give a suggested article; it’s also queued to open very quickly if selected.

Instant-pages-preview

In conclusion, adding Google Instant Pages as a background tool to your site will keep visitors engaged on your site. With suggested articles and fast page loading, your site will become more user friendly and encourage many return visitors, producing a low bounce rate. Test it out and see for yourself if your bounce rate improves and come back to let us know!