Open Graph Tags (OG Tags)
Facebook launched some important techniques which known as Facebook authentication protocols. Everyone also knows about these protocols as OG Tags which had been composed in 2010.
“The open graph protocol allows developers to leverage Facebook in new and exciting ways. One of the easiest ways to venture into the world of Open Graph is to add the open graph meta tags to your site. Open graph meta tags allow you to control what content shows up when a page is shared on Facebook.”
There are various kind of OG tags which are as follows:-
1- og:title – This is where you put the title of your content. Length of the title is fewer then 95 characters which count with space as well.
Syntax- <meta property=”og:title” content=”11 creative ways to build links” />
2- og:type – This is where you describe the type of content which you are sharing. Either it is video, blog or post.
Types include-
- Activity – activities, sports, play etc.
- Business – bars, company, cafe, hotel, restaurant etc.
- Group – band, government, non_profit, school, university etc.
- People – city, country, landmark, state_province etc.
- Product and Entertainment – album, book, drink, food, game, product, movies, TV_shows etc.
- Websites – blog, website, article etc.
Syntax- <meta property=”og:type” content=”article” />
3- og:description – In this section, we describe briefly the content. length should be up to 297 characters with space.
Syntax- <meta property=”og:description” content=”describe your content here.” />
4- og:image – By using og:image tag, you will ensure that an image will be alongside the content you are sharing. It helps you to stand out against all of the other text based status update people see in their timeline.
An image has to be at least 50px by 50px but they prefer images that are bigger than 200px by 200px. The image can not be more than 5MB in size.
Syntax- <meta property=”og:image” content=”image_URL” />
5- og:url – In this tag, you should place the URL of the page which you want to share. This tag may be seen irrelevant but it is important because sometimes you will have more than one URL for the same content. By using this tag, you will ensure that all shares go to one URL verses multiple URLs which should help yours.
Syntax – <meta property=”og:url” content=”page_URL” />
6- og:site_name – This tag tells FB(Facebook) about the name of your website. You don’t really need of this tag but there is no harm to include it.
Syntax – <meta property=”og:site_name” content=”SEO treasure” />
7- og:admins – If you have a fan page on FB and you want to get data in FB insight then you have to use this tag by which it will connect your FB fan page to your website.
Syntax – <meta property=”fb:admins” content=”500013011″ />
Twitter Card Meta Tags
“With Twitter Cards, you can attach rich photos, videos, and media experience to Tweets that drive traffic to your website. Simply add a few lines of HTML to your webpage, and users who Tweet links to your content will have a “Card” added to the Tweet that’s visible to all of their followers.”
We use these tags because it will help you to stand out from the crowd.
1- twitter:card – The type of card to be created: summary, photo, or video. It describes the type of content which you are sharing. You have three options with twitter. Like- Photo(for image), Player(for video), Summary(for everything else). If you don’t define your card, Twitter will default to a summary.
Syntax- <meta name=”twitter:card” content=”summary” />
2- twitter:url – The URL that should be used for the card. This will likely be the same URL as the page’s canonical link.
Syntax – <meta name=”twitter:url” content=”page_URL” />
3- twitter:title – The title as it should display in the Twitter Card. Length of this tag should be up to 70 characters with space.
Syntax – <meta name=”twitter:title” content=”11 creative ways to build links” />
4- twitter:description – A 200 character summary of the content at the given URL. Length of this tag should be up to 200 char with space.
Syntax- <meta name=”twitter:description” content=”describe your content here” />
5- twitter:image – To make your tweet stand out, you need an image. A representative image URL for the content. In many cases, simply providing your logo’s URL will be just fine. Your image have to be less than 1MB in file size and they can’t be smaller than 60px by 60px & larger than 120px by 120px.
Syntax – <meta name=”twitter:image” content=”image_URL” />
6- twitter:site – The Twitter username used by the given site including the ‘@’.
Syntax – <meta name=”twitter:site” content=”@seotreasures”>
7- twitter:creator – The Twitter username of the individual author of the content.
Syntax – <meta name=”twitter:creator” content=”@seotreasures”>
Note- I use the same handle for the site and author, though I could use my @seotreasures account for the creator if I wanted.
- Image and Video META Tags –
Media-specific cards require a bit more information about the media itself, so for image and video cards, these additional tags are useful:-
1- twitter:image:width – The width of the image.
Syntax – <meta name=”twitter:image:width” content=”600″>
2 – twitter:image:height – The height of the image.
Syntax – <meta name=”twitter:image:height” content=”600″>
3 – twitter:player – URL to the IFRAME’d a player, must be HTTPS.
Syntax-<meta name=”twitter:player” content=”https://seotreasures.name/video-embed/12345″>
4- twitter:player:width – The width of the player IFRAME.
Syntax – <meta name=”twitter:player:width” content=”435″>
5- twitter:player:height – The height of the player IFRAME.
Syntax – <meta name=”twitter:player:height” content=”251″>
6- twitter:player:stream – The URL to stream as video.
Syntax – <meta name=”twitter:player:stream” content=”https://seotreasures.name/raw-stream/12345.mp4″>
7 – twitter:player:stream:content_type – The content type of the stream.
Syntax – <meta name=”twitter:player:stream:content_type” content=”video/mp4; codecs=”avc1.42E01E1, mpa.40.2″”>
Recent Comments