Learn what is Open Graph protocol and generate tags with free Open Graph meta tags generator tool to share content beautifully on Facebook.
<meta property="og:title" content="">
<meta property="og:site_name" content="">
<meta property="og:url" content="">
<meta property="og:description" content="">
<meta property="og:type" content="">
Open Graph is a protocol that helps webpages to represent as a rich object in social graph. For example, Facebook uses Open Graph protocol to collect information from the webpage and display it on the social feed. Open Graph protocol basically uses the meta data provided in the page with HTML tags. Most of the content management systems like WordPress has dedicated plugins to add these meta tags and share the content elegantly on Facebook. But when you have independent site, say built with PHP or Bootstrap, you need to manually add at least the minimum required open graph meta tags. This will help to pickup the correct image, title and description on the social feed.
Use the above tool to fill the required details and generate open graph meta tags for your site. The meta tags will be generated automatically in the text box when you enter the details. Click on the "Copy" button to select all the code and copy by pressing "Ctrl + C" or "Cmd + C". You need to paste the meta tags inside the header tags of your webpage.
Below are some of the basic meta tags to be included on a page in order to use Open Graph protocol:
<meta property="og:title" content="Title"> <meta property="og:site_name" content="Site Name"> <meta property="og:url" content="Page URL"> <meta property="og:description" content="Meta Description"> <meta property="og:type" content="article">
There are many optional tags to add more information based on your need. You can refer the complete list of Open Graph meta tags here.
The tool will automatically generate the meta tags as you fill the details in the form.
Select the code and copy to clipboard.
Paste the above copied meta tags within the <head>…</head> tags of your webpage. There could be many other meta tags on your page, but ensure Open Graph meta tags are inserted before the end of </head> tag. Below is an example to indicate where to insert these tags:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <!-- Open Graph Meta Tags --> <meta property="og:title" content="Title"> <meta property="og:site_name" content="Site Name"> <meta property="og:url" content="Page URL"> <meta property="og:description" content="Meta Description"> <meta property="og:type" content="music.album"> <meta property="og:image" content="Image URL"> <!-- Style Sheets --> <link rel="stylesheet" href="style.css"> </head> <body style="font-size:18px;font-weight:bold"> <!-- You Content Here --> <!-- Scripts --> <script src="script.js"></script> </body> </html>
Once the meta tags are inserted, publish your page and open it on the browser. Right click and view the page source to find the meta tags. You can also use our open graph meta tags checker tool to find the tags are properly inserted on your webpage.
Finally share the page on Facebook and check the look. We use open graph meta tags on this site using Yoast SEO plugin for WordPress. The shared post on Facebook should look like below:
WebNots is a knowledge sharing platform for webmasters and tech geeks. We have published 3000+ free articles focusing on website building and technology. We share our experience through blog articles, demos, eBooks, videos and glossary terms for the benefit of webmasters and tech community.
All Rights Reserved © 2023 WebNots