When a site was built mainly for social feeds, an Open Graph card had a single task: make a Facebook link preview look complete. After generative search spread, that markup gained another layer of meaning: when a model fetches a page, OG meta is one of the summary signals it reads first. In tailored website design, this setting is easy to undervalue, yet it shapes the system's first impression of the page.
Reviews with site owners often reveal the same miss: a share image that is only a logo, a title that says Home, and a blank description. An automated reader that sees that card can barely form a useful judgment. The same gap shows up again and again in projects.
Precise OG copy makes social cards clearer and also steers how a model first reads the page topic.
Two jobs of an OG card
| Use | Audience | Effect |
|---|---|---|
| Social share preview | Facebook, LinkedIn, Slack, Discord | Click intent |
| Short page summary | Language models and search engines | How accurate the reading is |
The second use has only been taken seriously in recent years: while processing a page, OG supplies a length-controlled, standard-format summary, which is far more efficient than reading the full HTML.
Full OG meta example
Writing and design points
og:title
- Stay within 60 characters so mobile previews are not cut off
- Align with the H1, but tighten it further
- Do not stuff keywords; write a line a reader would want to open
| ✗ | ✓ |
|---|---|
| Web design | structured data | search | share card | keyword stuffing | A field guide to structured-data markup |
| Company profile page | A team that builds model-readable sites |
og:description
- About 100 to 150 Chinese characters
- The first sentence should state what the page is about
- Include core terms naturally, without forced stacking
- Avoid empty praise such as best or number one
og:image
The most important visual in the preview. Recommended constraints:
- 1200×630 pixels, about a 1.91:1 ratio
- File size under 1MB
- Type large enough to stay readable in a phone thumbnail
- Strong contrast, such as dark type on a light ground or light type on a dark ground
- Include the brand mark and the title; for presentation principles see model-friendly image and alt writing
Practical ways to ship it:
- Generate the preview automatically: build a unique OG image from each article title
- Vercel or Cloudflare both offer dynamic image endpoints
- Template approach: render each column preview from an SVG template
og:type
Use a standard value. Do not invent a type:
| Value | Use |
|---|---|
website | Home and listing pages |
article | Blog posts and columns |
product | Product detail pages |
book | Book pages |
profile | Profile pages |
video.movie | Video pages |
After the type is set, add the matching subfields. An article, for example, can include article:author and article:published_time.
Twitter Card
Common types:
summary: small image (120×120) with a title and descriptionsummary_large_image: large image (1200×630) with a title and descriptionapp: card for promoting an applicationplayer: card for video or audio playback
Most pages should use summary_large_image, which has the strongest visual impact.
OG copy models can parse
Compare the two versions below:
The second version states a concrete scope, a clear service (model-readable site builds), and the target systems (ChatGPT, Claude, Google AI): after one read, it is obvious what the team is and what it delivers.
Dynamic OG image generation
Hand-making a 1200×630 preview for every article does not scale. Dynamic generation is the approach that holds up over time.
Option 1: Vercel OG
// pages/api/og.jsximport { ImageResponse } from '@vercel/og';export default function OgImage(req) { const title = new URL(req.url, 'https://example.com').searchParams.get('title') || 'Untitled'; return new ImageResponse( {title} , { width: 1200, height: 630 } );}Each article can then receive a preview that follows the brand layout.
Option 2: Cloudflare Workers
The idea is close to Vercel OG, but it runs on Cloudflare edge nodes, with lower latency and a larger free allowance.
Option 3: Puppeteer screenshots
This is the most flexible option and also the most expensive: a headless browser on the server captures a laid-out HTML page as an image.
Pre-launch self-check
Check OG meta on every page against the items below:
- og:title stays within 60 characters, aligned with the H1 but tighter
- og:description is about 100 to 150 characters, and the first sentence names the topic
- og:image is 1200×630 and still readable at 200×100
- og:image:width and og:image:height are set
- og:type is website, article, or product as appropriate
- Twitter Card is summary_large_image
- og:url is an absolute URL including https://
- og:site_name is consistent sitewide
- og:locale is correct, for example zh_TW or en_US
- The page passes Open Graph Debugger
Closing: not only Schema
OG used to be treated as the look of a social share. It should now be upgraded to a page summary that both people and models read. Clear copy gives the system an accurate first impression; vague copy can lose the opening even when the body is strong.
When a site is built, OG and Schema belong in the same stage: both are layered signals that help a model understand the page. For a model-friendly upgrade, schedule them together rather than apart. Further reading: a Schema.org structured-data guide and solutions.
