Open Graph Generator

Recommended 1200×630 px, under 5 MB.
Also include

Facebook preview

Open Graph tags

		

	
















FREE TOOL · NO SIGN-UP





This Open Graph generator creates the meta tags that control how your page looks when someone shares it on Facebook, LinkedIn, WhatsApp, Slack and other platforms. Fill in og:title, og:description, og:url, og:site_name and an og:image URL, pick the og:type and og:locale, and the tool builds clean HTML with a live Facebook-style preview card. Twitter/X card tags can be added with one checkbox. Copy or download the code and paste it into your page’s head section.













What the Open Graph Protocol Does





The Open Graph protocol is a set of meta tags, first introduced by Facebook, that turns a web page into a rich object when it is shared. Instead of a bare link, people see a link preview with an image, a headline, a short description and the site’s domain.





Without Open Graph tags, each social media platform guesses. It might grab the first image on the page (sometimes a logo or an ad), use a navigation label as the title, or show no description at all. That makes shared links look broken and get fewer clicks.





Open Graph tags fix this by telling platforms exactly what to show. They are read by Facebook, LinkedIn, Pinterest, WhatsApp, Slack, Discord, iMessage and many others. X reads them as a fallback when its own Twitter card tags are missing.





The tags use the property attribute, for example <meta property="og:title" content="...">, and belong in the head section of your HTML. They don’t change what visitors see on the page itself. They only shape the share card that appears elsewhere.













Core OG Tags and What Each Controls





Four tags are the minimum for a reliable share card: og:title, og:type, og:image and og:url. Adding og:description and og:site_name gives a fuller preview. This generator also supports og:image:alt, og:locale and fb:app_id.





Every value should be specific to the page being shared. Reusing the homepage tags across a whole site is one of the most common reasons share cards look wrong.





og:title and og:description





og:title is the headline on the share card. It can match your SEO title tag, but it doesn’t have to. Social feeds reward clear, human headlines, so drop the brand suffix and keyword phrasing if they make it clunky. Keep it short enough to show in full, around 60 characters is a safe target.





og:description is the line or two under the headline. Use one or two sentences that explain why someone should click. Some platforms cut it short or hide it on mobile, so put the main point first. The preview card in this tool shows both fields as you type.





og:image size and format





The image is the biggest part of most share cards and has the most effect on clicks. The recommended size is 1200 × 630 pixels, a 1.91:1 ratio that displays well on Facebook and LinkedIn. Keep the file under 5 MB and use JPG or PNG.





The og:image value must be an absolute URL, starting with https://, that anyone can access without logging in. When you add an image, this generator also writes og:image:width as 1200 and og:image:height as 630. If your image uses different dimensions, change those two values to match it.





Add alt text in the “Image alt text” field to describe the image for screen readers. Keep important text away from the edges, since some platforms crop to a square.





og:url, og:type and og:site_name





og:url is the canonical URL of the page. Platforms use it to group shares and likes, so it should match your canonical tag and not include tracking parameters.





og:type describes the content type. Use website for homepages and general pages, and article for blog posts and news. The generator also offers product, profile, video.other and book.





og:site_name is your brand or website name. It appears on some cards and helps with brand consistency across shares.













How to Create Tags With the Open Graph Generator





    

  1. Enter og:title. Write the headline you want on the share card.
    2. 




  2. Write og:description. One or two sentences summarizing the page.
    3. 




  3. Add og:url and og:site_name. Use the page’s canonical URL and your brand name.
    4. 




  4. Paste the og:image URL. Use a full image URL, ideally 1200 × 630 pixels. The preview loads the image so you can see how it looks on the card.
    5. 




  5. Add image alt text. Describe what the image shows.
    6. 




  6. Choose og:type and og:locale. Pick the content type and the language-region code, such as en_US, en_GB or ur_PK.
    7. 




  7. Add fb:app_id (optional). Only needed if you use Facebook Insights or a Facebook app.
    8. 




  8. Keep Twitter/X card tags ticked if you want matching tags for X. The tool picks summary_large_image when you add an image and summary when you don’t.
    9. 




  9. Copy or download the tags as open-graph-tags.html, then paste them into your page’s head section.
    10. 






Empty fields are left out of the code automatically. Everything runs 100% in your browser, and nothing you enter is uploaded.













Testing a Link Preview on Facebook and LinkedIn





Once the tags are live, test the page on the platforms that matter to you.





    

  • Facebook Sharing Debugger (developers.facebook.com/tools/debug): paste your URL to see the tags Facebook reads, any warnings, and the resulting card. Click “Scrape Again” to refresh the cache after you change tags.
    • 




  • LinkedIn Post Inspector (linkedin.com/post-inspector): enter the URL to see LinkedIn’s preview and force it to fetch the latest version.
    • 






