When you share a link to your web page on Facebook or LinkedIn, the social network doesn't show an image and a right title and description for your post. How will you fix this?

Experience Level: Medior
Tags: HTMLOpen Graph Protocol

Answer

Facebook and many other social networks use Open Graph Protocol properties to read structured information that describe your web page.

In order to pass a title, a description or an image that describe your web page to a social network, you need to add Open Graph Protocol properties to your web page.

The Open Graph Protocol properties can be added to your web page by inserting special meta tags to the head tag of your web page.

The Open Graph Protocol properties inserted into your web page could look like this:

<head>
 <meta property="og:title" content="Better Coder - Home Page" />
 <meta property="og:type" content="article" />
 <meta property="og:image" content="https://www.bettercoder.io/images/logo.png" />
 <meta property="og:url" content="https://www.bettercoder.io" />
 <meta property="og:site_name" content="BetterCoder.io" />
</head> 

Comments

No Comments Yet.
Be the first to tell us what you think.
Open Graph Protocol
Open Graph Protocol

Are you learning Open Graph Protocol ? Try our test we designed to help you progress faster.

Test yourself