Meta-tags are an essential part of promoting your content on the web, because they can help you boost your search engine rankings and affect the social media traffic on your site. There are Google’s authorship tags, and Facebook and Twitter have their own social media ones, which increase the amount of traffic you are getting. They are called Facebook OpenGraph and Twitter Cards.
OpenGraph Meta-tags. Introduced by Facebook
They were introduced by Facebook in 2010. Basically, what they do is to allow other websites to become rich “graph” objects and to function as other FB objects. In this way you can share them on FB. So, you control how information travels from a website to FB when you share a page(like it, etc.). The information is sent via OpenGraph meta tags in the <head> part of the website’s code.
How Meta-Tags look like?
You have a meta tag for almost anything:
1. Title:
og:title
This serves the purpose of the meta title tag in your code. It should be appealing, like a good post title. If you don’t provide one, Facebook will use your meta title instead. You should try to keep it between 60 and 90 characters. If your title is longer than 100 characters, Facebook will truncate it to only 88!
Example: <meta property=”og:title” content=”Write your title” />
2. Canonical Url:
og:url
Set the canonical URL for the page you want to share. In other words, you define one page that all your shares will go to. If there is more than one URL for the same content, this comes in handy. Note that the URL provided is not shown on Facebook newsfeed, only the domain is visible.
Example: <meta property=”og:url” content=”http://www.yourpost.com” />
3. Type:
og:type
You can describe the kind of object you are sharing: blog post, video, picture, etc. Examples: Web based:
- website
- article
- blog
Entertainment:
- book
- game
- movie
- food
You can see the full list of types here.
This meta tag is very important for the “Like” button of your page, especially if you have a real-life object: movie, book, etc., because it determines if your content will appear in a user’s interest section of their profile in the event they give you a “Like”.
Whenever you don’t define a type, Facebook will read it as “website” by default. Example: <meta property=”og:type” content=”website” />
4. Description:
og:description
This meta data descriptor is very similar to the meta description tag in HTML. Here you describe your content, but instead of it showing on a search engine results page, it shows below the link title on Facebook.
Unlike a regular meta description tag, it won’t affect your SEO. (So, don’t spend too much time figuring out how to sneak in keywords.) However, it’s a good idea to make it compelling because you want people to click on it. Use about 200 characters.
Example: <meta property=”og:description” content=”Insert your meta description here. Make it interesting and appealing.” />
5. Image:
og:image
Your content becomes more appealing when you join it with an image. This meta tag ensures that a specific thumbnail will be shown when your page is shared. It is helpful to influence click-behavior.
If you are not careful with the og:image, FB may show something irrelevant or an unwanted banner from the page, or nothing at all. The most frequently recommended resolution for an OG image is 1200 pixels x 627 pixels (1.91/1 ratio).
At this size, your thumbnail will be big and stand out from the crowd. Just don’t exceed the 5MB size limit.
Example: <meta property=”og:image” content=”http://www.yourdomain.com/image-name.jpg” />
So, this is what OpenGraph meta-tags look like and how you can add them to your site. Hope you’ve found this useful!
- How to Get The Most Out of Google Analytics - May 5, 2020
- 3 things to learn from the most successful startups - April 16, 2020
- How to control crawling with robots.txt - April 16, 2020
