🖼️
Use a share-ready image
- Use an absolute, publicly accessible HTTPS URL
- Aim for 1200 × 630 pixels and a 1.91:1 ratio
- Keep essential text away from image edges
Page Information
0 / 60
0 / 155
Recommended: 1200×630 px JPG or PNG
🖼️
yourdomain.com
Your Page Title
Your page description will appear here…
🖼️
Your Page Title
Description text will appear here…
yourdomain.com
🖼️
Your Page Title
yourdomain.com
YOUR WEBSITE
Your Page Title
Description text will appear here…
🖼️
HTML Meta Tags
✍️
Write for scanning
- Put the central topic early in the title
- Use a specific, useful description
- Avoid repeating the site name unnecessarily
♿
Make images accessible
Use og:image:alt and twitter:image:alt to describe meaningful content in the image. Do not start with “image of”; describe its purpose directly.
Understanding Open Graph metadata
Open Graph tags live in the page’s <head> and describe the title, summary, canonical URL and image that sharing services should use. X card tags provide an additional platform-specific version. The preview is an informed approximation: each service controls its final layout, cropping, truncation and cache.
| Tag | Purpose | Good practice |
|---|---|---|
og:title | The headline shown on the share card. | Make it unique and understandable without surrounding page context. |
og:description | A short explanation below the title. | Summarize the value of the page rather than stuffing keywords. |
og:url | The canonical identity of the shared page. | Use the final HTTPS URL without tracking parameters or fragments. |
og:image | The visual asset displayed with the link. | Use a stable absolute URL that does not require authentication. |
twitter:card | Selects the X card presentation. | Use summary_large_image for a prominent landscape image. |
Why does the real share card differ from this preview?
Platforms apply their own dimensions, text limits and cropping. They may also use cached data or choose another image when a requested asset cannot be fetched.
Why are my updated tags not appearing?
The social platform may still have an older scrape cached. Confirm the tags are present in the server-rendered HTML, verify the image is public, then request a refresh with that platform’s sharing debugger or validator.
Do JavaScript-injected tags work?
Do not rely on them. Many social crawlers read the initial HTML response and may not execute client-side JavaScript. Render essential metadata in the document head on the server or during your site build.