Rabu, 10 Agustus 2011

How to Implement Google Instant Pages on your blog?


Add Google Instant Pages to your Website

Google Instant Pages, in simple English, is a way of telling Chrome about any one link on your page that visitors are most likely to click and Chrome, running on the visitor’s computer, could then try to prefetch that page in the background.

To give you an example, visitors to this blog’s archive pages are most likely to click the “Next Page” link that’s down at the bottom. I can pass this information to Google Chrome, using the Instant Pages syntax, and the “next page” will then load in a nanosecond if someone decides to click it.

Here’s a video recording to help you understand how Instant Pages increase the page loading speed – visitors can navigate pages as if they are stored on the local machine.


Adding support for Instant Pages to your website is extremely simple. Open your website template and, before the closing </head> tag, include the following code:

<link rel="prerender" href="http://example.com/page2.html">
The URL (example.com) should point to the next “logical” page. For instance,  if you have a photo gallery or a long article that spans multiple pages, the  URLs could point to different parts of the page. The prerender tag on Page 1  could point to Page 2 while the prerender tag on Page 2 could point to Page 3  and so on.

Google Instant Pages for WordPress

If you have a static website, it take some effort to enable Instant Pages on every single page but WordPress users can consider themselves lucky.
Open your header.php file, copy-paste the following code inside the closing <head> tag and you’re done. This is already live on Digital Inspiration (check the source code).

<?php if (is_archive()) { ?>

<-- Instant Pages for Google Chrome -->

<link rel="prerender" href=http://www.labnol.org/"<?php echo get_next_posts_page_link(); ?>">

<?php } ?>

0 komentar:

Posting Komentar

Blog Archive