DEV Community

Cover image for How to use Open Graph
Kritebh Lagan Bibhakar
Kritebh Lagan Bibhakar

Posted on

How to use Open Graph

Open Graph Tag Comparison

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">
    <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="">
    <meta property="og:image" content="">
    <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>
Enter fullscreen mode Exit fullscreen mode

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)