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.
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.
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:
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:
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.
Joomlaseo.com is fully built and written by Simon Kloostra, SEO Specialist and Webdesigner from the Netherlands. I have also published the Joomla 3 SEO & Performance SEO book. Next to that I also sometimes blog for companies like OStraining, TemplateMonster, SEMrush and others. On the monthly Joomla Community Magazine I have also published a few articles.