Do you use meta-tags?
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 sbippet tags, and Facebook and Twitter have their own social media ones, which increase the amount of traffic you are getting. They are called Facebook Open Graph and Twitter Cards.
Open Graph Meta-tags. Introduced by Facebook
The meta-tags 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 Open Graph meta tags in the <head> part of the website’s code.
Upgrade Your WordPress
Become Super Competitive Now!
Overtake your competitors with today's free Upgrade!
How Meta-Tags look like?
You have a meta tag for almost anything:
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!
<meta property=”og:title” content=”Write your title” />
2. Canonical 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 URL provided is not shown on Facebook newsfeed, only the domain is visible.
<meta property=”og:url” content=”http://www.yourpost.com” />
You can describe the kind of object you are sharing: blog post, video, picture, etc. Examples:
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.
<meta property=”og:type” content=”website” />
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.
<meta property=”og:description” content=”Insert your meta description here. Make it interesting and appealing.” />
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 for influencing 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.
<meta property=”og:image” content=”http://www.yourdomain.com/image-name.jpg” />
If you want to stand out from the crowd of tweets, you can use Twitter cards. They function in the same way as FB’s Open Graph tags. Apart from the 140-character tweet, they allow you to add some additional content. This adds a “View Summary” button below your tweet and people can click on it.
And when you click it:
There’s a Twitter Card for almost anything:
This tag has the same function as the og:type. There are, however, only 7 options to choose from: summary, photo, video, product, app, gallery, and “large version” summary.
<meta name=”twitter:card” content=”summary” />
It functions like og:title. Try not to repeat the same text you have in your tweet in this tag. Use up to 70 characters.
<meta name=”twitter:title” content=”Your title here” />
It functions in the same way as og:description. Don’t focus on keywords, because again they won’t matter for SEO. Limit it to 200 characters.
<meta name=”twitter:description” content=”Your 200-character description here” />
It functions like og:url.
<meta name=”twitter:url” content=”http://www.yourdomain.com” />
Add a picture to your tweet. You can choose a card with a smaller or a larger picture. If you go for the “large” option, make sure it has a resolution of at least 280x150px and that the file size is no more than 1MB. You can also add some text to the image to increase its value.
<meta name=”twitter:image” content=”http://www.yourdomain.com /image-name.jpg” />
How to fix duplicate meta tags
Duplicate metas can appear, if you are using multiple SEO plugins. When this happens certain crawlers like Facebook Open Graph Object Debugger will raise an error and will not proceed with your request until you fix it. There are a number of ways in which you can fix this error, so I’ll show you some of them:
- Squirrly SEO WordPress Plugin. If you have WordPress this is a great way of finding out if you have duplicate meta tags as they are signaled to you. You can go to Settings and Click on the “Fix it” button. Problem solved!
- Joomla. It’s a content management system(CMS). It’s also the most popular Web site software available. It’s also an open source solution, freely available to everyone.
- Typo3. It’s an open source enterprise CMS, and a scalable web application framework.
- Other resources you could use are Magento, PrestaShop, Zen Cart, and CMS Made Simple.
Now you know what meta tags are and how you can tackle duplicate metas. Hope your content will always stand out!