How to use Open Graph

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 i…


This content originally appeared on DEV Community and was authored by Kritebh Lagan Bibhakar

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>

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.


This content originally appeared on DEV Community and was authored by Kritebh Lagan Bibhakar


Print Share Comment Cite Upload Translate Updates
APA

Kritebh Lagan Bibhakar | Sciencx (2021-06-13T05:51:56+00:00) How to use Open Graph. Retrieved from https://www.scien.cx/2021/06/13/how-to-use-open-graph/

MLA
" » How to use Open Graph." Kritebh Lagan Bibhakar | Sciencx - Sunday June 13, 2021, https://www.scien.cx/2021/06/13/how-to-use-open-graph/
HARVARD
Kritebh Lagan Bibhakar | Sciencx Sunday June 13, 2021 » How to use Open Graph., viewed ,<https://www.scien.cx/2021/06/13/how-to-use-open-graph/>
VANCOUVER
Kritebh Lagan Bibhakar | Sciencx - » How to use Open Graph. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2021/06/13/how-to-use-open-graph/
CHICAGO
" » How to use Open Graph." Kritebh Lagan Bibhakar | Sciencx - Accessed . https://www.scien.cx/2021/06/13/how-to-use-open-graph/
IEEE
" » How to use Open Graph." Kritebh Lagan Bibhakar | Sciencx [Online]. Available: https://www.scien.cx/2021/06/13/how-to-use-open-graph/. [Accessed: ]
rf:citation
» How to use Open Graph | Kritebh Lagan Bibhakar | Sciencx | https://www.scien.cx/2021/06/13/how-to-use-open-graph/ |

Please log in to upload a file.



There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.

Related Posts