Contents
Optimizing metadata for social media is often an overlooked thing on 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 URLs 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 on social media
Most probably you have encountered this issue before yourself at some stage: you want to post a link to 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's 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 behavior, 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, the description from the meta description, the 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 actually 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. A good choice could be 4SEO with built-in support. It generates your open graph data automatically, including the image. But 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 URLs are shared on social media.
