Картки для соцмереж: Open Graph і зображення для поширення

Що таке попередній перегляд посилання

Коли хтось ділиться посиланням у соцмережі чи месенджері, платформа читає сторінку й будує маленьку картку: зображення, заголовок, короткий текст і домен. Більшість платформ читає для цього теги протоколу Open Graph – елементи meta в head сторінки. X, раніше Twitter, також читає власні теги, що починаються з twitter:. Кожна платформа сама оформлює свою картку й вирішує, скільки тексту показати. Ти вирішуєш, що сторінка повідомляє платформам.

Основні теги

Протокол Open Graph, опублікований на ogp.me, називає чотири властивості, які має кожна сторінка: og:title, og:type, og:image і og:url. og:url – канонічна адреса сторінки. Необов’язкові, але корисні og:description, og:site_name і og:locale – мова й регіон тегів, наприклад de_DE.

<meta property="og:title" content="Літній розпродаж: усі чашки зі знижкою">
<meta property="og:type" content="article">
<meta property="og:url" content="https://example.com/blog/summer-sale">
<meta property="og:image" content="https://example.com/img/summer-sale-1200x630.jpg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="Шість синіх чашок на дерев’яному столі">
<meta property="og:description" content="До 31 серпня: нижчі ціни на чашки й тарілки.">
<meta property="og:site_name" content="Приклад Магазин">
<meta name="twitter:card" content="summary_large_image">

Пиши кожну адресу повністю, з https://. Протокол визначає адресу як URL, що використовує http:// або https://, тож шлях на кшталт /img/sale.jpg не є дійсним значенням. og:url має збігатися з канонічним посиланням сторінки. Якщо тег трапляється двічі з різними значеннями, протокол надає перевагу першому.

Зображення для поширення

Більшість попередніх переглядів показує зображення широким. Зазвичай рекомендують зображення зі співвідношенням близько 1,91 : 1, наприклад 1200 × 630 пікселів, – воно пасує до більшості карток без обрізання. Квадратні зображення часто обрізаються згори й знизу, тож тримай важливий вміст посередині. Для Google Discover Google радить зображення шириною щонайменше 1200 пікселів, великий попередній перегляд, дозволений налаштуванням max-image-preview:large, і зображення, задане через og:image або розмітку schema.org. Google також не радить використовувати загальні зображення, як-от логотип сайту.

og:image:width і og:image:height зазначають розмір зображення в пікселях. og:image:alt описує, що зображено, а не є підписом. Протокол каже, що сторінка з og:image має також зазначати og:image:alt.

Заголовок і опис

og:title може відрізнятися від елемента title. Йому не потрібна назва сайту, бо її несе og:site_name. Платформи обрізають довгі тексти за власною довжиною, тож став важливі слова на початок. Теги Open Graph важливі й поза соцмережами. Google називає вміст og:title одним із джерел для посилань-заголовків у результатах пошуку, враховує og:site_name для назви сайту й зазначає og:image як один зі способів указати бажане зображення.

Теги для X

Тег twitter:card обирає тип картки. Значення summary_large_image запитує велике широке зображення, summary – маленьке. Якщо сторінка вже має теги Open Graph, часто достатньо додати twitter:card. Сторінки для розробників X не вдалося прочитати для цього посібника, тож перевір там актуальні правила, перш ніж покладатися на якусь деталь.

Одна картка на сторінку

Багато сайтів задають однаковий заголовок і зображення для кожної сторінки, часто через тему. Тоді кожне поширене посилання виглядає однаково. Дай кожній важливій сторінці власні og:title, og:description і og:image: сторінці товару – фото товару, статті – її головне зображення. Для og:type протокол, серед інших типів, використовує website для загальної сторінки й article для статті. Система магазину чи керування вмістом може заповнювати ці теги автоматично з заголовка, короткого опису й головного зображення кожної сторінки. Після зміни перевір по одній сторінці кожного шаблону.

Чому попередній перегляд не змінюється

Багато платформ зберігають картку, щойно її побудували. Якщо ти згодом зміниш зображення чи заголовок, люди ще якийсь час можуть бачити стару картку. Допомагає нова назва файлу для нового зображення, бо тоді платформа бачить нову адресу. Деякі платформи пропонують інструмент, який знову завантажує сторінку.

Перш ніж поширити сторінку

• Чи є og:title, og:type, og:image і og:url і чи og:url – канонічна адреса?
• Чи кожна адреса повна, з https://?
• Чи зображення достатньо широке, чи воно завантажується і чи важливий вміст посередині?
• Чи задано og:image:alt, og:image:width і og:image:height?
• Чи є тег twitter:card і чи заголовок достатньо короткий?

Робота з Do4U

Перевірка картки для соцмереж показує, як виглядає сторінка, коли посиланням на неї діляться, і перевіряє теги за попереднім переглядом. Ти вводиш одну адресу. Do4U читає сторінку й початок її зображення для поширення. Код збирає теги Open Graph, теги карток Twitter/X і резервні значення, тобто заголовок, мета-опис і перше зображення, а також канонічне посилання й мову. Він зчитує справжній формат і розмір зображення з файлу й порівнює їх із тегами. Ти отримуєш нейтральний попередній перегляд, таблицю всіх тегів, знахідки з коротким поясненням і запропоновані теги для копіювання. Теги, які сторінка задає лише через JavaScript, не видно. ШІ не використовується, перевірка безкоштовна, з денним лімітом.

Do4U знаходить підказки, а ти перевіряєш і вирішуєш. Попередній перегляд – це нейтральний ескіз: як платформа покаже посилання, вирішує сама платформа.