Webstuff.Inblighty.Com

When your page is listed or “shared” on Google, FB or Twitter they display a “snippet” summary of your page.  You can use meta tags to influence what appears in these snippets.

FB and Twitter will use the text provided in your page’s OG/Twitter meta tags. Google may use text from the <title> tag and the Description meta tag.

If your tag text is too large for the snippet it will be shortened. The usual advice is to “limit your Title/Description to fewer than ‘xxx’ characters”; but other factors can also determine whether your text is truncated.

Truncation can even be browser dependent:

Fig1: FULL Title in IE9

Fig2: TRUNCATED TITLE in Chrome

Use the tabs at the top of this box for advice on how to optimize your site for search engines.

Crafting your text – general tips

Having a link with snippet on G, FB or Twitter isn’t much use if it doesn’t attract visitors to your site.  Optimize your tags so that the Title and Description tell readers that: this is THE page providing the information or service they want.

Fig 1: The No. 2 result for “what is a meta tag”

Fig 1 shows a “perfect” result snippet for the search term. Although the Title has been truncated it still clearly identifies the result as highly relevant. The description entices by not only telling us that the page provides the information we searched for, but ALSO that it has links for additional information.

Write the tags for your audience: what is useful as a search result may be different to what is enticing in a social media share.

Get the balance right:

Shorter: easier and more likely to be read, and result in a quick decision to view your page (the concise description in Fig 1 above is only 113 chars).

Longer:  gives you more opportunity to differentiate your page from the competition – your page is competing with others for visitors.

Truncation: provide text that either won’t be shortened or that will still entice and make sense when truncated.

As an aside; the full Title tag text for the page in Fig 1’s title tag was What is meta tag? – A Word Definition From the Webopedia Computer Dictionary (the truncated words may still have SEO benefits – see Google above).

What text will Google use from my page?

If you haven’t already done so you should read Google’s own guidance on Title and Description.

Whether your tags’s texts are used in full, in part, or ignored is dependent the ever changing Google “black box”. It chooses and displays content from your page that it considers is most relevant for the searcher’s query.

Your Title has a good chance of appearing in search results; but even if it “fits” within the snippet width it could still be truncated.

Fig 1

In Fig 1. the title has been truncated because Google has inserted the “Site Name”. You may wish to craft your titles to still read well when shortened like this.

Google will create its own description based on the search term and content of your page, if your Description is well crafted, and a good match with the search term it may be used.

Fig 2: Full Title and Description taken from meta tags.

Fig 2: The meta tag description is used in full; it comprises two “real” sentences and contains two of the 4 keywords used in the search.

This video by Mat Cutts (Google) gives an insight into the selection/creation of the text used in search results; it was recorded in 2009 but is still relevant.

In summary, your title has a better chance of being used if it is a relevant sentence including keywords for the entered search term.

Also note Matt’s throwaway comment “if you have a title that’s really long and has a bunch of different words in it, we may still use that in our scoring“ – so even if your title isn’t used in full it may still have SEO benefits. This doesn’t mean stuff the end your title with keywords; see Google guidlines.

One search query may result in your Title being displayed in full, whereas another search worded slightly differently may result in other data, or only part of your title being used. Examples of how Google “improves” the title:

1. Result of a search for: “Mad Max beyond the thunderdome“.

Fig 3: Title created by Google

The site’s title tag text was “Roger Ebert’s Worst Reviews: 4. Mad Max : Beyond the Thunderdome (1985)“. However Google has produced a better title for this search by starting it with the seach phrase.

After examining the site’s page it looks like Google created its title by either swaping the order of the 2 phrases in the site’s title tag; or by building a new title using the article title (from <h3 class=’post-title entry-title’> immediately after the page’s banner) together with the site’s title from the Alt tag of its Logo/homepage link.

2. Slight differences in queries can make a difference. In the example below, should I have used “spammers” instead of “spambots” in the title? Craft your title tag to include the most commonly used relevant keywords.

“How do spambots find my site” (Fig 4):  the site’s title is used

“How do spammers find my site” (Fig 5): Google’s title uses a combination of truncated  article heading (contained in the sites <h1 class=’post-title entry-title’> tag) and the Site’s Name.

Google often appends a site name to the title; it obtains this from text in your content e.g. from text in the relevant tag for your site logo/home page link.

Fig 5: Title taken from article heading + site name
(Article date also inserted into the description)

Google Title Size

The Title’s “maximum length” is determined by how much text will fit within the pixel width of the result snippet. One piece of text may fit whilst another with the same number of characters may be truncated.

At the time of writing Google use Arial, and in this font:
WWW Mad Max is “twice as wide” as
the big hit although both are 11 chars.

You can check your title’s pixel width with this Title Length Checker.

This is only part of the story, you also have to consider ….

