Got questions? We've got answers.
General
What are Open Graph meta tags?
Open Graph is a protocol introduced by Facebook in 2010 to allow deeper integration between Facebook and any web page. It allows any web page to have the same functionality as any other object on Facebook. You can control how your website is displayed on Facebook. Now, other social media sites such as Twitter and LinkedIn are recognizing Open Graph meta tags.
How to add meta tags in HTML?
Use a free tool such as OpenGraph.xyz to generate meta tags for your website, and copy the meta tags in the <head> element before the closing </html> tag.
Can I add meta tags in the body element?
Meta tags are only allowed in the head element. Adding meta tags in the body will result in invalid markup.
How can I create and add dynamic Open Graph images to my website?
If you're tired of manually updating Open Graph (OG) images for every new page or blog post on your website, you're about to discover a game-changer. Efficiently generate stylish Open Graph images by using our premium tool, where you'll be able to simply choose a template and instantly create consistent, engaging visuals for your social media.
What is the image size for Open Graph?
Use images that are at least 1080 pixels in width for best display on high-resolution devices. Facebook recommends using 1:1 images in your ad creatives for better performance with image link ads.
My website isn't showing up properly on social media. What should I do?
When sharing your website on social media, there's a chance that it will look different from the preview here. The main reason is that your website has been shared before, so any recent changes you made haven't been reflected yet.
Click any of the official Open Graph debugger tools below to re-scrape your website:
Facebook: https://developers.facebook.com/tools/debug/
Twitter: https://cards-dev.twitter.com/validator
LinkedIn: https://www.linkedin.com/post-inspector/
Pinterest: https://developers.pinterest.com/tools/url-debugger/
What is the Facebook debugger?
Facebook Debugger is an open graph debugger service that allows you to check what information Facebook gets from each page on your site.
Why is my open graph image not showing on Facebook?
When someone shares your website on Facebook, Facebook will crawl your website, pull the data, and cache it. If you make any changes to your website, use the Facebook Debugger tool to let Facebook scrape the latest information.
X (Twitter)
What is Twitter card meta data?
Twitter card meta data are open graph meta tags that allow Twitter to display a Twitter card when someone tweets links to your content.
How do I check Twitter card meta data?
You could use Twitter Card Validator to preview how the card is displayed on Twitter.
