What are the Open Graph meta tags used for? How ArticleSuggestion creates recommendations from the OG meta tags?

What are the OG meta tags?

If you use Open Graph Meta tags on your site, you’ll be able to control the appearance of your website’s content on social media sites. Even though the Open Graph protocol was developed by Facebook, many of its elements are also recognized by Twitter and LinkedIn. Without using the most important tags of this protocol your articles might appear with the wrong picture or a random description when someone posts their link on social media sites. If you’d like to avoid this, apply at least the following Open Graph tags when posting your articles:

og: title:

This tag defines the title of the content on a page. The text in this element will appear in bold in Facebook’s newsfeed. Even though the Open Graph protocol doesn’t specify exactly how long this element should be, if you’d like to make sure that the full title will appear on Facebook, don’t create longer og:tiltes than 60-90 characters. Also, don’t use your company’s or website’s name in this tag; the later will appear under the title and the description anyway. Of course, just as the titles on your site, your og: titles should be exciting, and should be able to catch the reader’s eye. But keep in mind that Facebook now uses a click bait filter and you might get into trouble if you go overboard and pick a misleading or exaggerated title. If you want to make sure that links from your site don’t get penalized, try to choose a title which describes the content of the article too (and YOU WON’T BELIEVE WHAT HAPPENS NEXT).

og: description:

You can provide a short introduction of a page’s content with this element. It should be about 200 characters long. If you create a description for a blog post or an article try to summarize its content and convince people to go to your website to continue to read it. As with the titles, you should avoid misleading your readers.

In the mobile application of Facebook only a small part of the description will appear or in the case of a longer title this element won’t appear at all.

og: image:

This tag allows you to add the URL of a picture that you’d like to see beside the link that points to your site in the news feed. Facebook quite often changes the dimensions of the pictures in its newsfeed. Currently, the social media site suggests uploading images that are at least 1200 x 630 pixels. The maximum file size of the pictures is 8 MB, but you should use smaller files on your site to avoid any slowdown.

og:url:

You can add the web address of a page to this element. If you post with URL shorteners or your page is available through multiple URLs, you should definitely apply this tag. Add the URLs to this tag without query parameters or session IDs. If this tag is used, Facebook will be able to connect likes and shares to a web page even if it's available through multiple URLs.

Integrating OG meta tags into your site

There are several other ways you can provide information about your posts when using the Open Graph protocol. For example, you can add information about the language of an article or the content type it belongs to. This page lists all of the Open Graph tags that you could use. Even though Twitter recognizes these elements, the social media site has its own tagging system too. You need to place the Open Graph meta tags into the section of your site’s source code. Here you can find a detailed description about integrating them into your site. There are several plugins available that can help you to add OG tags to your website. For example, if your site runs on Wordpress you could use the Yoast Seo plugin and Facebook’s own plugin as well. If there are no OG tags on a page, Facebook will use the meta title and description and select a random picture if someone posts a link to the page.

How ArticleSuggestion uses OG meta tags?

If you upload your posts to our system with an RSS feed ArticleSuggestion automatically creates recommendations from your og:title, og:description and og:picture tags. The description and the image tags are optional, but we won’t be able to recommend posts without an og:title. After logging into our app you can change any part of the recommendations created this way except for the images. You will need to use selectors if you’d like to overwrite the URLs in your og: image tags.