Google boldens search words appearing in the Title. Fig 8: shows a result for the search “compare car insurance“; these words are boldened in the heading (and may be wider). Even though your Title might “fit” with normal characters it may not with boldened keywords.

Fig 6: Search for “Mad Max beyond the thunderdome”
these search words are bolded in the heading”

Fig 7: Same result as Fig 6. but
THE TITLE IS TRUNCATED IN CHROME

2. Google Title style is Arial font with size of “medium”. The style also tells the browser to truncate result headings and add an ellipsis (“…”) when it cannot fit the text within the snippet width. Font rendering differs by browser and additionally there is no agreed font-size for “medium”. So, one browser may display the full Google provided heading and another may truncate it (Figs 6 & 7 above). On Windows Vista, IE9 used less space for 12px Arial than Chrome & Firefox; Opera. In tests IE9 displayed headings in full, but Chrome occasionally truncated them.

Google will continue to make changes to its page layouts. Changes to snippet width, font type or size will all affect the amount of text that can be displayed.

So checking actual pixel width isn’t that useful. Instead this site’s tool allow you to compare your title’s width with a full width Google Heading from real search results (where “typical” keyword bolding has been applied).

For future proofing you can replace the sample title used for comparison with one you’ve copied from todays Google results; preferably when displayed by Chrome (or Safari?). You can also override the default font (should Google change the font they use).

In the longer term, with increasing smartphones useage, I suspect Google will make results more device dependent or move from pixel to percentage width.

An aside: I found that 65 characters (the outdated advice) was still, in most cases, fairly close to “maximum” pixel width.

The Title checking tool compares the pixel width of the Title you input with a full length sample from real search results; and is “future proof” (see the Tool’s settings).

Google Description: maximum length

Many SEO articles suggest that between 155 and 160 characters will be displayed (as in this example).

Fig 8: “Standard” result snippet – Description truncated at 159 Characters

However, Google often adds additional content to the snippet e.g. date & author; and some descriptions may be truncated at around 130 chars.

Fig 9: Date inserted & Description truncated at 131 Characters
(actual meta tag description was 145 chars).

This site’s online tools allow you to check both “standard” and “short” descriptions.

I don’t have a definitive answer on ideal description size. In my quick and unscientific tests:

• each line of the description has its own text contained within HTML spans (I’d assumed that the description was a contiguous piece of text which wrapped to new lines until all characters had been displayed);
• some snippets with author images allowed longer descriptions than others with author images
• search results for some subjects seem to provide more lines of description than others;
• Google insertion of “date space hyphen space” may(?) be counted towards truncation – but if so doesn’t appear to be as simple just deducting 14 characters from a fixed total character count.

In Summary (maximum length of Facebook Title and Description)

OG Title: Use 95 characters or fewer.

OG Description: Use up to to 300 characters, but I suggest (if possible) you treat the last 100 of these as additional info/bonus text that may not be displayed in every circumstance (see below).

For description, this site’s maximum length checking tool will highlight chars 1 to 200 of your description in green, and chars 201 to 300 in orange.

Facebook Open Graph (OG) Tags

Facebook uses the data provided in Open Graph (OG) tags to provide your snippet.  Facebook’s Sharing Checklist provides information on the OG Title, Description, and other tags needed for the share snippet. N.B. other sites also use information provided in OG tags.

Facebook may still generate a snippet if OG tags are absent, for example by using the title from the <TITLE> tag.

Unlike search engines there are no benefits in having long titles etc that will be truncated.

OG Title Length:

I couldn’t find any official FB guidance, but other sites advise you to “limit your OG title to fewer than 95 characters” – this worked well in my unscientific tests.

OG Description Length:

The Facebook Sharing Checklist’s only guidance is that Description is “usually between 2 and 4 sentences”.

Many blogs and SEO sites advise using a Description of either 297 or 300 characters; Search Engine Land’s analysis (Jan 2012) supports this.

However:

This Facebook App Developer page (I read it as applying to all web-pages) says the Description; should be “approximately 200 characters or fewer“; and

Paul Trajan (FB employee) points out that the maximum number of characters is dependent on where the snippet appears and on which type of Facebook page; and because FB may modify their page layout the length used will often change. His advice is “Just put the correct content in there and we’ll truncate it when rendering”.

In my own unscientific tests I found that 300 characters would be displayed.  I would aim to ensure your description to gets its message across in the first 200 chars; and, if you wish, use the next 100 characters (which have a high probability of display)  to provide additional teaser information. Remember a shorter description may be more effective anyway.

Twitter Card (page) Summaries use yet another set of meta tags; and Twitter’s Mark-up reference provides clear cut advice:

twitter:title “Title should be concise and will be truncated at 70 characters”

twitter:description: “Description text will be truncated at the word to 200 characters.”

In the absence of the Twitter Title/Description tag the equivalent OG tag is used.