# Open Graph & Twitter card generator > Generate Open Graph and Twitter (X) card meta tags and preview links on Facebook, X, LinkedIn, Slack and WhatsApp. Image size checks, HTML or Next.js code. Canonical: https://cromagnon.app/tools/open-graph-generator Last updated: 2026-10-27 - Category: SEO - Formats: OG · TWITTER CARD · HTML · NEXT.JS - Use it: https://cromagnon.app/tools/open-graph-generator (free, runs in the browser) ## What it does When someone shares your page on Facebook, X, LinkedIn, WhatsApp, Slack or Discord, the app builds a preview card from a few meta tags in the page's : the Open Graph tags (og:title, og:image and friends) and X's twitter: tags. This tool writes those tags for you, shows the card as each app draws it, and checks the things that most often go wrong: a missing or tiny image, the wrong shape, a relative address, no alt text. You can also paste a page's HTML to read the tags it already has and see what its shares look like. ## How to use it 1. Fill in the title, description, page address and the full address of the share image, or click Try an example. 2. Or switch to Paste a page's HTML, paste the source of a live page and click Read the tags to load what it has now. 3. Check the four previews and the list of checks; fix anything marked in red or amber. 4. Add the image size, alt text, type, site name and X accounts if you have them. 5. Copy the tags as HTML for the , or as a Next.js metadata object. 6. Publish, then refresh the preview in Facebook's Sharing Debugger and LinkedIn's Post Inspector so they forget the old version. Tip: Make one 1200×630 pixel JPG or PNG for each important page, with the main words of the title in big type and a clear picture. It works everywhere: Facebook, X large cards, LinkedIn, Slack and WhatsApp all use the same 1.91:1 shape. ## What each tag does - **og:title**: The headline of the card. It can differ from the page's : shorter, friendlier and without the brand, since the site name is shown separately. - **og:description**: One or two sentences under the title. Facebook shows one line, X and LinkedIn often hide it, so the title and image do most of the work. - **og:image**: The picture, as a full public https:// address. This single tag decides most of a share's clicks. - **og:image:width / height / alt**: The size lets Facebook show the image on the very first share; the alt text describes it for people using screen readers. - **og:url**: The page's canonical address, so likes and shares of different versions of the URL count together. - **og:type**: website for most pages, article for blog posts and news (with article:published_time), product for shop items. - **og:site_name and og:locale**: The site's name shown above or below the title, and the language and region, such as en_GB. - **twitter:card**: summary_large_image for a wide picture card, summary for a small square thumbnail next to the text. Without it, X shows the small card. - **twitter:site and twitter:creator**: The X accounts of the site and the author, which X can show and link. ## Getting the image right Use 1200×630 pixels for a large card. Facebook needs at least 200×200 and shows anything under 600 px wide as a small thumbnail; X crops large-card images to 2:1 and summary images to a square, so keep the important part in the middle. JPG, PNG and WebP work; SVG, AVIF and HEIC don't. Keep the file under 5 MB for X and 8 MB for Facebook, and much smaller is better: a 150 KB JPG loads fast in every app. The image must be reachable by the apps' crawlers: a full https:// address that opens without logging in, isn't blocked by robots.txt and doesn't depend on cookies. The preview here loads it in your browser, so if it doesn't appear, the crawlers probably can't load it either. ## Why a share still shows the old preview Facebook, LinkedIn and X store a copy of each card for days or weeks. After changing the tags, ask them to read the page again: Facebook's Sharing Debugger has a Scrape Again button, LinkedIn's Post Inspector refreshes when you inspect the URL, and X refreshes its cache on its own after about a week (adding a harmless query such as ?v=2 to the shared link gives a fresh card at once). WhatsApp, Slack and Discord also cache previews per link. If the card is still wrong, check the live page's HTML rather than your template: themes, SEO plugins and tag managers sometimes add a second og:image, and apps usually take the first one they find. Paste the live source into this tool to see exactly which tags are there. ## Adding the tags to your site Put the tags inside the <head> of each page, with values for that page; the same image and title on every page wastes the chance to sell each one. In WordPress, an SEO plugin such as Yoast, Rank Math or All in One SEO writes them for you from fields under each post. In Next.js, use the metadata object (the Next.js tab here) or generateMetadata for pages with dynamic content. Shopify, Wix and Squarespace have social sharing settings in each page's SEO options. ## Tips - **Text on the image**: Most people see the image before the title. A few large words on it, readable on a phone, raise clicks. - **Safe area**: Keep text and faces away from the edges; X and some feeds crop the sides or the top and bottom. - **One image per page**: A specific image for each article or product beats a site-wide logo every time. - **Absolute addresses**: /images/og.jpg works in your browser but not for crawlers. Always write the full https:// address. - **Check the live page**: Paste the published page's source to confirm there's only one og:image and the values are right. - **Titles for sharing**: A social title can be more conversational than the search title; a question or a number works well. ## Questions ### What size should an Open Graph image be? 1200×630 pixels (a 1.91:1 shape) is the standard that works on Facebook, X large cards, LinkedIn, Slack and WhatsApp. The minimum Facebook accepts is 200×200. ### Do I need Twitter tags if I have Open Graph tags? X reads og:title, og:description and og:image when its own tags are missing, but it needs twitter:card to show the large image card. Adding the twitter: tags too is the safe choice. ### Why doesn't my image show when I share the link? Usually the address is relative or not public, the image is too small or in an unsupported format, or the app is showing an old cached copy. The checks here catch the first three; use the apps' debuggers for the cache. ### Do Open Graph tags help SEO? Not directly in Google's rankings, but better previews bring more clicks and shares, and more visits and links from social media help a page do well. ### Can I use a different title for social media? Yes. og:title and twitter:title can differ from the <title> tag; many sites use a shorter, catchier version for sharing. ### Is what I type sent anywhere? No. The checks and previews run in your browser, on your device. Nothing you type or paste is uploaded, stored or logged. ## Related - [SERP Preview](https://cromagnon.app/tools/serp-preview) - [Image Resizer](https://cromagnon.app/tools/image-resizer) - [Image Compressor](https://cromagnon.app/tools/image-compressor) - [Favicon Generator](https://cromagnon.app/tools/favicon-generator) - [All tools](https://cromagnon.app/tools)