Optimizing metadata for social media is often an overlooked thing in many websites. However, if social media exposure is even slightly important for you, it is something to pay attention to. This requires you to implement specific formatting in your HTML.
Some terms that you may have heard of are Open Graph Protocol, Twitter cards, Rich Pins, etcetera. Formatting content like this ensures that sharing your website's URL's on social media results in a presence as you would wish it to be, instead of something messy. Luckily, achieving correct optimization is not even that hard, using some useful Joomla extensions.
The problem: Incorrect display of your website in social media
Most probably you have encountered this issue before yourself at some stage: you want to post a link of a website you like on Facebook. When you paste the link, Facebook will then grab some text and images of the page, but sometimes these are not the relevant items. The image could even be a banner from an advertiser in the sidebar, instead of the big main image that would be the most logical image to include. As an example, look at this hotel website (it is actually a foundation that supports education in Nicaragua) www.hotelconcorazon.com. If I share the link, I would like to show one of the main images at the top as the image in Facebook too. However, instead Facebook just takes the small image lower on the page in the preview:
And the same issue can also occur on other social media, like Twitter, Google+, Pinterest, etcetera. To fight this unwanted behaviour, several solutions have been developed by these social media companies.
Open Graph Protocol, Twitter Cards and more
Facebook has taken the initiative to develop a solution for this already quite some time ago with the Open Graph Protocol. Quite soon this became the standard, and also many other networks, including Twitter, Google+, Pinterest, Instagram, etcetera, now accept Open Graph tags as input for their sharing options. Basically the protocol requires you to add some additional code to the head-section of your website, describing the items that should be shared, like the title, text, type (image, video, sound), actual image, etcetera. The complete guide for implementation can be found on www.ogp.me. A valid example could be this code from my page about Performance:
<meta property="og:locale" content="en_GB" />
<meta property="og:title" content="Joomla SEO | Performance & Speed for Joomla" />
<meta property="og:description" content="Optimizing your Joomla website for speed and performance is not complicated. With a few tricks ......" />
<meta property="og:type" content="article" />
<meta property="og:url" content="http://joomlaseo.com/performance/" />
If done well, the title is pulled from the Joomla article title, description from the metadescription, image from the main-image for the article, etcetera.
Even though Twitter accepts Open Graph, they also developed their own specific solution called Twitter Cards. Pinterest has Rich Pins and Google+ also accepts schema.org metatags. You can always check the syntax of your markup using online checking tools:
- Open Graph: www.developers.facebook.com/tools/debug
- Twitter Cards: www.cards-dev.twitter.com/validator
- Schema.org validator: www.developers.google.com/structured-data/testing-tool
Implementation of social media metatags
Luckily you can acually implement your social metatags quite easily using a number of extensions, no need to code anything yourself. Also, if you are using a SEF extension, it may already support it without you even knowing it. Some good choices are:
- SH404SEF: Built-in support
- Joomlakave Open Graph Protocol for Joomla: Recommended by Frits Jongbloets, see also his (dutch) Slideshare presentations for more on this subject.
- Hans Kuijpers has also developed a nice plugin for adding social metatags, called Social Meta Tags, available for free on Github.
- And there are plenty more on the Joomla Extensions Directory
After installing and configuring one of these plugins, you should no longer have issues with the way your URL's are shared on social media.