Open Graph Meta Tags Generator
Code
<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="">About Open Graph Meta Tags Generator
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.
Fill the required details in the tool 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.
Open Graph Meta Tags
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="Site URL">
<meta property="og:description" content="Description">
<meta property="og:type" content="article">
<meta property="og:image" content="Image URL">
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.
How to Use This Tool?
The toll will automatically generate the meta tags as you fill the details in the form.
- Title – title of your page
- Site name – name of your site, generally brand name
- Site URL – unique URL of your page
- Description – description to be shared on social feed, generally you can use the meta description
- Type – choose the type of your web page from the dropdown list. For example, if you want to share a music album then choose “Music Album” from the list.
- Number of images – choose the number of images to be used on the open graph protocol. Generally one large size image should be sufficient for Facebook. When multiple images are used Facebook will pickup the most suitable image and there is no way to control the behavior.
Select the code and copy to clipboard.
Adding Meta Tags on Webpage?
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>
Checking Meta Tags
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.
Checking the Social Feed on Facebook
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:
Note Twitter uses Twitter Cards meta tags for sharing content. Use of Open Graph meta tags will not have any impact on sharing content on Twitter.