When someone shares your link on Facebook, LinkedIn, WhatsApp or X, the platform shows a small preview card with a title, a description and an image. That card is built from a few meta tags in your page, called Open Graph tags. The Open Graph Generator above builds these tags for you, checks them for common problems and shows a live preview. It runs in your browser, so nothing you type is sent to us.
Table of Contents
What Are Open Graph Tags?
The Open Graph protocol was created by Facebook. It lets any web page describe itself as a "rich object" when it is shared. The protocol has four required properties:
og:title: the title shown in the preview.og:type: the kind of content, such aswebsiteorarticle.og:image: the image shown in the preview.og:url: the canonical URL of the page.
Optional properties such as og:description, og:site_name and og:image:alt make the card clearer. Many platforms other than Facebook also read these tags. X (Twitter) has its own Twitter Card tags, but it uses Open Graph tags as a fallback for the title, description and image. The card type (twitter:card) is the one tag worth setting yourself.
Why Open Graph Tags Matter
A good preview card makes your link look trustworthy and easy to understand, so more people click it. Without the tags, a platform has to guess, and it may pick a random image or no image at all.
How to Use the Open Graph Generator
- Fill in the basics. Choose the content type, then enter the title, the full page URL and a short description.
- Add your image. Paste the full image URL, add alt text, and keep the width and height at 1200 × 630 unless your image is different.
- Add details (optional). For an article, add the published time, author profile, section and tags. For a profile, add the name details.
- Set the X card. Keep the Twitter Card tags on, choose a card type and add your handles if you have them.
- Add basic meta tags (optional). Tick the optional section if you also want the charset, viewport, robots, title and description tags in the same code.
- Read the checks. The Checks box lists anything you must fix and a few helpful tips. Look at the preview as well.
- Copy the code. Click Copy Code and paste it into your page, as shown in the next sections.
The Fields Explained
| Field | What it does | Our advice |
|---|---|---|
| Content type | Sets og:type. Website suits home pages and tool pages. Article suits blog posts. Profile suits a person. |
Use article for posts and website for everything else. |
| Title | The headline in the card. | Keep it clear and short. Long titles may be cut off. |
| Page URL | The permanent address of the page. | Use the canonical URL, with https://. |
| Description | The text under the title. | One or two sentences. Write it for people, not for search engines. |
| Image, alt, width, height | The card image, a text description of it, and its size. | Always use a full URL, and add alt text and the real size. |
| Article details | Published and modified time, author, section and tags. | Use real dates. The tool converts your local time to a standard timestamp. |
| X (Twitter) card | Sets twitter:card and optional handles. |
Use "Summary with large image" for most posts. |
| Basic meta tags (optional) | Adds charset, viewport, robots, <title> and meta description above your Open Graph tags. |
Use only if your theme does not already have them. |
Optional: Add Basic Meta Tags
Open Graph tags work together with the basic meta tags that every page needs. If you tick Also generate basic meta tags, the tool adds them above your Open Graph code, so you can copy everything in one go.
| Tag | What it does | Good to know |
|---|---|---|
<meta charset="UTF-8"> |
Tells the browser which character encoding the page uses, so text and symbols display correctly. | Keep it near the top of <head>. |
viewport |
Makes the page scale correctly on mobile screens. | Needed for a responsive design. |
robots |
Gives indexing instructions to search engines. | index, follow is the default, so that tag is optional. noindex asks search engines to keep the page out of results. |
<title> |
The page title in browser tabs and often in search results. | Leave the field empty to reuse your Open Graph title. Search engines may rewrite titles. |
description |
A summary that search engines can use as the snippet. | Leave the field empty to reuse your Open Graph description. Search engines may show other text instead. |
<title> or <meta name="robots"> can send mixed signals to search engines. View your page source first, and use this option mainly for pages outside Blogger or for custom templates.Choosing the Right Image
The image has the biggest effect on how your card looks. Facebook's own image guidelines are a good reference:
| Rule | Value |
|---|---|
| Recommended size | At least 1200 × 630 px for the best display on high-resolution screens. |
| Minimum for a large image | 600 × 315 px. Smaller images appear as a small thumbnail. |
| Absolute minimum | 200 × 200 px. |
| Maximum file size | 8 MB. Smaller files load faster, so aim much lower. |
JPG and PNG are the safest formats for share images, because support for newer formats can vary between platforms. Facebook also suggests adding og:image:width and og:image:height, so its crawler can render the image immediately. The tool adds both for you.
How to Add the Tags to Blogger
- Open Theme in your Blogger dashboard and choose Edit HTML. Download a backup first.
- Find the
<head>section. - Paste the generated tags inside
<head>. - Save the theme and view the source of a live page to confirm the tags appear.
og:title before you paste. If tags already exist, adding a second set can confuse the platform about which title or image to use. The generated tags use self-closing format (/>), which Blogger's theme editor requires.Remember that one set of tags applies to the whole page template. For a unique card on every post, your theme must output each post's own title, description and image. The generator is best for static pages, tool pages and for checking what your tags should look like.
Test and Refresh Your Cards
Platforms save (cache) what they read from your page. After you add or change tags, run the URL through the Facebook Sharing Debugger. It shows what Facebook sees and lets you fetch the page again. Facebook also caches images by URL, so if you replace an image, upload it with a new file name and use the new URL.
Limitations to Know
- The preview is an approximation. Real cards differ by platform, device and app version.
- The preview loads your image from its URL. Your browser requests it directly from the host of the image.
- The tool does not check your live page. It builds tags from what you type. Use a debugger to see what platforms read.
- Soft limits are guidelines. The title and description length tips are not strict rules, because every platform cuts text differently.
Frequently Asked Questions
Is the Open Graph Generator free?
Yes. It is free, needs no signup and builds the tags in your browser.
Do Open Graph tags improve my Google ranking?
No. They control how your link looks when shared on social platforms and messaging apps. They can bring more clicks from those places, but they are not a ranking signal for Google Search.
Which image size should I use?
Use 1200 × 630 pixels, in JPG or PNG format. Facebook shows a large image when the image is at least 600 × 315 pixels, and it recommends 1200 × 630 for the best display.
Why does my shared link still show the old image or title?
Platforms cache link previews. Run your URL through the Facebook Sharing Debugger to fetch it again. If you changed the image, use a new image URL, because images are cached by URL.
Do I need the Twitter Card tags if I have Open Graph tags?
X uses Open Graph tags as a fallback for the title, description and image, but the card type is separate. Add twitter:card to choose between a small and a large image card. The other Twitter tags are optional.
Can I have more than one og:image tag?
The protocol allows several images, but most pages only need one. This tool creates a single image on purpose, so your card stays simple and predictable.
Should I turn on the basic meta tags option on Blogger?
Usually not. Blogger themes normally include these tags already, and a second copy can cause conflicts. The option is most useful for sites outside Blogger, custom page templates, or when you want to compare your theme's tags with a clean set.
Final Thoughts
Open Graph tags take only a few minutes to set up, and they decide how your pages look every time someone shares them. Fill in the required fields, use a clear 1200 × 630 image, fix anything the checks point out, and test your page in a debugger before you share it.