Social media sharing

1 - Findings & Impacts

The Open Graph protocol is a set of tags that allows a webmaster to give the main social networks (Facebook, Google +, Twitter, etc) precise information about pages. These tags will allow social networks to display a link with all the right information/images when shared.

If these tags remain blank:

The social network might not complete the title and description with the right data
You might end up with a product page that has no picture on Facebook and looks less attractive

2 - Recommendations

Set up the Open Graph protocol

Add the namespace "http://ogp.me/ns#" to the <html> tag
Within the <head> tags, you must add meta tags with the 'property' and 'content' attributes
The technical specifications define 4 tags of the Open Graph as "Required": og: title, og: type, og: url, og: image
Other tags are also useful, especially if your page has rich content (video)

Here is a specific example of inserting Open Graph data:

<html xmlns: og = "http://ogp.me/ns#"><Head><title> Article on the Open Graph </ title><meta property = "og: title" content = "Open Graph Article" /><meta property = "og: type" content = "article" /><meta property = "og: url" content = "http://www.example.com/open-graph/" /><meta property = "og: image" content = "http://www.example.com/images/small.jpg" /><meta property = "og: description" content = "This is the description of the page." />...</ Head>...</ Html>

List of the main tags that can be used:

Meta og: title (required): title of your page for Open Graph (eg Facebook...).
Meta og: type (required): type of your page (website, article, video, music ...). This field describes the main type of object contained in your page.
Meta og: image (required): URL of the image that represents your page in the Open Graph
Meta og: url (required): landing page URL
Meta og: description (optional): A short description of your page no more than 300 characters.
Meta og: video (optional): URL of the video
Meta og: locale (optional): language of your page (en_US, fr_FR ...).
Meta og: site_name (optional): name of your website.
And even more tags on: http://ogp.me/

Example of a URL of your website shared on Whatsapp VS a URL coming from the Apple website.

Report abuse