Now tell me which one more likely to be clicked by a normal user.
First Link, but WHY ??
Because at first glance I got what's in that link and it is more appealing than the second one.
Open graph was originally developed by Facebook and now it is used by Twitter, Pinterest and LinkedIn.
The benefit of Open Graph is simple, it converts any webpage into a social rich object which becomes more attractive on Social Media upon sharing.
Open Graph Meta Tag
Implementing Open Graph is very simple, You just need to write some meta tag in the head section of an HTML document.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta property="og:title" content="Open Graph Uses">
<meta property="og:type" content="article">
<meta property="og:url" content="http://example.com">
<meta property="og:image" content="https://ogp.me/logo.png">
<meta property="og:image:type" content="image/png">
<meta property="og:image:width" content="300">
<meta property="og:image:height" content="300">
<meta property="og:image:alt" content="The Open Graph logo">
<meta property="og:description" content="The Open Graph protocol enables any web page to become a rich object in a social graph.">
<title>Open Graph</title>
</head>
You can see the meta property with "og" is the Open Graph Tag.
There are different types of Open Graph Meta Tag which you can use as per your requirement.
Some of the most commonly used meta tags are -
- og:title
- og:image
- og:url
- og:type
- og:description
- og:locale
Whole List of Tags - Open Graph Tags
Validate the Tags
So, if you have any suggestions or feedback let me know in the comment.
Thanks for reading.
Top comments (0)