Logo

Differences

This shows you the differences between two versions of the page.

Link to this comparison view

opengraphplugin [2017/03/16 10:51] (current)
sorin created
Line 1: Line 1:
 +====== 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 [[http://wiki.thephpfactory.com/doku.php?id=joomla30:opengraph|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:\\
 +\\
 +<code>
 +<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"/> 
 +</code>
 +\\
 +The following properties are optional, but it is strongly recommended that you incorporate them too:
 +\\
 +<code>
 +<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"/>
 +</code>
 +\\
 +
 +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 [[http://ogp.me/|this webpage]] in order to find out more information regarding the Open Graph Protocol.\\
 +\\
 +
 +
 +