Google Links Directly to Content Sections Inside Search Result Snippets

Google announced that they have added a new feature to search results. The brief summary in a result may contain links to specific sections of content on the page. This helps get a user directly to the most relevant content faster. For example, if I search for “jquery tabs”, one of my results looks like this:

Screenshot of Google Results with Content Links

Clicking “How To…” would take me directly to this portion of the page (http://docs.jquery.com/UI/Tabs#How_to…) instead of the top of the page (http://docs.jquery.com/UI/Tabs). I think that I will enjoy this feature quite a bit, and since most users do not scroll, this should get some dusty content a little bit of fresh attention.

How I imagine It Works

I imagine that google installed an application on all of the computers in their daycare centers. The app rewards the toddlers with ice cream and candy for clicking all the “big words” on a page. All the while they track the clicks using a super-secret internal version of analytics, using the data to serve content to us with a better experience. Next time you see a first grader, let them know you appreciate it.

How it Actually Works

According to the offical google webmaster’s blog, google is simply scanning the page for anchor tags in section headings. Sometimes things really are as simple as they seem. The good news is, it should be pretty easy to clean up your site and increase your chances of getting these links in your search results. In fact, you may already be there… or at least close.

How to Increase the Chance Your Google Search Results Snippets Will Include Content Links

Break up the content of your page into sections, giving each section a heading tag (h2 or h3, etc). Inside the sub-header tags, add an anchor.

<h2><a name="how-i-imagine-it-works" />How I imagine It Works</h2>
<h2><a name="how-it-actually-works" />How It Actually Works</h2>

You should also link to these anchors somewhere on the page, in a table of contents fashion.

As with anything google, nothing is a guarantee. Fortunately, this is something we should all probably be doing anyway. It makes it much more convenient to link to specific content when you want to share something. For example, the smashing magazine article I linked to above (“most users do not scroll”) has no anchor tags, and if you click it, you’ll have to scroll down and find the section that I was referencing.

A PHP Function to Automatically Generate Anchors Within Your Subheads

/**
 * generate a subhead with an anchor tag
 *
 *  Usage:
 *    echo subhead("How it Actually Works");
 *  Prints:
 *    <h2 id="how-it-actually-works">How it Actually Works</h2>
 *
 * @param string $name
 * @return string
 */
function subhead($name) {
	$anchor_name = strtolower(str_replace(' ', '-', $name));
	return "<h2 id=\"$anchor_name\">$name</h2>";
}

Tags: ,

Leave a comment