Both platforms cache share data, sometimes for days. If you fix a tag and the old preview still appears, a cache refresh through these tools is usually the answer.





For WhatsApp, Slack and Discord, the quickest test is to paste the link into a private chat. These apps also cache previews, so changes can take a while to appear. Check that the image loads over HTTPS and isn’t blocked by robots.txt or a login wall.













How Open Graph Relates to Twitter Cards





X (formerly Twitter) uses its own set of tags, called Twitter cards, with names like twitter:card, twitter:title, twitter:description and twitter:image. They use the name attribute instead of property.





X falls back to Open Graph values for the title, description and image when its own tags are missing. The one tag it needs on its own is twitter:card, which sets the card layout. Without it, links may show as a small card or plain text.





That is why this generator includes Twitter/X card tags by default. It copies your title, description and image into the Twitter fields and sets the card type based on whether you added an image. If you want X-specific fields such as twitter:site, use the Twitter (X) Card Generator.













Social Sharing and SEO Impact





Open Graph tags are not a Google ranking factor. Google uses your title tag, meta description and page content for search results, not OG tags.





The SEO value is indirect. A strong share card improves social engagement: more clicks, more shares and more people reaching your content. That can lead to more visibility, more mentions and sometimes more links, all of which help a page over time.





Good tags also protect your brand. A clickable preview with the right image and headline looks trustworthy, while a broken card with a random image or a missing title looks careless. For content that relies on social traffic, such as news, blog posts, product launches and events, Open Graph is one of the easiest wins available.













Open Graph Mistakes That Break Share Cards





    

  • Relative image URLs. /images/card.jpg won’t load on other platforms. Use the full absolute URL.
    • 




  • Images that are too small. Small images display as tiny thumbnails or not at all.
    • 




  • Wrong aspect ratio. Tall or square images get cropped, often cutting off text.
    • 




  • Image behind a login or blocked by robots.txt. Platforms can’t fetch it, so the card has no image.
    • 




  • Same tags on every page. Every share shows the homepage card.
    • 




  • Duplicate or conflicting tags. A theme, an SEO plugin and manual code can each output OG tags. Platforms may pick the wrong set.
    • 




  • Tracking parameters in og:url. UTM codes split share counts across URL versions.
    • 




  • Forgetting to refresh the cache. Old previews stay until you re-scrape the URL.
    • 




  • Wrong width and height values. If your image isn’t 1200 × 630, update the size tags.
    • 














When Platform Defaults Are Good Enough





Many CMSs and SEO plugins, including Rank Math and Yoast on WordPress, already output Open Graph tags from your post title, excerpt and featured image. If those defaults look right in the Sharing Debugger, you may not need custom tags at all.





Use this generator for static sites, landing pages, custom-coded apps, or when you want a share headline and image that differ from what the plugin produces.













Keeping Every Share Card On-Brand





Use a consistent image style, write a headline people would actually click, and test each important page before you promote it. Check how cards look with the Social Share Preview, fine-tune X tags with the Twitter (X) Card Generator, build your SEO tags with the Meta Tag Generator, and explore more on the FHSEO Hub free SEO tools page.













Open Graph Generator FAQs









Open Graph is a set of meta tags placed in a page’s HTML head that tells social platforms how to display the page when it is shared. Tags such as og:title, og:description, og:image and og:url define the headline, summary, preview image and canonical link that appear on the share card.









Use 1200 × 630 pixels, a 1.91:1 ratio that displays well on Facebook, LinkedIn and most messaging apps. Keep the file under 5 MB in JPG or PNG format, and use a full HTTPS URL. Keep important text and logos away from the edges, because some platforms crop images to a square.









Not directly. Google doesn’t use Open Graph tags as a ranking factor. They improve how links look on social platforms, which can increase clicks, shares and brand visibility. That extra exposure can lead to more mentions and links over time, so the benefit to SEO is indirect but real.









Facebook caches link previews, so it may be showing old data. Paste the URL into the Facebook Sharing Debugger and click “Scrape Again”. If it is still wrong, check that the og:image URL is absolute and publicly reachable, that only one set of OG tags exists, and that the tags are on that exact URL.









You need Open Graph for most platforms and at least the twitter:card tag for X. X falls back to Open Graph values for the title, description and image, but it needs twitter:card to choose the layout. This generator adds matching Twitter tags automatically when the checkbox is ticked.