English
Author Open Graph and Twitter Card tags with a live social preview.
Last updated
Recommended 1200×630, under 8 MB, absolute URL (https).
Free interactive coding lessons in Python, JavaScript, and more. Practice in the browser, earn certificates, and build real projects with Coddy.
<title>Learn to code by doing — Coddy</title> <meta name="description" content="Free interactive coding lessons in Python, JavaScript, and more. Practice in the browser, earn certificates, and build real projects with Coddy." /> <link rel="canonical" href="https://coddy.tech" /> <!-- Open Graph (Facebook, LinkedIn, Discord, Slack) --> <meta property="og:title" content="Learn to code by doing — Coddy" /> <meta property="og:description" content="Free interactive coding lessons in Python, JavaScript, and more. Practice in the browser, earn certificates, and build real projects with Coddy." /> <meta property="og:type" content="website" /> <meta property="og:url" content="https://coddy.tech" /> <meta property="og:image" content="https://storage.googleapis.com/coddy-15505.appspot.com/public/coddy-logo-trans.png" /> <meta property="og:image:alt" content="Coddy — Learn to code by doing" /> <meta property="og:site_name" content="Coddy" /> <meta property="og:locale" content="en_US" /> <!-- Twitter / X --> <meta name="twitter:card" content="summary_large_image" /> <meta name="twitter:title" content="Learn to code by doing — Coddy" /> <meta name="twitter:description" content="Free interactive coding lessons in Python, JavaScript, and more. Practice in the browser, earn certificates, and build real projects with Coddy." /> <meta name="twitter:image" content="https://storage.googleapis.com/coddy-15505.appspot.com/public/coddy-logo-trans.png" /> <meta name="twitter:image:alt" content="Coddy — Learn to code by doing" /> <meta name="twitter:site" content="@coddy_tech" />
When you share a link in any modern app — a post, a DM, a Slack channel — the platform fetches the URL and pulls out a small chunk of metadata to render a *share card*: the title, a description, an image, and the site name. That metadata isn't pulled from the visible page; it comes from a specific set of <meta> tags in the <head>. The Open Graph protocol, originally invented by Facebook in 2010, defines most of them. X (formerly Twitter) adds a few extras with twitter: prefixes. LinkedIn, Discord, Slack, iMessage, WhatsApp, and Pinterest all read the same tags with small variations.
Getting these tags right is a one-time job per page, but it has outsized impact. A page with no Open Graph image looks broken when shared. A title that's too long gets cut off mid-word. The wrong og:image aspect ratio is letterboxed by every platform. This tool lets you tune those values with live previews, so you can see truncation and cropping problems *before* you ship the page.
Everything runs locally. The form state, the previews, and the generated HTML never leave your browser — paste in pre-launch URLs and unreleased copy without worrying about leaks.
property attribute (<meta property="og:title">), while standard SEO and Twitter Card tags use name (<meta name="description">, <meta name="twitter:card">).title, meta description), Open Graph (og:title, og:description), and Twitter (twitter:title, twitter:description).og:image should be 1200×630, served over HTTPS, and given an absolute URL — relative paths fail when other servers fetch the page.Aim for 50-60 characters. Facebook truncates at ~95 characters and X at ~70. Lead with the value, not the brand — "How to deploy with Cloudflare Workers" beats "Coddy Blog · Deployment Guide".
Aim for 120-155 characters. Most platforms truncate around 200. Use full sentences — the description appears below the title in every card, and clipped fragments look unfinished.
Use the absolute https:// URL of the page itself, not a tracking or redirect link. Open Graph crawlers follow og:url when deduplicating shares — a canonical URL keeps share counts and previews consistent.
1200×630 is the sweet spot for summary_large_image cards on X and standard cards on Facebook and LinkedIn. PNG or JPEG, under ~5 MB. Always use an absolute URL — relative paths fail because the social crawler hits the URL from its own server.
Paste the block from the **Generated <head> tags** panel into your page's <head>. After deploying, validate with each platform's debugger (Facebook Sharing Debugger, X Card Validator, LinkedIn Post Inspector) and force a recrawl if you change the image later.
The tags below cover everything social platforms read today. Tags marked with property= belong to the Open Graph protocol; tags marked with name= are the standard SEO / Twitter Card variants. Reference specs: Open Graph, X Cards.
| Tag | Used by | Recommended | Notes |
|---|---|---|---|
og:title | FB, LinkedIn, Slack, Discord | 50-60 chars | Falls back to <title> if absent — set it anyway. |
og:description | FB, LinkedIn, Slack, Discord | 120-155 chars | Falls back to meta description if absent. |
og:image | Every platform | 1200×630, < 5 MB, HTTPS, absolute URL | Must be an absolute URL — relative paths fail. |
og:image:alt | Accessibility | Describe the image | Used by screen readers and some platforms. |
og:url | FB, LinkedIn | Canonical https:// URL | Used to deduplicate shares across query-string variants. |
og:type | FB, LinkedIn | website or article | article unlocks article:published_time, article:author. |
og:site_name | FB, Discord | Brand name | Shown as the small attribution above/below the card. |
twitter:card | X | summary_large_image | summary for a small square thumb, summary_large_image for the banner layout. |
twitter:title | X | Same as og:title | X falls back to og:title if absent — set both for safety. |
twitter:description | X | Same as og:description | Falls back to og:description if absent. |
twitter:image | X | Same as og:image | Falls back to og:image if absent. |
twitter:site | X | @yourbrand | The publisher's X handle — drives some analytics. |
Set **og:type** to article, add **Author** and **Published time** in the article-specific section, and use a 1200×630 cover image. The previews update to show how the card looks on each platform.
og:type=article unlocks the article-specific tags (article:published_time, article:author) that some platforms (Discord, LinkedIn) use to surface attribution. Twitter ignores them but doesn't complain.
Keep **og:type** as website. Use the product name as the title, a one-sentence value prop as the description, and a hero or screenshot crop as the image.
Landing pages don't need article metadata. The single most-clicked element on a shared landing page card is usually the image, so invest in a clean 1200×630 visual.
Title: "Concept — Section · Docs". Description: one sentence explaining the concept. Image: a generic docs cover or a screenshot of the relevant UI.
Docs pages get shared in Slack channels and X threads. A consistent docs cover image makes them recognizable in a busy feed even before the title is read.
og:image URL like /images/cover.png. Social crawlers hit your page from *their* servers — relative paths point at the social platform's own domain and 404. Always use an absolute https:// URL.twitter:card. Without it, X defaults to a minimal card with no image. Add twitter:card=summary_large_image to get the banner layout almost every brand actually wants.og:image:alt tag. It costs nothing, helps screen-reader users, and a few platforms surface it as alt text on the rendered card.<meta> tags — title, description, image, type, and so on. Every major social and chat platform reads it today, which is why it became the de facto standard for share-card metadata.twitter: tags to the equivalent og: tags when the X-specific ones are missing, so you can technically get by with just Open Graph. But adding twitter:card, twitter:site, and twitter:creator gives you finer control over how the card renders on X.<title> and meta description. Google does occasionally pick up og:image for image search and discover surfaces, but it is not a ranking signal.