OpenGraph Snippet Generator

Use our free OpenGraph Generator to generate the html meta-tags for OG, Twitter Card Embeds, Discord Embeds, and other Social Media Embeddings for your website.

Output

Other Coding Tools

OpenGraph Meta-Tag Code-Snippet Generator

What are OpenGraph Tags?

Open Graph (OG) tags are snippets of HTML code that websites use to control how their content appears when shared on third-party social media platforms. They provide structured data that social networks can use to generate rich previews, including the title, description, and image associated with a shared link. This helps make shared content more visually appealing and informative, potentially increasing click-through rates and driving more traffic to the website.

What are Twitter (X) Card Tags?

Twitter Card tags are meta-tag snippets of HTML code that allow you to control how your website's content appears when shared on X (Twitter). They provide a more visually appealing and informative way to preview content in tweets compared to simply displaying a URL. These tags specify details like the title, description, image, and type of content, making the shared link more engaging and likely to attract clicks.

What is the og:type attribute?

The og:type tag, within Open Graph meta tags, specifies the type of content being shared on social media. It helps social media platforms understand and display the content appropriately. Common values include website, article, video, and book. If not specified, the default is website.

What format should og:image have?

Open Graph images (og:image) should generally be in JPEG or PNG format with a 1.91:1 aspect ratio and a minimum size of 1200 x 630 pixels. These dimensions ensure the image displays properly without cropping on most social media platforms. While some platforms already support WEBP files, it's best to stick with JPEG or PNG images for maximum compatibility.

Where do I put the og meta tags in my HTML?

All the meta tags need to be placed in your website's <head> section, where you also keep other metadata like your page's stylesheets or canonical URL.

What Social Networks use OpenGraph?

OpenGraph tags are used by almost all social media platforms, including Facebook (who invented OpenGraph), Twitter/X (including their own extended tags prefixed with twitter:), LinkedIn, Discord, Pinterest (Rich Pins).

How to use OpenGraph in NextJS

You can export a metadata object in your page.tsx or layout.tsx file with the according data to add OpenGraph metadata to your NextJS application. Code example:

import type { Metadata } from 'next'

export const metadata: Metadata = {
  title: 'My Website',
  description: 'Website Description',
  ...
}

export default function Page() {}

Does Google use OpenGraph Meta Data?

While OpenGraph (which was invented by Facebook) is primarily used by Social Media platforms, Google may also use some specific OpenGraph tags like og:title when crawling information about your website. On August 26th, 2024 Google has clarified in their Search Central Changelog that they use the og:title value as one of the possible ways to detect a link's title in their search results. That said - you should always have a <title> tag one every webpage and not rely on og:title alone!