DEV Community

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

Posted on

8 1

How to use Open Graph

Open Graph Tag Comparison

Now tell me which one more likely to be clicked by a normal user.

One

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>
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.

Image of Timescale

🚀 pgai Vectorizer: SQLAlchemy and LiteLLM Make Vector Search Simple

We built pgai Vectorizer to simplify embedding management for AI applications—without needing a separate database or complex infrastructure. Since launch, developers have created over 3,000 vectorizers on Timescale Cloud, with many more self-hosted.

Read full post →

Top comments (0)

Postmark Image

Speedy emails, satisfied customers

Are delayed transactional emails costing you user satisfaction? Postmark delivers your emails almost instantly, keeping your customers happy and connected.

Sign up