When you share a link on social media, the platform generates a card with a title, description, and image. If the markup is set up incorrectly, the preview may look unattractive, be cropped, or not appear at all. This article explains how to set up previews so links look professional on any social network.
How social networks generate previews
When you add a link, the platform:
- Loads the page
- Looks for Open Graph tags (og:title, og:description, og:image)
- If there are no OG tags, parses the title, meta description, and first suitable image
- Caches the result
Without OG tags, you have no control over the process. The platform may use a logo instead of a relevant image, crop the title, or show a technical description.
Set it up in 5 minutes
Add the following to the <head> of every page:
<meta property="og:title" content="Заголовок, который увидят в соцсетях">
<meta property="og:description" content="Краткое описание на 1-2 предложения. Должно побуждать к клику.">
<meta property="og:image" content="https://ваш-сайт.ru/images/preview.jpg">
<meta property="og:url" content="https://ваш-сайт.ru/страница/">
<meta property="og:type" content="website">Important: og:image must be an absolute URL with https://. Relative paths do not work.
Preview image requirements
| Parameter | Recommendation |
|---|---|
| Dimensions | 1200×630 px (works across all platforms) |
| Aspect ratio | 1.91:1 |
| Format | JPG or PNG |
| File size | Up to 1 MB (ideally 100–300 KB) |
| Content | Keep important information in the center, accounting for cropping at the edges |
Safe areas
Platforms may crop the image. VK displays 537×240 in the feed, while Telegram uses different proportions depending on the client. Keep key elements (logo, text) within the central 1000×500 px area.
Platform-specific features
VK
- Uses og:image
- Displays 537×240 in the feed; larger in the full post
- Caches aggressively; the cache clears over time or when the URL changes
Telegram
- Uses og:*
- Requires HTTPS for the image
- Caches for a long time — the old image may continue to appear for days after you change it
- Solution: add a query parameter to the image URL when updating it (
?v=2)
- Strict size requirements: minimum 200×200, recommended 1200×630
- Debugger: https://developers.facebook.com/tools/debug/ — to check and clear the cache
- Uses OG
- Shows a compact card in chats
Dynamic preview generation
For CMSs and static site generators, you can set OG tags at the template level using variables:
<meta property="og:title" content="{{ page.title }}">
<meta property="og:description" content="{{ page.description }}">
<meta property="og:image" content="{{ site.url }}{{ page.image }}">
<meta property="og:url" content="{{ page.url }}">For articles, use a unique image for each post. For products, use the product photo. For the homepage, use a general site preview.
Fixing common problems
The preview does not appear
- Check that og:image is an absolute URL with https://
- Make sure the image is accessible (no 403/404)
- Check robots.txt to see whether crawlers are blocked from accessing the image path
- Use OG Preview on reChecker for diagnostics
The preview shows an old image
Social networks cache previews. Solutions:
- Facebook: Sharing Debugger — “Scrape Again”
- VK: wait or change the page URL
- Telegram: change the image URL (add ?v=2)
Cropped text
- Keep og:title under 60 characters for safe display
- Keep og:description under 160 characters
- Check in OG Preview — the tool shows how the card will look
The preview looks different on different platforms
This is normal. Each platform has its own aspect ratios and limits. The universal size of 1200×630 minimizes distortion.
Preview templates for different content types
Blog article
- A unique image for the article (photo, infographic)
- og:title — article title
- og:description — introduction or takeaway (1–2 sentences)
- og:type — article
Product
- Product photo on a white or neutral background
- og:title — product name
- og:description — brief description, price
- og:type — product
Landing page / service
- An image that represents the service or its unique selling proposition
- og:title — service name
- og:description — call to action
- og:type — website
Tools for creating OG images
- Canva — 1200×630 templates for social media
- Figma — custom design
- Preview generators — automatically overlay text on an image
Recommendation: create a template with a 1000×500 px safe area in the center so important information is not cropped on any platform.
Pre-publication checklist
| Check | Action |
|---|---|
| OG tags on the page | View Source, search for og: |
| Absolute image URL | Check the code |
| Image dimensions 1200×630 | Open the file |
| Image accessibility | Open the URL in a browser |
| Preview | OG Preview |
| Meta tags | Meta tag check |
| Safe area | Keep key elements in the center |
| Unique images for articles | Use a separate preview for each article |
Frequently asked questions
Why does Telegram show an old image?
Telegram caches previews for a long time. Solutions: change the image URL (add ?v=2), wait for the cache to update, or, as a last resort, change the page URL.
Do I need separate images for each social network?
Usually, one 1200×630 image is enough. For special cases (for example, a vertical format for Stories), you can use platform-specific tags, but this is rarely necessary.
Does the preview affect SEO?
Indirectly. An attractive preview increases click-throughs when shared, which can lead to additional links and mentions. It does not directly affect rankings.
Conclusion
An attractive sharing preview is the result of correctly configured Open Graph tags. Required tags: og:title, og:description, og:image (absolute URL), og:url. An image measuring 1200×630 px works for all platforms. Check the result in OG Preview and with the meta tag check. For more on markup, see the Open Graph guide.