OG & Twitter Card Генератор — Инструмент за изграждане, одит и визуализация на мета тагове
Изградете готови за поставяне Open Graph и Twitter Card <meta> тагове от формуляр или поставете съществуващ <head>, за да го одитирате за липсващи тагове, дължина на заглавие/описание и валидност на twitter:card — след това визуализирайте и двете в реалистично пресъздадени макети на визуализации на връзки за Twitter/X, Facebook, LinkedIn и Discord.
🔒 Обработва се изцяло във вашия браузър - нищо, което въвеждате тук, никога не се качва.
Резултат
Open Graph и Twitter Card meta таговете определят как изглежда даден линк в момента, в който бъде поставен в Slack, iMessage, туит или Discord канал — заглавие, описание и изображение, избрани от собствения <head> на страницата, а не от това, което платформата случайно извлече от видимия текст. Този инструмент е едновременно строител и одитор, а не шаблонен пълнител. В режим BUILD попълнете заглавие, описание, URL на изображение, каноничен URL, тип съдържание и тип Twitter карта, и той съставя точния блок от <meta property="og:..."> и <meta name="twitter:..."> тагове, готов за поставяне в <head> на вашата страница, като пропуска всяко поле, което оставите празно, вместо да генерира празни тагове без съдържание.
В режим AUDIT поставете съществуващата си <head> част от кода или целия HTML на страницата и инструментът го анализира с вградения DOMParser на браузъра, за да извлече всеки вече наличен og: и twitter: мета таг, след което изпълнява проверките, които наистина имат значение: четирите обичайно задължителни тага (og:title, og:description, og:image, og:url) се маркират, ако липсват; og:title се измерва спрямо точката от около 60 знака, при която някои платформи започват изрязване, и около 90 знака, при която повечето ще го направят; og:description се измерва спрямо диапазона от около 155 до 200 знака, който повечето платформи позволяват преди изрязване; twitter:card се проверява спрямо четирите реални стойности, които валидаторът на Twitter Card приема — summary, summary_large_image, app, player — и се маркира, ако е нещо друго; и дублиращите се тагове (едно и също свойство, декларирано два пъти, изненадващо често срещана грешка при копиране) се изброяват по име.
Размерите на изображенията получават честно отношение: този инструмент не може да провери действителния размер в пиксели на вашето изображение, без да го изтегли, и той умишлено никога не прави това, в съответствие с политиката на този сайт за липса на външни заявки. Ако вашият HTML вече декларира og:image:width и og:image:height, тези декларирани числа се проверяват спрямо широко препоръчвания минимум от 1200×630; ако не, получавате ясна насочваща бележка вместо изфабрикувано преминаване или провал. И двата режима визуализират едни и същи четири макета на визуализация на връзка — Twitter/X (превключващ между своя компактен "summary" изглед с миниатюра и широкия "summary_large_image" изглед в зависимост от стойността на twitter:card), Facebook, LinkedIn и Discord — всеки реалистично пресъздаден, за да съответства на типографията и конвенциите за изглед на съответната платформа, вместо една кутия с различно лого, и всеки е ясно обозначен като илюстративно приближение за целите на планирането, тъй като реалните платформи променят с времето визуалния си облик на визуализациите и този инструмент никога не ги изтегля или сканира, за да провери.