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