Facebook Open Graph META Tags

Everyone know is Facebook are the major traffic driver for all websites, even large corporations steer consumers toward their Facebook pages instead of using his corporate websites directly.  Facebook has few ways to call visitors to actions:  “Fallow”, “Like” and “Recommend” widgets on every website.  One  of the most problem when sharing on facebook is no control over the image and description text that accompany the URL.
The Facebook Open Graph API,is the known solution to that problem.

What You Need to Know About Open Graph Meta Tags for Facebook

Most of websites have a lot of content, right now, content is very important SEO, but even best content is powerless without visitors. So, what’s the first thing that you have to do when you want to reach a huge audience with your awesome new post?

Sharing on social media, of course. The huge audiences of Facebook make them the best platforms for sharing.

Facebook created Open Graph for better integration between Facebook and other websites.

Simply, a degree of control is possible over how information travels from a third-party website to Facebook when a page is shared (or liked, etc.). In order to make this possible, information is sent via Open Graph meta tags in the <head> part of the website’s code.

The HTML <head> Element

The <head> element is a container for metadata (data about data). HTML metadata is data about the HTML document. Metadata is not displayed. Metadata typically define document title, styles, links, scripts, and other meta information.

Now, all other social media companies are taking advantage of social meta tags. All of the other major platforms, Twitter, LinkedIn, Google+, recognize Open Graph tags. Twitter has its own, but if his robots cannot find any, will uses Open Graph tags instead.

The Open Graph Meta Tag

Social media sites make most of the web’s traffic. The tags can affect conversions and click-through rates hugely.

For example, lots of time when you shared a link on Facebook you see only to find that the thumbnail was missing, or there was a totally different image than you expected? Correctly setting Open Graph tags can help you tackle these problems.

Unfortunately setting Open Graph tags to your website won’t directly affect your on-page SEO, but it will influence the performance of your links on social media, so that means it’s worth looking into.

Facebook’s Open Graph protocol allows for web developers to turn their websites into Facebook “graph” objects, allowing a certain level of customization over how information is carried over from a non-Facebook website to Facebook when a page is “recommended”, “liked”, or just generally shared.  The information is set via custom META tags on the source page.

All of Facebook’s Open Graph META tags are prefixed with og:, then continued with more specific the specific property to be set.  The data relative to the property set goes within the content attribute:

og:title - The title of your object as it should appear within the graph, e.g., "Cooking Tips".
og:type - The type of your object, e.g., "Blog". Depending on the type you specify, other properties may also be required.
og:image - An image URL which should represent your object within the graph.
og:url - The canonical URL of your object that will be used as its permanent ID in the graph, e.g., "https://rafalchelpa.com/portfolio/".

Using this simple META tag strategy, you can tell Facebook what images, text, and more to use when sharing your webpage.

The Image

The image META tag directs Facebook to use the specified image when the page is shared:

<meta property="og:image" content="https://rafalchelpa.com/wp-content/uploads//2013/11/FrontEndDeveloper-230x161.png"/>

It’s best to use a square image, as Facebook displays them in that matter. That image should be at least 600px wide in any of the usually supported image forms (JPG, PNG, etc.)

The Title

The title to accompany the URL:

<meta property="og:title" content="Facebook Open Graph META Tags"/>

In most cases, this should be the article or page title.

The url

The URL should be the canonical address for the given page:

<meta property="og:url" content="https://rafalchelpa/facebook-meta-tags"/>

The Canonical LINK

properly setup the canonical link it could help your SEO out greatly!

Google has introduced a link tag rel value of canonical which is used for defining the value of the page that Google should use.
Lets say you I have an eCommerce site and  my product URLs is:

http://yoursite.com/product.php?p=rafal+chelpa+blog+tshirt=black

In this case Google sees duplicate content! Code like this shows essentially the same page. With cannonical link you can tell Google which URL to use for the current page to avoid duplicate content penalization.

<link rel="canonical" href="http://yoursite.com/product.php?p=rafal+chelpa+blog+tshirt" />

 

The site_name

Always Provide Facebook name that you would like to be recognized:

<meta property="og:site_name" content="Rafal Chelpa Web Titbit"/>

This is very important as Facebook may have no idea of knowing you name outside of this META tag.

The type

Provides Facebook the type of website that you would like your website to be categorized by:

<meta property="og:type" content="blog"/>

Bellow are List of possible types:

https://developers.facebook.com/docs/reference/opengraph#object-type

The last touch

After setup all of this sometimes we need inform Facebook about new information placed on website, this can be do on this link:

https://developers.facebook.com/tools/debug/

Paste website link into field hit debug button, Facebook display all information about pasted website, if  this information are out of date or not correct just hit Fetch New Scrape information.

Leave a Reply

Your email address will not be published. Required fields are marked *