Open Graph Generator

Create meta tags that control how your content appears when shared.

Tools
Open Graph Generator
Add to Favorites Remove from Favorites Share on Facebook Share on X

Essential Tags

Image Tags

Twitter Card Tags

Google
Facebook
X (Twitter)
example.com
Your Page Title

A compelling description of your content. This is a preview of how your link might appear in Google search results.

Generated Meta Tags

Copy Tags Clear

About the Open Graph Generator

We built this Open Graph Generator to help you easily create the HTML meta tags that control how your content appears when it's shared on social media platforms like Facebook, X (formerly Twitter), LinkedIn, and others. Getting these tags right is crucial for making your links look professional and enticing, which can significantly increase clicks and engagement.

Our tool simplifies the process by giving you a simple form to fill out. As you type, it generates the complete, correctly formatted code in real-time, including all the essential Open Graph (og:) tags and Twitter Card (twitter:) tags. You also get a live preview that shows you how your link will likely appear on Google, Facebook, and Twitter.

How to Use the Generator

  • Fill in the fields on the left with your page's information, such as the title, description, and URL.
  • Provide a direct URL to the image you want to be displayed. For best results, use an image that is at least 1200x630 pixels.
  • Use the toggles to include or exclude specific groups of tags.
  • As you type, the generated meta tags will appear in the code box, and the live preview on the right will update.
  • Once you're happy with how it looks, click the "Copy Tags" button to copy the code.
  • Paste the generated code into the <head> section of your website's HTML.

Frequently Asked Questions

What is the Open Graph protocol?

The Open Graph protocol is a set of meta tags that you can add to your website's HTML to control how its content is represented when shared on social media. It was originally created by Facebook but is now used by most major platforms to create rich, detailed previews of shared links.

What are Twitter Cards?

Twitter Cards are a set of meta tags similar to Open Graph but specific to X (formerly Twitter). When you share a link on X, these tags are used to create a "Card" that can include a large image, a title, and a description, making your links stand out in the timeline. Our tool generates these tags for you automatically.

Why is my image not showing up on the preview?

Make sure you have entered a full, direct URL to your image (e.g., https://codeshack.io/web/img/codeshack.png). The URL must point to an actual image file, not a webpage. If the image still doesn't show, it might be because the server hosting the image is preventing it from being displayed on other websites due to CORS policy.

What is the best image size for Open Graph?

The recommended image size for Open Graph is at least 1200 pixels wide by 630 pixels tall (an aspect ratio of 1.91:1). This ensures that your image looks large and high-quality across different platforms. The image should be no larger than 5MB.

Do I need all of these tags?

While you don't technically need all of them, we strongly recommend using the core tags (title, description, URL, image, and type) to ensure your content is displayed correctly and professionally everywhere. Our tool provides all the essential tags you'll need for a complete setup.

Tools