Генератор на Open Graph и картички за социјални мрежи

Q: Дали да користам summary или summary_large_image?

Користете „Голема слика summary large image “ за статии, производи и целни страници со силен визуелен приказ. Користете „Мала квадратна слика summary “ кога сликата е лого или аватар што би изгледал чудно развлечен преку широка картичка.

Q: Можам ли да користам релативен URL на слика како /images/share.jpg?

Не. Роботите ги читаат ознаките надвор од контекст, па og:image и og:url мора да бидат апсолутни URL адреси со протокол и домен. Алатката ги означува релативните адреси.

Создајте Open Graph и X (Twitter) card мета ознаки со преглед во живо на тоа како изгледа вашата врска кога се споделува на Facebook, LinkedIn и X.

Наслов Опис URL на страницата URL на сликата Опис на сликата (alt текст)

Ширина на сликата (px) Висина на сликата (px)

Име на сајтот Вид на содржина Локал X (Twitter) картичка X профил на сајтот X профил на авторот

Слика за преглед Изберете или повлечете ја истата слика за да ја прегледате и да ја прочитате нејзината големина Вашите датотеки остануваат на вашиот уред: никогаш не се качуваат.

Преглед

Facebook, LinkedIn и голема X картичка

Нема слика за преглед

Мала X картичка

Нема слика за преглед

Приближни прегледи: секоја платформа ги сече сликите и го скратува текстот малку поинаку.

Генериран HTML (залепете внатре во <head>)

Проверки

Како да го користите Open Graph генераторот

Внесете Наслов и Опис што сакате да ги гледаат луѓето кога се споделува вашата врска. Можат да се разликуваат од SEO насловот: пишувајте ги за социјален фид.
Додајте URL на страницата (каноничката адреса) и URL на сликата. Двете мора да бидат апсолутни, да започнуваат со https://.
Опишете ја сликата во Опис на сликата (alt текст) за луѓето со читачи на екран да знаат што прикажува.
Изберете или повлечете ја истата слика под Слика за преглед. Останува на вашиот уред: алатката ја користи само за да ги нацрта прегледите и да ги пополни Ширина на сликата (px) и Висина на сликата (px).
Поставете Име на сајтот, Вид на содржина и Локал, па изберете стил на X (Twitter) картичка и, ако ги имате, X профилите на сајтот и авторот.
Проверете ги прегледите и списокот Проверки, па Копирај или Преземи ги ознаките и залепете ги внатре во <head> на страницата.

Што прават Open Graph ознаките

Кога врска ќе се залепи во Facebook, LinkedIn, X, Slack, Discord, WhatsApp, iMessage и многу други апликации, роботот ја презема страницата и ги чита нејзините Open Graph (og:) мета ознаки за да изгради картичка: слика, наслов, краток опис и домен. Без овие ознаки апликацијата погодува, често избирајќи лого, банер за колачиња или првата реченица од менито.

Четирите основни својства се og:title, og:type, og:image и og:url. Оваа алатка додава и og:description, og:site_name, og:locale и деталите за сликата (og:image:width, og:image:height, og:image:alt). Декларирањето на големината на сликата им овозможува на некои платформи да ја прикажат картичката уште при првото споделување, наместо да чекаат сликата да се преземе.

X ги чита сопствените ознаки twitter:, но се враќа на Open Graph насловот, описот и сликата кога X верзиите недостасуваат, па алатката го додава само она што му треба на X: twitter:card, незадолжителните профили и описот на сликата. Така се избегнува дуплирање на секоја вредност.

Големини на слики што работат насекаде

Намена	Препорачана големина	Забелешки
Голема картичка (Facebook, LinkedIn, голема слика на X)	1200 × 630 px	Однос околу 1,91:1; текстот држете го во центарот
Мала X картичка (summary)	најмалку 144 × 144 px	Се прикажува како квадрат, исечена од центарот
Минимум на Facebook	200 × 200 px	Помали слики може да се игнорираат

Користете JPEG или PNG, држете ја датотеката разумно мала (многу под 5 MB) и избегнувајте важен текст блиску до рабовите, бидејќи секоја платформа сече малку поинаку. Прегледите во оваа алатка се приближни приказ на тие распореди, а не слики од екран.

По објавувањето

Социјалните платформи ги кешираат прегледите на врски, понекогаш со денови. Откако ќе ги смените ознаките, побарајте од нив повторно да ја прочитаат страницата со Facebook Sharing Debugger или LinkedIn Post Inspector. Страницата мора да биде јавно достапна: роботите не можат да ги видат страниците зад најава или на localhost.

Сè се одвива во вашиот прелистувач: ништо што го впишувате не се испраќа на сервер.

Често поставувани прашања

Дали Open Graph ознаките го подобруваат SEO?

Не директно. Пребарувачите не ги користат како фактор на рангирање. Тие го подобруваат изгледот на вашите врски кога се споделуваат, што може да донесе повеќе кликови и посети од социјални мрежи и апликации за пораки.

Зошто мојата стара слика сè уште се појавува кога ја споделувам врската?

Платформата ја кеширала претходната верзија. Повторно прочитајте го URL-то со алатката за дебагирање на платформата или додајте низа за пребарување на URL на сликата (на пример ?v=2) за да се третира како нова датотека.

Дали да користам summary или summary_large_image?

Користете „Голема слика (summary_large_image)“ за статии, производи и целни страници со силен визуелен приказ. Користете „Мала квадратна слика (summary)“ кога сликата е лого или аватар што би изгледал чудно развлечен преку широка картичка.

Можам ли да користам релативен URL на слика како /images/share.jpg?

Не. Роботите ги читаат ознаките надвор од контекст, па og:image и og:url мора да бидат апсолутни URL-адреси со протокол и домен. Алатката ги означува релативните адреси.

Дали мојата слика се качува?

Не. Сликата што ја избирате за преглед ја чита само вашиот прелистувач и никогаш не се испраќа никаде. Самите ознаки го содржат само URL-то на сликата што сте го впишале.