Басты бетҚұралдарOpen Graph генераторы
Open Graph генераторы сілтеме көрінісімен
Тақырып, сипаттама, URL мен суретті толтырыңыз — құрал Open Graph және Twitter Cards мета тегтерін жасайды, сілтеменің лентада және мессенджерде қалай көрінетінін көрсетеді, жиі қателерді табады: салыстырмалы og:image, SVG, тым кішкентай сурет, og:locale пішімінің қатесі.
—
Лентадағы үлкен карточка
Ықшам карточка
Мессенджердегі көрініс
Макеттер шамамен ғана: әр әлеуметтік желі мен мессенджер (WhatsApp, Telegram, Instagram) мәтін мен суретті өзінше қияды және сілтеме алғаш бөлісілгеннен кейін карточканы кэште сақтайды.
<head> үшін тегтер
Барлығы браузеріңізде есептеледі — енгізген деректеріңіз ешқайда жіберілмейді.
Қалай пайдалану керек
- Өрістерді толтырыңызТақырып пен сипаттаманы іздеу жүйесі үшін емес, лентаны айналдырып отырған немесе сілтемені мессенджерде алған адам үшін жазыңыз: олар беттің title мен meta description-нан өзгеше болуы мүмкін.
- Суретті тексеріңізog:image толық URL-ін енгізіп, «Суретті тексеру» батырмасын басыңыз немесе файл таңдаңыз — құрал өлшем мен арақатынасты көрсетеді.
- Көріністерді қараңызҮлкен карточка, ықшам карточка және мессенджер көрінісі мәтін қай жерден қиылатынын және сурет қалай кесілетінін көрсетеді.
- Тегтерді көшіріңізБлокты <head> ішіне қойыңыз. Сілтеме бұрын бөлісілген болса, желінің дебаггерінде кэшті жаңартыңыз — әйтпесе ескі карточка көрсетіле береді.
Open Graph деген не және қандай тегтер міндетті
Open Graph — Facebook жасаған белгілеу протоколы: <head> ішіндегі мета тегтер біреу сілтемемен бөліскенде қандай тақырып, сипаттама және сурет көрсету керегін сервистерге айтады. Қазір оны әлеуметтік желілер, мессенджерлер, командалық чаттар мен іздеу жүйелері — барлығы дерлік оқиды.
ogp.me спецификациясы төрт міндетті қасиетті атайды: og:title, og:type, og:image және og:url. Іс жүзінде og:description, og:site_name, og:locale және og:image:alt қосылады.
X (Twitter) желісінің өз twitter:* тегтері бар, бірақ олар жоқ болса, Open Graph-ты оқиды. Сондықтан twitter:card — карточка түрін — және қаласаңыз, аккаунтыңыз бар twitter:site тегін қою жеткілікті.
og:image өлшемі: 1200 × 630 және 1,91:1 арақатынасы
Үлкен карточка үшін 1200 × 630 px суретті қолданыңыз — бұл Meta-ның сілтемемен бөлісуге арналған ұсынысы, ал бұл арақатынасты (1,91:1) сервистердің көбі қимай көрсетеді. Құрал тексеретін ережелер:
- Толық URL.
og:imagehttps:// және доменнен басталуы керек — желілер/og.pngсияқты салыстырмалы жолдарды ашпайды. - Растрлық пішім. PNG, JPEG, WebP немесе GIF. SVG қолдау көрсетілмейді.
- Кемінде 200 × 200 px, әйтпесе үлкен карточка болмайды; X бір жағы 4096 px-ке дейінгі және 5 МБ-тан кіші суреттерді қабылдайды.
- Ықшам карточка (
summary) суретті шаршы етіп көрсетеді — кемінде 144 × 144 px шаршы суретті қолданыңыз. - Маңыздысын ортаға қойыңыз. Лента мен мессенджерлер шеттерді әртүрлі қияды; мәтінді шетке жақын қоймаңыз.
og:image:width және og:image:height тегтерімен карточка сурет жүктелмей тұрып-ақ бірден салынады. Құрал оларды өлшем тексерілгеннен кейін қосады.
Жиі кездесетін қателер және көрініс кэші
- Сызықшасы бар og:locale. Пішімі — астын сызумен тіл мен аумақ:
kk_KZ, орыс тіліндегі беттер үшінru_KZ. Бұл сызықша қолданатын hreflang-тан өзгеше (kk-KZ) — hreflang генераторын қараңыз. - Бүкіл сайтқа бір сурет. Әртүрлі беттердің карточкалары бір-бірінен ажыратылмайды. Кемінде негізгі беттерге жеке сурет жасаңыз.
- JavaScript арқылы қосылған тегтер. Әлеуметтік желі роботтарының көбі скрипттерді орындамайды: тегтер сервер қайтаратын HTML-де болуы керек.
- Түзетуден кейінгі ескі карточка. Желілер көріністі кэште сақтайды. Тегтерді өзгерткен соң желінің дебаггерінде деректерді жаңартыңыз немесе сурет URL-іне нұсқа параметрін қосыңыз (
og.png?v=2). - Авторизация артындағы немесе роботтарға жабық сурет. Файлдың cookie-сіз ашылатынын және robots.txt-те жабылмағанын тексеріңіз — бұған robots.txt тексерушісі көмектеседі.
Дереккөздер
- The Open Graph protocol — ogp.me.
- X Developer Platform. Cards markup reference; Summary Card with Large Image — developer.x.com.
- Meta for Developers. Sharing best practices for websites — developers.facebook.com.
Жиі қойылатын сұрақтар
Қандай Open Graph тегтері міндетті?
ogp.me спецификациясы бойынша: og:title, og:type, og:image және og:url. Іс жүзінде og:description, og:site_name, og:locale және og:image:alt, сондай-ақ X үшін twitter:card қосылады.
og:image қандай өлшемде болуы керек?
1200 × 630 px, арақатынасы 1,91:1. Бір жағы 200 px-тен кіші болса, үлкен карточка болмайды. Ықшам summary карточкасына шаршы сурет керек.
Twitter (X) үшін бөлек тегтер керек пе?
Жоқ. twitter:title, twitter:description және twitter:image болмаса, X og:title, og:description және og:image тегтерін оқиды. twitter:card қосу жеткілікті.
Неге желі әлі де ескі суретті көрсетеді?
Көріністер кэште сақталады. Тегтерді өзгерткен соң желінің дебаггерінде карточканы жаңартыңыз немесе сурет URL-ін өзгертіңіз, мысалы ?v=2 қосыңыз.
og:image үшін SVG қолдануға бола ма?
Жоқ, SVG қолдау көрсетілмейді. PNG, JPEG немесе WebP қолданыңыз.
og:locale қалай жазылады?
Астын сызумен тіл мен аумақ: қазақ тіліндегі бет үшін kk_KZ, Қазақстанға арналған орыс тіліндегі бет үшін ru_KZ. Сызықшасы бар нұсқа (kk-KZ) Open Graph үшін емес, hreflang пен lang атрибутына арналған.
Деректерім серверге жіберіле ме?
Жоқ. Тегтер браузеріңізде жасалады. URL бойынша суретті браузеріңіз тікелей сайтыңыздан және тек батырманы басқанда жүктейді; таңдалған файл компьютеріңізде қалады.
«SEO» бөлімінде тағы
- Сниппетті алдын ала қарау
Тақырып пен сипаттама Google-да қалай көрінеді және қысқартыла ма?
- Мәтіннің оқылуын тексеру
Бұл мәтінді оқу қаншалықты қиын және қай сөйлемдер тым ұзын?
- robots.txt генераторы және тексерушісі
Қай robots.txt ережесі бұл URL-ды белгілі бір роботқа тыйым салады немесе рұқсат етеді?
- hreflang генераторы
Беттің тілдік нұсқаларын қандай hreflang тегтері байланыстырады?
- UTM генераторы
Әр науқан мен арнаға бірізді UTM сілтемелерін қалай жасауға болады?
- UTM-белгілі QR-кодтар
Қай стенд, парақша немесе постер келушілер әкелді — және әрқайсысына QR-кодты қалай белгілеуге болады?