By Jonathan Griffin. Editor, SEO Consultant, & Developer.
An Abbr or Abbreviations tagis used to define an abbreviation or acronym, such as FTO or HTML. The
<abbr> tag can be used in a number of ways; for example, it can be used to:
Mark up an abbreviation semantically. This can be useful to style abbreviations with CSS:
The <abbr style="font-weight:bold">UK</abbr> is made up of England, Scotland, and Wales.The UK is made up of England, Scotland, and Wales.
Specify an abbreviation along with the tooltip by using a
titleattribute. This is useful when you want to provide further information without interrupting the flow of the document.
The <abbr title="United Kingdom">UK</abbr> is made up of England, Scotland, and Wales.The UK is made up of England, Scotland, and Wales.
<abbr> tag can also be used with define tag (
<dfn>)to mark the abbreviation as a definition:
The <dfn><abbr title="United Kingdom">UK</abbr></dfn> is made up of England, Scotland, and Wales.
Now that you have had a quick crash course on using the
<abbr> element let’s examine whether it is an SEO ranking factor.
Will using the ABBR Tag improve your Google rankings?
This question was addressed by Google’s John Mueller back in April 2021. When asked whether using the
<abbr> tag would help someone rank higher, John Mueller said, “Nope”.
Just because there is no ranking benefit from using the
<abbr> tag does not mean you should not use abbreviations.
For example, searching for “FTO” may bring up searches related to “Mitsubishi FTO”, “Free Trade Organizations”, but not necessarily “Fair Trade Organizations”.
Google will relate the abbreviation to other text in your content, so if you were writing about “FTO Coffee,” Google would understand what you want.
There are also several accessibility concerns that we have discussed later that might influence your usage of the
<abbr> tag. For example, when using abbreviations that are not part of everyday language, you should state the non-abbreviated version. For example:
The FTO, or Fair Trade Organization, has stated the importance of paying countries fairly for their products.
You will now rank (hopefully) for both versions by using the abbreviation.
Does Google see content in
Yes, Google will index content contained in an
However, you probably wanted to know whether Google will see content in the
title attribute, such as whether it sees the words “United Kingdom” in the following example:
The <abbr title="United Kingdom">UK</abbr> is made up of England, Scotland, and Wales.
A test by Dawn Anderson back in 2016 as to whether Google can see the
title attribute on an
<image> element confirmed that they do see it.
To confirm, let’s run a new test with the
<abbr> element. Hover over the definition below to see the word, and then search for it on Google.
Is a made up word
We’ll update this article with the results in a few days.
According to the HTML specification, the
title attributes’ usage is not encouraged:
Relying on the title attribute is currently discouraged as many user agents do not expose the attribute in an accessible manner as required by this specification (e.g. requiring a pointing device such as a mouse to cause a tooltip to appear, which excludes keyboard-only users and touch-only users, such as anyone with a modern phone or tablet).
<abbr> is not a focusable element, you cannot tab through it to see the meaning of the abbreviation.
If you wish for the whole phrase to be spoken, you should use the
aria-label. For example:
The <abbr aria-label="United Kingdom">UK</abbr> is made up of England, Scotland, and Wales.
When an abbreviation or acronym is widely known, such as “UK” or “FBI”, it is not necessary to have screen readers say the entire phrase. For example:
Joe Bloggs, while visiting the USA from the UK, was questioned by the FBI.
It is much easier to understand than:
Joe Bloggs, while visiting the United States of America from the United Kingdom, was questioned by the Federal Bureau of Investigation.
Some other points are worth noting:
If you wish for screen readers to spell out an abbreviation, rather than try to pronounce it as an entire word, you can use the CSS property
Where the abbreviation is part of the language, such as “Mr”, you may want to use the ‘aria-label’ to have it pronounced properly, such as “Mister”.
A better way of dealing with abbreviations is to give the explanation in full words as part of the text. This is commonly done for the first occurrence of the acronym in the content. For example:
The WTO, or World Trade Organization, has launched a dispute with Europe over state subsidies. The WTO said that ….