Open Graph мета тег генераторы

Open Graph тегтері — біреу сіздің бетіңізді Facebook, LinkedIn, Slack, Discord немесе X (Twitter) арқылы бөліскенде оның қалай көрінетінін анықтайтын шағын HTML үзінділері. Төменде тақырыпты, сипаттаманы, URL, суретті және бірнеше опцияны толтырыңыз, бөлісу карточкасының алдын ала көрінісі бірден жаңарғанын байқаңыз да, жасалған <meta> тегтерін тікелей бетіңіздің <head> бөліміне көшіріп қойыңыз. Барлығы браузеріңізде орындалады — серверге ештеңе жіберілмейді.

Бұл құрал не істейді?

Open Graph — бастапқыда Facebook жасаған, кез келген веб-бетке HTML құжатының <head> бөлімінде орналасқан шағын <meta property="og:..."> тегтер жиынтығы арқылы өзін-өзі сипаттауға мүмкіндік беретін хаттама. Біреу сіздің сілтемеңізді әлеуметтік қолданбаға, чат клиентіне немесе мессенджерге қойғанда, сол қолданба бет мазмұнынан болжаудың орнына алдын ала қарау карточкасын — тақырыпты, сипаттаманы және кіші суретті — құру үшін осы тегтерді оқиды.

Twitter (X) сілтеменің алдын ала көрінісін нақты өз платформасында басқару үшін ұқсас, бірақ бөлек тег жиынтығын, <meta name="twitter:...">, пайдаланады. Көптеген сайттар екеуін де орнатады: кең үйлесімділік үшін Open Graph тегтерін және X-тегі алдын ала көріністі дәл баптау үшін Twitter Card тегтерін (мысалы, кіші жиынтық карточканың орнына үлкен сурет карточкасын таңдау).

Осы тегтерсіз бөлісілген сілтеме не мүлдем алдын ала көрініс көрсетпейді, не платформа бет мазмұнынан тақырып пен суретті болжауға тырысады — жиі қате тақырыпты, кездейсоқ енгізілген суретті немесе ештеңені таңдап алады. 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 мүлдем жоқ — онсыз көптеген платформалар не алдын ала қарау суретін көрсетпейді, не беттен кездейсоқ алынған суретке ауысады, бұл әдетте бұзылған және кәсіби емес болып көрінеді.
https://example.com/images/cover.jpg сияқты толық URL мекенжайының орнына /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 — ұсынылатын өлшем: ол жоғары пиксель тығыздығы бар дисплейлер үшін жеткілікті үлкен және Facebook, LinkedIn мен X суретті кесетін шамамен 1,91:1 аспект қатынасына сәйкес келеді. Файлды 5–8МБ-тан төмен ұстаңыз, JPG немесе PNG пайдаланыңыз және сурет URL мекенжайының салыстырмалы жол емес, толық абсолютті мекенжай екеніне көз жеткізіңіз — крауленстердің көпшілігі салыстырмалы сурет жолдарын дұрыс шеше алмайды.

Сілтемемен бөліскенде алдын ала көрінісім неге шықпайды?

Ең жиі кездесетін себептер: og:image жоқ, сурет URL мекенжайы абсолютті емес, салыстырмалы, крауленс robots.txt арқылы бұғатталған, немесе платформа ескі алдын ала көріністің кэштелген нұсқасын көрсетеді. Facebook пен LinkedIn екеуі де сканерленген алдын ала көріністерді агрессивті түрде кэштейді — тегтерді жаңартқаннан кейін қайта сканерлеуді мәжбүрлеу үшін Facebook Sharing Debugger немесе LinkedIn Post Inspector құралын пайдаланыңыз.

og: тегтері мен twitter: тегтерінің айырмашылығы неде?

og: тегтері (og:title, og:description, og:image және т.б.) Facebook, LinkedIn, Slack, Discord, WhatsApp және басқа көптеген платформалар оқитын Open Graph стандартын құрайды. twitter: тегтері — Twitter/X-тің өз форматы. Егер twitter:title немесе twitter:image болмаса, X автоматты түрде сәйкес og: тегіне ауысады — бірақ екеуін де нақты орнату сізге көбірек бақылау береді, соның ішінде үлкен алдын ала көрініс суреті үшін summary_large_image таңдау мүмкіндігі.

Қандай og:type пайдалану керек?

«website» — басты беттерді және жалпы мазмұнды қоса алғанда, көптеген беттер үшін қауіпсіз әдепкі мән. «article» блог жазбалары мен жаңалық мақалалары үшін пайдаланыңыз (ол жариялау уақыты сияқты мақалаға тән қосымша тегтерді ашады), «product» — электрондық коммерция беттері үшін, ал «profile» — жеке немесе пайдаланушы профилі беттері үшін. Түр негізінен қандай қосымша Open Graph қасиеттері жарамды екеніне әсер етеді, негізгі алдын ала көріну карточкасының сыртқы түріне емес.

Бұл құрал деректерімді бір жерге сақтайды немесе жібереді ме?

Жоқ. Барлық жасау процесі жай JavaScript көмегімен браузеріңізде жергілікті түрде орындалады. Сіз теретін ештеңе тасымалданбайды, тіркелмейді немесе сақталмайды — қойындыны жабу барлығын тазартады.