Firstly, we need to understand Social Media Tags ( OG )
will not influence the Search Engine Ranking but it will indirectly effect on
increase the traffic. For website page we generally optimize with meta tags for
Google rankings and click-through rates, the same for Facebook and Twitter.
In Facebook or other social networking sites, if we want
to show proper image of the Article, Title of the Article and the Some
Description of the Article we should use these tags, it will drive traffic to
our websites. There are Facebook Open Graph and Twitter Cards
Here is the Facebook
Basic OG Tags,
<meta property=”og:title” content=”The title of your
article without any branding such as your site name.” />
<meta property=”og:type” content=”article” />
<meta property=”og:description” content=”A brief
description of the content, usually between 2 and 4 sentences. This will
displayed below the title of the post on Facebook. “ />
<meta property=”og:image” content=”The URL of the
image that appears when someone shares the content to Facebook.” />
<meta property=”og:url” content=”The canonical URL for
your page.” />
<meta property=”og:site_name” content=”The name of
your website”/>
<meta property=”fb:admins” content=”500013011 /> If
we want to get more data in Facebook Insights, then we have to use this tag. It
tells Facebook you are the site owner, and it connects your Facebook fan page
to your website.
<meta property="fb:app_id" content="your_app_id"
/>
Facebook
Video OG Meta Tags, these facebook video og meta tags will definitely
help you maximum optimization for your website videos on Facebook with the help
of few properties. Here is the facebook video og meta tags,
<meta property=”og:video” content=” The URL for the
video. If you want the video to play in-line in News Feed, you should use the
https:// URL if possible.”/>
<meta property=”og:video:url” content=” Equivalent to
og:video”/>
<meta property=”og:video:secure_url”content=” Secure
URL for the video. Include this even if you set the secure URL in og:video.”/>
<meta property=”og:video:type”content=” MIME type of
the video. Either application/x-shockwave-flash or video/mp4.”/>
<meta property=” og:video:width” content=” Width of
video in pixels. This property is required for videos.”/>
<meta property=” og:video:height” content Height of
video in pixels. This property is required for videos.”/>
<meta property=” og:image” Specify
an image for a high quality preview in News Feed”/>
Facebook
Image OG Meta Tags, use these set of image og tags properties
when more than one image on the page.
<meta property=” og:image” URL
for the image. To update an image after it's been published, use a new URL for
the new image. Images are cached based on the URL and won't be updated unless
the URL changes.”/>
<meta property=” og:image:url” Equivalent to og:image”/>
<meta property=” og:image:secure_url” https:// URL for
the image”/>
<meta property=” og:image:type” MIME type of the
image. One of image/jpeg, image/gif or image/png”/>
<meta property=” og:image:width” Width of image in
pixels. Specify height and width for your image to ensure that the image loads
properly the first time it's shared.”/>
<meta property=” og:image:height” Height of image in
pixels. Specify height and width for your image to ensure that the image loads
properly the first time it's shared.”/>
Facebook
URL Debugger: Once
you implement these Facebook OG tags, if you will not see the output you have
to troubleshot in order to get proper information like image, title,
description and etc. Here is the URL: https://developers.facebook.com/tools/debug/.
Paste the URL and click on debug and again click on Fetch New Scrape
Information then try to post in Facebook.
Twitter
OG Meta Tags
Here is the example of twitter og meta tags,
<meta name="twitter:card"
content="summary" /> (The card type, which will be one of
“summary”, “summary_large_image”, “photo”, “gallery”, “product”, “app”, or
“player”. )
<meta name="twitter:site" content="@nytimesbits"
/>
<meta name="twitter:creator"
content="@nickbilton" />
<meta property="og:url"
content="http://bits.blogs.nytimes.com/2011/12/08/a-twitter-for-my-sister/"
/>
<meta property="og:title" content="A
Twitter for My Sister" />
<meta property="og:description"
content="In the early days, Twitter grew so quickly that it was almost
impossible to add new features because engineers spent their time trying to
keep the rocket ship from stalling." />
<meta property="og:image"
content="http://graphics8.nytimes.com/images/2011/12/08/technology/bits-newtwitter/bits-newtwitter-tmagArticle.jpg"
/>
No comments:
Post a Comment