Генератор на Open Graph мета тагове

Open Graph таговете са малки парчета HTML, които определят как изглежда страницата ви, когато някой я сподели във Facebook, LinkedIn, Slack, Discord или X (Twitter). Попълнете заглавие, описание, URL, изображение и няколко опции по-долу, гледайте как прегледът на картата се обновява веднага, и копирайте генерираните <meta> тагове направо в <head> на страницата си. Всичко се случва във вашия браузър — нищо не се изпраща към сървър.

Какво представлява този инструмент?

Open Graph е протокол, създаден първоначално от Facebook, който позволява на всяка уеб страница да опише себе си чрез малък набор от тагове <meta property="og:..."> в <head> на HTML документа. Когато някой постави линка ви в социално приложение, чат или месинджър, то прочита тези тагове, за да изгради картата за преглед — заглавие, описание и миниатюра — вместо да гадае по съдържанието на страницата.

Twitter (X) използва свързан, но отделен набор от тагове, <meta name="twitter:...">, за да контролира как изглежда прегледът на линка конкретно на тази платформа. Повечето сайтове задават и двата набора: Open Graph тагове за широка съвместимост и Twitter Card тагове за прецизиране на прегледа в X (например избор на карта с голямо изображение вместо малка карта с обобщение).

Без тези тагове споделен линк или не показва преглед изобщо, или платформата се опитва да отгатне заглавие и изображение от суровото съдържание на страницата — често избирайки грешно заглавие, случайно изображение от текста или нищо. Изричното задаване на og:title, og:description и og:image ви дава пълен контрол над това как се представя съдържанието ви, преди някой да кликне.

Защо да го използвате?

Преглед на живо — вижте точно как ще изглежда картата за споделяне, докато пишете, преди да публикувате каквото и да било.
Генерира едновременно Open Graph тагове (og:title, og:description, og:image, og:url, og:type, og:site_name) и Twitter Card тагове.
Обхваща полетата, които платформите реално четат: заглавие, описание, каноничен URL, изображение, име на сайта, тип съдържание и стил на Twitter картата.
Работи изцяло в браузъра ви — заглавието, описанието и URL адресите ви никога не го напускат.
Безплатен, без вход, без ограничения — копирайте резултата и го поставете в HTML кода си.

Как да го използвате

