Update Website Information on Facebook

It’s no secret that Facebook has become a major traffic driver for all types of websites. Nowadays even large corporations steer consumers toward their Facebook pages instead of the corporate websites directly. And of course there are Facebook “Like” and “Recommend” widgets on every website. One problem I’ve always found with sharing URLs on Facebook is that you often have no control over the image and description text that accompany the URL. 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. Let’s take a look at the different META tags Facebook uses to allow you to customize how your website is shared. 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:

<meta property="og:{tagName}" content="{tagValue}"/>

Using this simple META tag strategy, you can tell Facebook what images, text, and more to use when sharing your webpage. Let’s review a few key META tags!

Review Of Facebook Open Graph Meta Tags

image

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

<meta property="og:image" content="http://themes.truethemes.net/Karma/wp-content/uploads/karma-wordpress-premium-theme-template1-190x111.jp"/>

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

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.

url

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

<meta property="og:url" content="http://truethemes.net"/>

Familiarize yourself with the canonical LINK type if you aren’t aware of its purpose — it could help your SEO out greatly!

site_name

Provides Facebook the name that you would like your website to be recognized by:

<meta property="og:site_name" content="TrueThemes WordPress Developers"/>

This is very useful as Facebook may have no way of knowing outside of this META tag.

type

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

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

Read the complete list of website types to best categorize your website.

description

Provides Facebook with a short description of you website:

<meta property="og:description" content="DESCRIPTION"/>

Facebook Open Graph Meta Tags

Full list of the Meta Tags are bellow. This should be added to the < head > section in the header.php file found via Appearance > Editor or in your server via FTP in the theme’s main directory. Remove any Tags if not needed.

 &amp;lt;meta property=&amp;quot;og:title&amp;quot; content=&amp;quot;TITLE&amp;quot;/&amp;gt; &amp;lt;meta property=&amp;quot;og:type&amp;quot; content=&amp;quot;CONTENT TYPE&amp;quot;/&amp;gt; &amp;lt;meta property=&amp;quot;og:image&amp;quot; content=&amp;quot;LINK TO IMAGE&amp;quot;/&amp;gt; &amp;lt;meta property=&amp;quot;og:url&amp;quot; content=&amp;quot;URL&amp;quot;/&amp;gt; &amp;lt;meta property=&amp;quot;og:description&amp;quot; content=&amp;quot;DESCRIPTION&amp;quot;/&amp;gt; &amp;lt;meta property=&amp;quot;og:site_name&amp;quot; content=&amp;quot;WEBSITE NAME&amp;quot;/&amp;gt; &amp;lt;meta property=&amp;quot;fb:admins&amp;quot; content=&amp;quot;FACEBOOK USER ID&amp;quot;/&amp;gt; &amp;lt;meta property=&amp;quot;fb:app_id&amp;quot; content=&amp;quot;FACEBOOK APP ID&amp;quot; /&amp;gt; 

Extras: fb:admins – Your Facebook user ID. fb:app_id – The App ID that you acquired when you created a Facebook App. To easily find your Facebook User ID, click here. Visit the Facebook Open Graph page to retrieve more details about each META tag and its intended information. Facebook also provides a Link Tool to help you validate what you’re sending! Use that Debugger Tool to update the Meta Tags information. The Open Graph protocol is a great way to not only share a page’s information but to also control how your site’s information is shared. Using these META tags could be the difference in attracting just a few visitors from Facebook or attracting loads of visitors because your shared links provide useful keywords and imagery! NOTE: The Meta tags are added to the header.php file (can be accessed via Appearance > Editor). The code is added before the closing head tag: