If you are not investing in your business how do you expect it to grow?
Facebook Open Graph Protocol Basics

Facebook Open Graph Protocol Basics

 Tuesday, April 1, 2014 |  Views:2,159 |  Posted by: John Marx |  Reading Time: 3 Minutes, 31 Seconds |  Article Tags: 

What

In a continued effort to help our business customers succeed in search engine optimization (SEO) and social media we continue to help you learn about how to make your website better. As part of a recent client website update and part of our customized SEO monthly plan we took their existing business BLOG and implemented Facebook's Open Graph protocol. This protocol allows you to have control over how images and descriptive text can appear on Facebook. Using this protocol you can control a certain level of customization over how information is carried over to Facebook from non-Facebook websites.

As part of using the Open Graph protocol you also help define the functionality of any Like buttons when you include them on your page. To include a Like button on your page Facebook makes it easy by filling out a few simple answers on a form they provide. You can view this form at https://developers.facebook.com/docs/plugins/like-button. Along with the Like button you also can add a Share button, Send button, etc.

Open Graph Structure

The Open Graph META tags are all prefixed withog: and followed by a definedtagName. Using the format defined below you can inform Facebook what images, text, and more to display when sharing a specific webpage.

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

Common Facebook Open Graph META Tags

Image

The image META tag lets Facebook know what the primary image is that should be shown when linking to a specific page. The image that is recommended by Facebook is that the image should be square, a minimum of 600px wide, and in the standard Facebook supported formats (jpg, png, etc.).

<meta property="og:image" content="http://domainName/Images/MyImage.png" />

Title

The title to accompany the URL for the page. For a BLOG this is typically the title to the BLOG.

<meta property="og:title" content="Page Title"/>

Url

The URL should be the canonical address for the given page that is being referenced.

<meta property="og:url" content="http://domainName/PageName"/>

Site Name

Provides Facebook the name that you would like your website to be recognized as when being linked.

<meta property="og:site_name" content="My Company Name Blog"/>

Type

Defines the type of page that you would like your website to be categorized by. A list of common types for types can be found from Facebook at https://developers.facebook.com/docs/reference/opengraph/.

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

More Complex Facebook Open Graph META Tags

Arrays

It is possible to have multiple values defined for a given page. You define this by having multiple versions of the META tag.

<meta property="og:image" content="http://domainName/Images/Image1.jpg" />
<meta property="og:image" content="http://domainName/Images/Image2.jpg" />
<meta property="og:image" content="http://domainName/Images/Image3.jpg" />

Structured Properties

Not only can you include arrays for multiple items for a given property but defined structure for the item that is defined. You do this by putting the additional parameters after the root element which is then parsed.

In the example below you see three defined types of images. The first image (Image1.jpg) is followed by a defined width and height of 600. The second image (Image2.jpg) has no additional structured properties. The third (Image3.jpg) has a defined structured property height of 1000 with no width defined.

<meta property="og:image" content="http://domainName/Images/Image1.jpg" />
<meta property="og:image:width" content="600" />
<meta property="og:image:height" content="600" />
<meta property="og:image" content="http://domainName/Images/Image2.jpg" />
<meta property="og:image" content="http://domainName/Images/Image3.jpg" />
<meta property="og:image:height" content="1000" />

Blog Tags

<a href='mailto:john@jm2marketing.com'>John Marx</a>

CEO / Code Ninja
 Send an email

John Marx

John has been an entrepreneur and pusher of all things “normal”. He was brought up where a handshake is as good as any word and even more important than any legal speak. John believes in giving back and giving people more than they expect. This is the foundation and basis of JM2 Webdesigners & Marketing. The prices will shock you, the amount you get will shock you even more, and the skills his entire team brings will completely amaze. He has built a team of experts that are talented, young, and efficient. Each one has the characteristics of the company in wanting to see a small business grow and each one goes above, and beyond which makes John beyond proud of them.

So why is John considered the “Code Ninja”. It’s isn’t because people fear ninja’s (they should). They will fight until their last breath defending, achieving the mission, and helping (in this case small businesses). John believes in very surgical strikes to help a business grow using agile methods that change rapidly, in ways people don’t expect, and with a relentless passion to achieve greatness.

Blog article comments

No blog comments have been submitted yet. Be the first to leave a comment!

 

 

Comment on blog article

Your Name:
Email Address:
  • Show/Hide Border
  • Table Properties
  • Delete Table
  • Row
    • Insert Row Above
    • Insert Row Below
    • Delete Row
  • Column
    • Insert Column to the Left
    • Insert Column to the Right
    • Delete Column
  • Cell
    • Merge Cells Horizontally
    • Merge Cells Vertically
    • Split Cell Horizontally
    • Split Cell Vertically
    • Delete Cell
  • Cell Properties
  • Table Properties
  • Properties...
  • Image Map Editor
  • Properties...
  • OpenLink
  • Remove Link
  • Insert Select
  • Cut
  • Copy
  • Paste
  • Paste from Word
  • Paste Plain Text
  • Paste As Html
  • Paste Html
  •