OpenGraph og:title og:description og:image
Control how your page appears when shared on social networks.
OpenGraph og:title og:description og:image is a free HTML Academy lesson on CoddyKit — lesson 1 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the HTML Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.
What is OpenGraph?
OpenGraph is a metadata protocol introduced by Facebook so that any page can describe how it should look when shared on a social platform. Tags live in the <head> as <meta property="og:..." content="..."> pairs and are scraped by every major social network.
Core Tags
The four required-in-practice tags are og:title, og:description, og:image and og:url. Missing any of them produces an unattractive share card or, worse, a card with no preview at all that users tend to skip.
<meta property="og:title" content="Learn HTML">
<meta property="og:description" content="From DOCTYPE to Web Components.">
<meta property="og:image" content="https://example.com/og.png">
<meta property="og:url" content="https://example.com/learn">og:title
The headline on the share card. Keep it under about 60 characters so it fits on one line and is not truncated by the social network. Match it to the page's <title> but feel free to optimize for click-through.
og:description
One-or-two-sentence summary shown beneath the title. Aim for 120-160 characters — long enough to entice, short enough to display fully on every platform. Avoid clickbait; honest descriptions win more long-term engagement.
og:image
The hero image. Use a 1200x630 pixel JPG or PNG (under ~5 MB). Always use an absolute URL — relative URLs break because the scraper has no concept of "this page". Provide og:image:width and og:image:height to skip an extra request during preview generation.
og:url
The canonical URL of the page. Set it even when the page already has a <link rel="canonical"> — some scrapers prefer the OG tag. Strip tracking parameters so shared URLs do not multiply into many "different" pages in the social platform's database.
og:type
Tells the platform what kind of content this is: "website", "article", "product", "video.movie", "book", etc. Article is the most common choice for blog posts and unlocks additional tags like article:published_time and article:author.
og:locale
BCP-47 locale of the content (e.g. "en_US", "tr_TR"). Combined with og:locale:alternate it tells the network which other languages the page is available in, which is how Facebook decides whether to translate a preview.
og:site_name
The display name of the publishing site. Some networks show it as a subtitle on the card. Keep it short and consistent across every page so the brand reads the same regardless of which article is shared.
Testing the Cards
Use Facebook's Sharing Debugger and LinkedIn's Post Inspector to fetch the page as the scraper sees it, view the parsed tags, and refresh their cached preview. After deploying a new og:image, re-scraping is required or users see the old image for days.
Common Pitfalls
Server-rendered tags are mandatory — most scrapers do not execute JavaScript, so OG tags injected by React on the client are invisible to them. Render them in the initial HTML, ideally with SSR or SSG, otherwise share cards stay generic forever.
Knowledge Check
Why must og:image use an absolute URL rather than a relative path?
Summary
OpenGraph tags (og:title, og:description, og:image with absolute URL, og:url, og:type, og:locale, og:site_name) control how every page looks when shared. Render them server-side, keep titles under 60 chars and descriptions around 150, use 1200x630 images, and test with the Facebook Sharing Debugger before launch.
Frequently asked questions
Is the “OpenGraph og:title og:description og:image” lesson free?
Yes — the full text of “OpenGraph og:title og:description og:image” is free to read here on the web, and the HTML Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the HTML Academy course, upgrade to CoddyKit PRO.
What will I learn in “OpenGraph og:title og:description og:image”?
Control how your page appears when shared on social networks. You practise HTML Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.
Do I need any experience to start HTML Academy?
No prior experience is required. HTML Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 1 of 4, so you can start here or from the beginning and move at your own pace.
How long does the “OpenGraph og:title og:description og:image” lesson take?
Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.
Can I write and run code in this HTML Academy lesson?
Yes. Every HTML Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.
All lessons in this course
- OpenGraph og:title og:description og:image
- Twitter Card Meta Tags
- JSON-LD Structured Data Basics
- Hreflang for International Pages