Open Graph Meta Tags and sharing a link

Meta tags are hidden information on your web page. Hidden to the user as they are not directly shown to him, however, they are used by search engines and social media platforms. So, as you can deduct, it’s an interesting SEO tool.

They are defined in the HTML payload, inside the <head> part. There, the order does not matter and you can even have them mixed with css and javascript links. Or maybe they will be managed by your framework for you, that’s the case if you use Quasar framework for example.

<!DOCTYPE html>
<html lang=en-us dir=ltr >
  <head>
    <title>My Website</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="description" content="This is a super website about a topic I love and I want to share with you.">
    <meta name="keywords" content="keyword 1, keyword 2, keyword 3">
    <meta name=viewport content="user-scalable=no,initial-scale=1,maximum-scale=1,minimum-scale=1,width=device-width">
    <meta property="og:image" content="https://mywebsite/statics/image/logo.png">
    <link rel="stylesheet" href="/css/mycss.css">
    <link rel="prefetch" href="/js/myjavascript.js">
  </head>
  <body>
   <h1>My title</h1>
  </body>
</html>

The main two types of meta tags are:

  1. HTML Meta Tags, default ones, highly recommended as they will impact the display of your website in search engines (e.g. Google)
  2. Open Graph Meta Tags: additional ones defined by the Open Graph protocol. Determine how your website will be previewed in social media (e.g. Facebook, Twitter, …)
    They are prefixed by “ob:”

It’s pretty straight forward. We will go through the main tags only so should not take long for you to implement them.

HTML Meta Tags

An HTML meta tag needs two parameters: name and content. The name will the type of meta data it is, and content is the actual value of the meta data.

Example for the meta tag “description”.

<meta name="description" content="This is a super website about a topic I love and I want to share with you.">

Title

Title is not a meta tag but a tag itself: <title> </title>. It is the most important one as it contains the name of the page. It will be the main text displayed in search engine results. Also, it is used by the web browser for the tab title or default name when saving a page as a favorite.

As the default name could be the name of your website, it is really advised to customize the name per page. If the page is a blog article, then use the name of your article in the title.

As a default best practice, you can use the following schema: <First keyword> - <Second keyword> | <Website name>, with:

  • First keyword: is the name of the main content of the page (e.g. article title)
  • Second keyword: an optional additional keyword, in case you would end up with multiple pages with the same first keyword. (e.g. “page 1” or “details”)
  • Website name: good to end the title tag with the name of the website

Notes: Keep the title easily human readable. Also, consider limiting the length to 70 characters.

Description

Description or summary of your page. It should be human readable and describe what the user will find when clicking a link. If will be displayed in search engine results, under the title.

Moz.com recommends to keep it between 50 and 160 characters.

Charset

Defined the encoding of your page. It’s used by your web browser to display the text. It is really important as soon as you are using Latin letters with accents or any non-Latin character.

Viewport

Important if your website is used on multiple types of devices: Phones, tablets, and desktop. If you don’t know what to use, start with the standard one:

<meta name=viewport content="width=device-width, initial-scale=1">

Keywords

It used to be a thing, but not anymore. You can skip them, it won’t be harmful. Search engines will use the page content to extract the keywords. However, it’s a good practice to use them for yourself, to target some keywords to put in your page.

More tags

There are few other tags that can be used but without significant impact. I won’t go through the list. If you really want to know more about them, check moz.com page starting at the section “The indifferent meta tags”.

Open Graph Meta Tags

Mostly used by social media when sharing content, they give you the option to select precisely what to display when your page is previewed. Most of the social network will use the HTML meta tags if an Open Graph is missing, but you may want to tune them.

There is a small difference in the parameters: do not use the parameter “name” but “property” instead for the type for meta tag. Check this example:

<meta property="og:description" content="This is a super website about a topic I love and I want to share with you.">

Facebook is flexible as it seems to read the meta tag either you put the type in a parameter “name” or “property”. But LinkedIn and Twitter are stricter and won’t read the tag.

To get the full list and all the details, check the page Open Graph protocol.

og:title

An alternate title for the link. Can be useful to shorten the title or to remove the name of the website from it.

og:type

Even many values are available, you will mostly end up using only 2: website and article. Website is the default one and you can’t really be wrong with this one. If you have a blog, you can of course consider using the type article.

You can provide more details as explained in the Open Graph protocol page.

og:url

That’s the reference url. Should be without parameter or user specific details.

That’s the key to which will be associated the likes and shares from social media. For example, if you have a paginated list based on the parameter in the URL, instead of having a like counter per page of the list, use the og:url tag to gather the counters under one URL.

og:image

A link shared with a picture is more attractive. The tag og:image give you the option to select a specific image when sharing a page, even if the image itself is not used in the page to share. (e.g. a simplify schema)

You can also use your logo as a default image.

Twitter card

Twitter provides an additional tag to customize the way the image will be displayed, either small on the left or large on the top. The available values are:

  • summary
  • summary_large_image
  • app
  • player

Example to have a large image at the top of the link:

<meta name="twitter:card" content="summary_large_image">

Check twitter documentation for more details.

Tools to check your meta tags

Famous social media offers some tools to test your open graph tags and preview the way they will display your link. Very convenient, let’s go through the 3 main ones.

Facebook debug: my favorite as they provide a lot of feedback. In particular, the missing tags will be listed at the top and Facebook show you how their value are inferred.

Post inspector: good to check. In particular at the bottom, you can click on a meta tag to get details and see the alternate values.

Twitter card validator: very light and simple. Past your link and see how your tweet will be displayed. Convenient to check the image rendering.

Leave a Reply

Your email address will not be published. Required fields are marked *