Въведете заглавието на страницата си и кратко описание (целете се под ~60 символа за заглавието и ~155–160 за описанието).
Въведете каноничния URL на страницата и абсолютния URL на изображението за преглед (URL адресите на изображенията трябва да са напълно завършени, напр. https://example.com/image.jpg, а не относителен път).
По желание задайте името на сайта, изберете og:type (website, article, product, profile, video, music) и изберете тип Twitter Card (summary или summary_large_image).
Проверете картата за преглед на живо, за да се уверите, че заглавието, описанието и изображението изглеждат добре заедно.
Кликнете „Копирай“ и поставете генерираните <meta> тагове в <head> на страницата си, преди затварящия таг </head>.

Пример

Вход

Заглавие: „10 безплатни инструмента за разработчици, които наистина ще използвате“
Описание: „Подбран списък от инструменти в браузъра за JSON, регулярни изрази, UUID и още — без инсталация.“
URL: https://example.com/blog/dev-tools
Изображение: https://example.com/images/dev-tools-cover.jpg

Резултат

<meta property="og:title" content="10 Free Developer Tools You'll Actually Use" />
<meta property="og:description" content="A curated list of browser-based tools for JSON, regex, UUIDs and more — no install required." />
<meta property="og:url" content="https://example.com/blog/dev-tools" />
<meta property="og:image" content="https://example.com/images/dev-tools-cover.jpg" />
<meta property="og:type" content="website" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="10 Free Developer Tools You'll Actually Use" />
<meta name="twitter:description" content="A curated list of browser-based tools for JSON, regex, UUIDs and more — no install required." />
<meta name="twitter:image" content="https://example.com/images/dev-tools-cover.jpg" />

В резултата попадат само попълнените полета, така че ако оставите името на сайта празно, og:site_name просто отсъства от изхода.

Чести грешки, които да избягвате

Пълна липса на og:image — без него повечето платформи или не показват изображение в прегледа, или взимат случайно изображение от страницата, което обикновено изглежда небрежно и непрофесионално.
Използване на относителен път на изображение като /images/cover.jpg вместо пълен URL като https://example.com/images/cover.jpg — социалните роботи обикновено не могат да разрешат относителни пътища.
Грешно съотношение на страните на изображението — квадратно или портретно изображение се изрязва неудобно, когато платформите го вместят принудително в хоризонталната рамка 1,91:1; винаги проектирайте изображението за споделяне близо до 1200×630.
Заглавия или описания, които се съкращават — дръжте og:title под ~60 символа, а og:description под ~155–160 символа, за да не бъдат отрязани с многоточие на повечето платформи.
Забравяне да обновите кешираните прегледи — след промяна на og таговете на публикувана страница старият преглед може да остане в кеша на Facebook или LinkedIn, докато ръчно не принудите ново сканиране с техните инструменти за дебъгване.

Къде се използва всеки таг

og:title, og:description и og:image са трите тага, които почти всяка платформа чете, за да изгради преглед. og:url казва на роботите какъв каноничен линк да асоциират с прегледа, което е важно, ако едно и също съдържание е достъпно през няколко URL адреса. og:site_name показва малък етикет (като името на изданието или марката) над заглавието на някои платформи, например Facebook.

og:type променя какъв тип обект представлява страницата за роботите, които поддържат по-богатия обектен модел на Open Graph — например article отключва og:article:published_time и og:article:author на платформите, които ги четат, макар че повечето социални прегледи игнорират тези допълнителни полета и използват само основната троица заглавие/описание/изображение.

twitter:card контролира оформлението конкретно в X: summary показва малка квадратна миниатюра до текста, докато summary_large_image показва изображение с пълна ширина над текста — вторият вариант почти винаги е по-добрият избор за съдържание със смислено изображение за корица.

Често задавани въпроси

Какъв размер трябва да е моят og:image?

1200×630px е препоръчителният размер — достатъчно голям за дисплеи с висока плътност и близък до съотношението около 1,91:1, до което Facebook, LinkedIn и X изрязват изображението. Дръжте файла под 5–8MB, използвайте JPG или PNG и се уверете, че URL адресът на изображението е пълен абсолютен адрес, а не относителен път — повечето роботи не могат правилно да разрешат относителни пътища.

Защо прегледът ми не се показва, когато споделя линка?

Най-честите причини са: липсващ og:image, относителен вместо абсолютен URL на изображението, робот, блокиран от robots.txt, или платформата показва кеширана версия на стар преглед. Facebook и LinkedIn кешират сканираните прегледи агресивно — използвайте Sharing Debugger на Facebook или Post Inspector на LinkedIn, за да принудите ново сканиране след като обновите таговете си.

Каква е разликата между og: и twitter: таговете?

og: таговете (og:title, og:description, og:image и т.н.) са стандартът Open Graph, четен от Facebook, LinkedIn, Slack, Discord, WhatsApp и повечето други платформи. twitter: таговете са собственият формат на Twitter/X. Ако twitter:title или twitter:image липсват, X автоматично взима съответния og: таг — но изричното задаване и на двата набора ви дава повече контрол, включително избор на summary_large_image за голямо изображение в прегледа.

Какъв og:type трябва да използвам?

„website“ е безопасната стойност по подразбиране за повечето страници, включително начални страници и общо съдържание. Използвайте „article“ за блог публикации и новини (отключва допълнителни тагове, специфични за статии, като време на публикуване), „product“ за страници за електронна търговия и „profile“ за лични или потребителски профили. Типът основно влияе на това кои допълнителни Open Graph свойства са валидни, а не на това как изглежда основната карта за преглед.

Този инструмент съхранява ли или изпраща ли данните ми някъде?

Не. Цялото генериране се случва локално във вашия браузър с обикновен JavaScript. Нищо от това, което въвеждате, не се предава, записва или съхранява — затварянето на таба изчиства всичко.