Карти за социални мрежи: 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 открива подсказки, а ти проверяваш и решаваш. Прегледът е неутрална скица: как платформата показва връзката, решава самата платформа.