Suggest an editImprove this articleRefine the answer for “What are the meta tags og:title, og:description, og:image used for?”. Your changes go to moderation before they’re published.Approval requiredContentWhat you’re changing🇺🇸EN🇺🇦UAPreviewTitle (EN)Short answer (EN)The meta tags **`og:title`**, **`og:description`**, and **`og:image`** are used to control how a link looks when it is shared on social networks, messengers, and other platforms (Facebook, Telegram, LinkedIn, X/Twitter, and so on). **Key point:** They are part of the Open Graph protocol, which lets you set a page's title, description, and preview image, so the link looks nice and attractive.Shown above the full answer for quick recall.Answer (EN)ImageThe meta tags `og:title`, `og:description`, and `og:image` are used to **control how a link looks** when it is shared on social networks, messengers, and other platforms (Facebook, Telegram, LinkedIn, X/Twitter, and so on). They are part of the **Open Graph** protocol, which lets you set a page's **title, description, and preview image**, so the link looks nice and attractive. --- ### 1. `<meta property="og:title">`, the card's title Sets the **main title** that the social network will show above the description and image when the link is shared. Example: ```html <meta property="og:title" content="7 mistakes that quietly break relationships"> ``` Displayed as large text above the description. Important: this is the **first thing the user sees**, so the title should be short (up to ~60 characters) and clickable. **Why:** - makes the link clear and emotionally engaging; - affects CTR (clickability) when shared. --- ### 2. `<meta property="og:description">`, the page description Responsible for the **text below the title** in the preview. This is a short, "human" explanation of what the page is about and why it's interesting. Example: ```html <meta property="og:description" content="A psychologist explains why closeness doesn't disappear suddenly, but fades away in small, unnoticed steps."> ``` Recommended length: 100-160 characters. The description should **complement the title**, not repeat it. **Why:** - helps the social network build the snippet (preview text); - boosts engagement and the desire to click; - makes the link "alive" and clear. --- ### 3. `<meta property="og:image">`, the preview image Sets the **image** that will be displayed next to the title and description. Example: ```html <meta property="og:image" content="https://site.com/images/relationships.jpg"> ``` Recommendations: - format: `.jpg` or `.png`; - size: at least **1200×630 px** (for good quality on Telegram, Facebook, and LinkedIn); - the link must be **absolute** (a full URL starting with `https://`). **Why:** - visually stands out in the feed; - increases engagement (up to +200% CTR according to Facebook data); - creates emotional context. --- ### 4. What this looks like in practice When the link is shared: ```javascript https://mysite.com/post ``` Telegram, Facebook, or LinkedIn will show a card: (image from `og:image`) **7 mistakes that quietly break relationships** A psychologist explains why closeness doesn't disappear suddenly, but fades away in small, unnoticed steps. --- ### Summary: | Tag | Purpose | Where it appears | |---|---|---| | `og:title` | The card's title | Top line of the preview | | `og:description` | Description text | Below the title | | `og:image` | Preview image | Left of or above the card | --- **In simple terms:** These three tags are the **page's visual passport for social networks**. They say: > "Here is my title, here is a short description, here is a photo, show me beautifully." Without them, the social network "guesses" the preview automatically, often with truncated titles and random images.For the reviewerNote to the moderator (optional)Visible only to the moderator. Helps review go faster.