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> Related Open Graph Protocol job interview questions
What is Facebook Sharing Debugger and why would you use it?
HTMLOpen Graph Protocol MediorWhy is og:audio meta tag useful and how do you use it?
HTMLOpen Graph Protocol MediorWhy is a meta tag property og:video useful and how do you use it?
HTMLOpen Graph Protocol MediorWhy is og:site_name meta tag useful and how do you use it?
HTMLOpen Graph Protocol MediorWhy is og:description meta tag useful and how do you use it?
HTMLOpen Graph Protocol Medior
