What are OpenGraph meta tags?

OpenGraph meta tags are <meta> tags that you put into the <head> section of your website pages. Find out the specific information at: http://ogp.me/

These tags are used by services like Facebook and Yahoo mail to create link cards to your site. See the example below.

Screenshot of a link card

If someone enters a URL for a page on your website into a Facebook post or an email, Facebook or whatever other service that utilizes OpenGraph meta tags, will create a little "card" with a title, description, image, site-name and other possible info. 

Why would I use OpenGraph meta tags?

Using these tags gives you more control over how your site is presented. If you do not have the OG meta tags present on your site, these services will grab some random image and text and put that on the card. This image may not have anything to do with your site and the text may not be the best choice for that page or for your site.

Having these link cards can be a great way to boost awareness of a site. Someone sees a great article on your site and posts the link to Facebook or includes it in an email, then you have potential new visitor or many new visitors. You want to grab their attention with an image, title and description that really represents your site.

Test what your site looks like by creating a post in Facebook or entering a link into your email (IF your email service utilizes this protocol, not all email services do). Are you happy with what you see?

How do I implement OpenGraph meta tags?

In order for this protocol to be used, there are certain tags that must be included. There are additional tags that can be used for video, audio, locale, description, etc. The required tags are as follows:

<meta property="og:title" content="My Webpage Title" />
<meta property="og:type" content="website" />
<meta property="og:url" content="http://www.mysite.com/" />
<meta property="og:image" content="http://www.mysite.com/images/squarelogo.jpg" />

This basic set of tags can be repeated throughout your site, or they can be individualized for every page.

The optional tags are as follows:

<meta property="og:audio" content="http://www.mysite.com/media/mysong.mp3" />
<meta property="og:video" content="http://www.mysite.com/media/mymovie.swf" />
<meta property="og:description" content="This is a brief description of my webpage" />
<meta property="og:determiner" content="the" />
<meta property="og:locale" content="en_GB" />
<meta property="og:locale-alternate" content="fr_FR" />
<meta property="og:site_name" content="MySite Name" />

How do I add OpenGraph meta tags to my Joomla 3+ site?

You can add these tags right into <head> section of the index.php of your template directory. The problem with doing this is that every page on your site will have the same information.

You can go to http://extensions.joomla.org and look for extensions that will create unique OpenGraph tags for each page of your site. These may be free extensions, free extensions with limited features and a paid version with extra features, or paid extensions.

One thing to note with these extensions. They likely will put your regular Meta Description to put into your og:description. So if you are in the habit of leaving that blank, you may get some surprises if seeing what it pulls from the page or the category for the description in the link card.

Be sure that the extension that you choose is not on the Vulnerable Extensions List and be sure it works with your version of Joomla.

Note: If you are getting a message with the Facebook debugger about the og:title and missing string information, try turning of GZip Compression in your Global Configuration. For some reason Facebook does not read the OpenGraph tags correctly if Gzip Compression is set to "On".

Does Twitter use OpenGraph meta tags?

Twitter has it's own set of tags to put in the <head> section of your site's pages for creating link cards. The link cards are called "Twitter Cards".

Find out more about these at: https://dev.twitter.com/docs/cards