What is the abbr Tag?
An Abbr or Abbreviation tag defines an abbreviation or acronym, such as FTO or HTML. The <abbr>
tag can be used in several ways; for example:
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 with a tooltip using a
title
attribute. 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.
The <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”.
Nope
— Hey John, Your profile caught my eye. Ouch. (@JohnMu) April 19, 2021
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” and “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 discuss 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 <abbr>
Tags?
Yes, Google will index content contained in an <abbr>
element.
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 in 2016 on 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, then search for it on Google.
Is a made-up word
We’ll update this article with the results in a few days.
Accessibility Concerns
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).
Because <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 unnecessary 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 screen readers to spell out an abbreviation rather than try to pronounce it as an entire word, you can use the CSS property
speak:spell-out
.Where the abbreviation is part of the language, such as “Mr”, you may want to use the ‘aria-label’ to pronounce it phonetically correct, such as “Mister”.
A better way of dealing with abbreviations is to explain them 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 ….