opengraphprotocol-metatags-socialmedia-tylio-support

Open Graph Meta Tags for Social Media

Can you control the display of your content on social networks? Can you choose the image or modify the title? Yes, and here's how tyl.io generates it for you.

The Open Graph protocol in a few words

But first, what are Open Graph meta tags?

Originally created by Facebook, the Open Graph protocol is a set of tags allowing any web page to become a "rich" object on social media thanks to precise information such as:

  • the title
  • the type of content (article, photo, video)
  • the description
  • the image
  • the URL of the publication

Properly handled by social networks, this information will allow to properly display any link shared by users. In their absence, it is the social network that chooses how to display your content, without any guarantee of good compliance.

So, why should you use them? Because your website traffic is likely depending from social networks and it is therefore essential to master the display of your publications when shared on social networks. A missing image can make a real difference on your click rate, and thus on your traffic and your conversion rate ...

    The Essential Meta Tags for Social Media

    All meta tags are placed in the header of your site and are unique for each page.

    If there are many different Open Graph tags, only 3 tags are required to optimize the display of your content on social media:

    Og: title
    This is the title of your page for the Open Graph protocol. If you do not want it to be truncated, do not exceed 65 characters. The more attractive it is, the more likely it is that users will click on it ...

    Og: description
    This is a sneak peak on the content of your page. This description should contain between 150 and 200 characters, although, technically, Facebook can display up to 300 characters.

    Og: Image
    This is the URL of the image that will be displayed when sharing on social networks. A good resolution for a <og image> is 1200 pixels x 627 pixels for a 5MB size.

    >> To check out the number of words or characters, you can use this tool.

    Does Open Graph impact your SEO?

    Historically, the Open Graph protocol is intended for social networks and not for search engines. In practice, however, social networks have become so important that search engines have to take certain signals into account in their algorithms.

    How exactly, it remains difficult to say. But whether it's to increase the SEO of your site or attract the attention of your customers, Open Graph meta tags are no longer an option for sharing content on social networks ...

    How to manage your Open Graph tags?

    No need to fill in your metadata, tyl.io does it for you based on the content of your tyl ... How? Take a look at the picture below 👇👇 

    tylio-support-metatags-socialmedia-opengraph

    Practical tips for optimizing your Open Graph meta tags

    The title

    The title of your tyl will serve as <og title> tag.

    Recommendations

    • No more than 65 characters
       
    • Use your keywords in the title, preferably at the beginning.
       
    • Choose an attractive title that reflects the nature of your content.


    The description

    The first sentences of your tyl serve as <og description>.

    Recommendations

    • Between 150 and 200 characters (and no more than 300 characters)
       
    • If you do not want your text to be truncated, publish your tyl and check how the description will be displayed by copying and pasting your tyl's URL into the Facebook Debugger tool. You will be able to make all necessary modifications before sharing your tyl on the social networks.


    The visual

    The first image in your tyl will be used for the <og image> tag.

    Recommendations

    • The ideal resolution is 1200 pixels x 627 pixels, for a size of 5MB.
       
    • If your image does not match the recommended landscape format (vertical format for example), it may be truncated when sharing on social networks. To avoid this situation, you can either rework your image or resize it.
      >> Canva is a free and easy-to-use tool that will allow you to rework your image according to various social media formats, by adding a white background for example.
      >> With Landscape, also free, you can resize your image so that it fits to social media standards.
       
    • If you are placing text on your image, place it in the center of the image. By doing so, you will increase the chances that it will be properly displayed when sharing on social networks.
       
    • Your first image does not have to be placed at the beginning of your tyl to be used for the <og image> tag. It could be way down the tyl, after a long text, and still appear when sharing on social networks.
       
    • A video will not be usable as a <og image> tag. If your tyl starts with a video, it is the first image after this video that will serve as <og image> tag.
       
    • If you share a tyl without any image, it is a generic image of tyl.io that will be used in sharing previews.