Literally, metadata is data that says something about other data. You can use particular metadata to send information about a webpage to a search engine or a social media channel, and thereby improve your SEO. In the first two posts of this metadata series, we discussed meta tags in
<head>of your site and
link rel metadata. In this last episode, we’ll scrutinize on metadata that can improve the sharing experience on social media. And last, but definitely not least, we’ll describe why metadata like
hreflang declarations are a necessity if your business serves multiple languages and/or countries.
Posts in this series
We have written about Open Graph and Twitter Cards before. These tags, or this information, is definitely metadata. It will help you tell social networks like Facebook and Twitter what the page at hand is about in an orderly, summarized way. It will allow you to control the way your articles or pages are shared.
OpenGraph is a standard used by a number of social networks like Facebook and Pinterest. If you’re using our Yoast SEO plugin, these tags are added to your page automatically, and of course, you can control the contents of these OpenGraph tags (in the social section in our meta box below on edit pages).
The same goes for Twitter Cards. They add metadata to your pages that are convenient for Twitter to read and understand. Our plugin adds Twitter Card metadata as well. If there is no Twitter Card data, Twitter will fallback to OpenGraph data, but you obviously want to make things as simple as possible for that Twitter.
If you’d like a preview of how your page, shared on either Twitter or Facebook would look like, please check our Yoast SEO premium plugin, as that one adds these social previews right in your WordPress backend.
But wait, there is more important metadata!
If you thought that all the things previously mentioned are all the SEO related metadata for your website, think again.
hreflang tags to indicate other languages
For those of you that have multilingual sites, this one is really, really important. If you have a site or page that is served in more than one language, be sure to add
hreflang tags to your page.
hreflang tags, you can indicate the language variations of the page at hand. That looks like this:
<link rel="alternate" href="http://example.com/" hreflang="en" /> <link rel="alternate" href="http://example.com/en-gb/" hreflang="en-gb" /> <link rel="alternate" href="http://example.com/de/" hreflang="de" />
As you can see, these can be used for variations of the ‘same’ language as well, like the British English in the second line. Note that
hreflang isn’t a substitute for the
rel=canonical we discussed. Be safe, implement both. More information on how to implement
hreflang can be found here.
If you think about it, any extra attribute you assign to an image, like the alt or title tag, is metadata. Google uses it to scan the page and see what’s on there, so be sure to add these alt and title tags and optimize ’em.
Microdata for breadcrumbs
For a better understanding of your site’s structure, you should add some kind of microdata to your breadcrumbs. That can be done by adding schema.org data for breadcrumbs, for instance by JSON-LD. RDFa is another option to add this type of metadata to your website. Again, install Yoast SEO for WordPress and this is taken care of.
Language declaration for the page at hand
Let’s wrap this long list of metadata up with another language related metadata element. At the very top of your HTML, we find the, indeed,
html tag. This one wraps all the code of your
<body> and can contain the language of the page at hand. That is done like this:
Makes sense, right. Some might say that adding a
meta tag for
Content-Language is also an option, but following the W3C guidelines, that
meta tag should not be used anymore. Use the
lang declaration in the
html tag instead.
That concludes this series with a lengthy list of metadata you can use to tweak your SEO. I am confident you can come up with even more metadata, as there is plenty. Feel free to leave your additions in the comments!