Snippet preview

The snippet preview
What it means and how to use it

The snippet preview: what it means and how to use it

Last update: 20 July, 2017

To get more clicks from the search results, you want to optimize what your site will look like when shown in the search results. A single result in a set of search results is called a snippet. The Yoast SEO plugin has a snippet preview, a simulation of what your post will look like in those results. This post explains how to use that snippet preview to get more clicks! It also describes why the snippet might not always match what you see in the search results.

Since the release of Yoast SEO 4.1 we added a mobile snippet to our snippet preview. With the button below the snippet you can now switch between the desktop version and the mobile version, to make sure both look fine. Note that the screenshots in this post are made using the latest version of Yoast SEO. So if you think “this is different from what I’m seeing”: update.

An example of our snippet preview in action, on this post:

snippet preview example 1

Optimize your site for search & social media and keep it optimized with Yoast SEO Premium »

Yoast SEO: the #1 WordPress SEO plugin Info

What determines the look of a snippet in the search results?

The above snippet preview lacks a few things. For instance, it lacks bolding of a keyword. If you search for a specific word, Google will bold that keyword in the text and URL of the snippets it shows. But it actually goes one step further. Once it has determined which pages will rank for your search, it tries to find a bit of the page that has that word in it. If your meta description (if you have one) doesn’t contain the keyword that was searched for, it’ll grab a “random” snippet of the page that contains that keyword.

This is one of the reasons why it helps tremendously if you know what the most searched for keyword for a page is going to be, so you can optimize the snippet for it. Let’s slightly change the look of the above snippet preview: if you set the focus keyword of your post, that word will be automatically bolded:

snippet preview example 2

As you can see, the plugin “adapts” by bolding the focus keyword in the URL and description, just like Google would. Google used to also bold the keyword in the title, but it no longer does that.

The title

The title is the first thing people see in the search results for your posts and pages, and in many, many cases the only thing. So it’d better be good. Funnily enough, Google actually changes your title for you, if it thinks you’re not doing a good enough job. There are many reasons why it might do that, most of them explained in this post.

The title in the snippet preview is determined based on the title template you’ve set in your SEO → Titles & Metas settings, using variables from your current post. In our case, that template is simply the default:

%%title%% %%page%% %%sep%% %%sitename%%

As you can see the plugin takes the post title, and appends the separator (in our case’s that a middle dot) plus the site’s name. The %%page%% parameter is only used when you have a paginated post. You could have the category in there if you want, but that usually gives you less space to properly play with the title. Removing the site’s name is not a good idea. Google will usually rewrite your titles if they don’t contain branding, see the above post for details.

Of course, Yoast SEO allows you to have a title that’s different from your article’s main heading and in some cases, that’s a good idea. If you’ve done a bit of keyword research to determine the focus keyword for your page, you might have seen there are several variations of that keyword. For instance, for our keyword “snippet preview”, Google suggest shows the following:

snippet preview google search

A Google search for “snippet preview” shows the following suggestions.

Now, our current title would definitely match for [snippet preview yoast], but it might not match for [snippet preview wordpress]. And we’re actually explaining the snippet preview in our Yoast SEO plugin for WordPress, so it might be helpful to put that in the post title. Also, running the words snippet preview through übersuggest actually suggests there are some how-to type queries for the keyword as well. Using Yoast SEO Premium’s multiple focus keyword feature, I’ve optimized this post for all those keywords.

So let’s, combine all that knowledge and change our title tag to “Snippet preview how-to for Yoast SEO for WordPress • Yoast”. At first, I wanted to make the title “A how-to for the snippet preview in Yoast SEO for WordPress • Yoast”. That’s too long for the search results though and would thus look like this:

As you can see, the title is cut off using an ellipsis. This behavior was changed in the May 12th 2014 release based on the excellent work done by Dr Pete Meyers in this post on Moz. If the title is too long, you’d see the bar below the title become red.

Now, we have a nicely optimized title that’ll match the keywords were looking for. Let’s see what it looks like:

snippet preview yoast seo example

The meta description

Now that our title is up to snuff, let’s work on the second biggest “item” in the snippet: the meta description. Often referred to as the “snippet” too, though that might be slightly confusing in this context. We’re going to try to get control of this snippet as often as possible, meaning that we should have a snippet that matches many of the keywords that’ll match this post.

We know that we want people to be able to search for [snippet preview] and preferably also [snippet preview how-to] and [snippet preview yoast]. So, let’s write our meta description. While writing your meta description, the snippet preview updates live, so you can test what works and fits, length wise. I ended up with this:

Optimize the search result snippet people will see for your post using the Yoast SEO snippet preview feature: this post explains how.

Before showing another screenshot, let’s go the next section of the preview.

Want rich snippets for your site? Try our Structured data training »

Structured data training Info

The URL or “slug”

The slug is the part of the URL that identifies your article. So in our example above it was “the-snippet-preview-means” etc. Slugs in WordPress are normally the article title, lowercased, with spaces replaced by hyphens. Yoast SEO has an option to remove stop words from your slug, which has cleaned up our slug considerably already. But since we’ve opted to change the title of our post, we’ve edited the slug as well, simply to “snippet-preview”.

The “Yoast” keyword will already be matched by the domain (not in the screenshots as I was making these in my local development environment).

Having edited both the meta description and the slug now, our final preview looks like this:

snippet preview example result

The date

This is a post, and posts carry date info in Google search. Some SEOs, including us, have tried hiding those in the past. To be honest, that’s a sacrifice to usability we’re not willing to make anymore. For pages and other post types there won’t be a date in the snippet preview, as usually those won’t display dates.

If you want to change that behavior for a particular post type, go to SEO → Titles & Metas and check the box below the post type:

titles metas settings post type

Use snippet preview to optimize your posts

I hope this post has made it clear for you how you can use the snippet preview to increase click throughs from the search results. This functionality is available in our Yoast SEO plugin and of course in Yoast SEO Premium as well.

If you’re unsure about whether you’re using Yoast SEO the right way, our Yoast SEO for WordPress training might be something for you! Be sure to check it out.

Read more: ‘How to create the right meta description’ »



Check out our must read articles about Analytics