Logo
You are here: Documentation for thePHPfactory Joomla Extensions ยป Open Graph Plugin
 

Open Graph Plugin


Open graph is a protocol which is used to integrate any web page into the social graph. For example Facebook can be your social graph or social circle. Once the web page is integrated it behaves like the object of the social graph, meaning that it has the same functionality as a Facebook page.

Website traffic nowadays is, in great part, due to social shares. It is thus necessary to master this tag, since it can really make the difference on your click-through rate.
The classic example is that you share a link on Facebook and the thumbnail is missing or the wrong image is appearing. That is pretty annoying, right? Open Graph is here to offer a better user experience and optimize your shares, not letting the browser "guess" the title, image, etc.


In order to turn your web pages into graph objects, you need to add basic metadata to your page. This is where the Open Graph Plugin comes in handy.

At the moment, Jobs Factory is our only extension that can enable or disable the Open Graph Plugin. For a more on-point example, go to the Jobs Factory Open Graph plugin Documentation.


Our plugin will insert metadata tags named "og" into the pages.

As an example, the following is the Open Graph protocol markup for a web page:

<meta property="og:url" content="http://www.thephpfactory.com"/>
<meta property="og:site_name" content="The PHP factory"/> 
<meta property="og:title" content="Premium Joomla Extensions"/> 
<meta property="og:description" content="Since 2006, ThePHPFactory offers users great Joomla extensions and 24/7 Support."/> 
<meta property="og:type" content="article"/> 
<meta property="og:article:published_time" content="2017-03-10 10:10:44"/>


The following properties are optional, but it is strongly recommended that you incorporate them too: 

<meta property="og:audio" content="http://www.music.com/lara.mp3"/>
<meta property="og:determiner" content=""/>
<meta property="og:locale" content="en_GB"/>
<meta property="og:locale:alternate" content="en_RO"/>
<meta property="og:video" content="https://www.youtube.com/watch?v=W-kjZtbDvqc"/>


Additional open graph tags can be added or removed afterwards from this file: \components\com_[compname]\controller.php .

Some properties can have extra metadata attached to them. These are specified in the same way as other metadata with property and content, but the property will have extra parameters.


The og:image property has some optional structured properties:


  • og:image:url - Identical to og:image.
  • og:image:secure_url - An alternate url to use if the webpage requires HTTPS.
  • og:image:type - A MIME type for this image.
  • og:image:width - The number of pixels wide.
  • og:image:height - The number of pixels high.


The og:video tag has the identical tags as og:image.


The og:audio tag only has the first 3 properties available (since size doesn't make sense for sound):

  • og:audio
  • og:audio:secure_url
  • og:audio:type

We also recommend you to visit this webpage in order to find out more information regarding the Open Graph Protocol.