Open Graph Meta Tag Generator
Generate the Open Graph and Twitter Card tags that decide how a link looks when it is shared, including the image size that actually renders.
<!-- Open Graph. Put these inside <head>. -->
<meta property="og:type" content="website">
<meta property="og:title" content="Free WordPress Developer Tools">
<meta property="og:description" content="Generators and converters for WordPress developers. Everything runs in your browser.">
<meta property="og:url" content="https://bucketwp.com/">
<meta property="og:site_name" content="BucketWP">
<meta property="og:locale" content="en_US">
<meta property="og:image" content="https://bucketwp.com/share.png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="BucketWP developer tools">
<!-- Twitter Card. X reads the Open Graph tags for everything except the card type. -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Free WordPress Developer Tools">
<meta name="twitter:description" content="Generators and converters for WordPress developers. Everything runs in your browser.">
<meta name="twitter:image" content="https://bucketwp.com/share.png">
<meta name="twitter:image:alt" content="BucketWP developer tools">
Output is valid and updates as you type.
Fix the highlighted fields to update the output.
Fill in what a shared link should show and copy out the Open Graph and Twitter Card tags. The defaults are the image size and card type that render everywhere rather than the ones that quietly downgrade.
How to use
- Use an absolute image URL that works without a login. Relative paths and staging sites behind basic auth are the two reasons a preview comes out blank.
- Keep the image at 1200 by 630. It is the ratio Facebook, LinkedIn and X all accept, and
summary_large_imageneeds at least 300 by 157. - Declare the width and height. Without them the first share has no preview while the crawler fetches the image, and that first version is what gets cached.
- Match
og:urlto your canonical URL. Share counts are counted per URL, so two variants split them. - Add the Twitter tags. X falls back to Open Graph for everything except the card type, which has no Open Graph equivalent.
Example
An article share with the publishing metadata filled in:
<meta property="og:type" content="article">
<meta property="og:title" content="How to migrate a WordPress site without downtime">
<meta property="og:url" content="https://example.com/blog/wordpress-migration/">
<meta property="og:image" content="https://example.com/img/migration.png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="article:published_time" content="2026-01-31T09:00:00+00:00">
<meta name="twitter:card" content="summary_large_image">article:author takes a profile URL, not a name. A name there is ignored.
Pitfalls
- Previews are cached hard. Facebook and LinkedIn keep the first version they fetched, so a fix needs their debugger to re-scrape the URL.
- A relative image URL resolves to nothing for a crawler. Open Graph images must be absolute, with the protocol.
- An image behind basic auth or on a staging host is unreachable to the crawler, so the preview is empty even though the tag is right.
og:localeuses an underscore,en_US, while thehtmllang attribute uses a hyphen,en-GB. Mixing them up is silent.summary_large_imagedowngrades to a small card when the image is under 300 by 157, with no error anywhere.- Missing width and height means the crawler has to fetch the image before it can lay the card out, so the first share often has no picture.
article:published_timewants ISO 8601 with a timezone. A plain date is accepted inconsistently.- Duplicate Open Graph tags, usually one set from the theme and one from an SEO plugin, give unpredictable results.
Compatibility
Open Graph is read by Facebook, LinkedIn, X, Slack, Discord, WhatsApp and most chat clients. Twitter Card tags are still read by X, which falls back to Open Graph when they are missing. og:image:alt and twitter:image:alt are used by screen readers on those platforms. The tool runs entirely in your browser.
Frequently asked questions
Why is my preview still showing the old image?
It is cached. Use the platform’s own debugger or sharing validator to re-scrape the URL.
What image size should I use?
1200 by 630. It fits every large card and crops predictably where a platform uses a different ratio.
Do I need Twitter tags if I have Open Graph?
Only for the card type. X reads Open Graph for the title, description and image.
Can I use the same tags on every page?
You can, and every share will look identical. The title, description, URL and image should be per page.
Does Open Graph affect search rankings?
No. It affects how often a link gets clicked when it is shared, which is a different and often larger number.