Негізгі мазмұнға өту

Meta тег және Open Graph генераторы — тегін

SEO meta тегтерін, Open Graph және Twitter Card белгілеуін тірі Google және әлеуметтік бөлісу алдын ала қараумен жасаңыз. Тікелей бет басына қойыңыз.

Жүктелгеннен кейін офлайн жұмыс істейді
0 · 0/580px
0 · 0/920px

Ең жақсысы: 1200×630 px, 5 МБ-тан аз, абсолютті https:// сілтемесі.

Сондай-ақ қосу
Тақырып 0/580px (ұсынылған 30-60)Сипаттама 0/920px (ұсынылған 70-160)

Google іздеу алдын ала қарауы

example.com
Беттің тақырыбы осында көрінеді
Мета сипаттама осында көрінеді. Іздеу нәтижелерінен өту жылдамдығын арттыру үшін тартымды жасаңыз.

Ендер болжамды: Google таңбамен емес, пикселмен қияды.

Әлеуметтік карта алдын ала қарауы

og:image алдын ала қарауы
example.com
Бет тақырыбы
Бет сипаттамасы
<head> тегіне қойыңыз

Мета тегтер құру үшін жоғарыда кем дегенде бір өрісті толтырыңыз.

Жиі қолданылуы

  • Блог Құсалмаларына Арналған Мета ТеглерМақалаларыңыз ортақ болғанда жақсы көрінуі үшін атау, сипаттама және әлеуметтік теглер түзіңіз.
  • Өнім Беттеріне Арналған Мета ТеглерӨнім беттерін ағымсыз түрде ортақтастырыңыз және іздеу нәтижелерінде жақсы оқылатындай етіңіз.
  • Енгізу Беттеріне Арналған Мета ТеглерӨндіктік беттеріңіз ортақ және іздегенде қалай көрінетінін дәл төлеңіз.
  • Кез келген Веб Қосымшасына Арналған Мета Теглер ТүзіңізЖаңа парақ немесе сайт үшін толық мета теглер жиынтығын тез құрастырыңыз.
  • Ешкім Көрінетін Сілтеме Алдын Ала ҚарауСілтемелеріңіз танқы URL түрінде көрінуіне қарсы тұрыңыз — құрлы алдын ала қарау карточкалар құрайтын теглер қосыңыз.

Қалай жұмыс істейді

Барлық тег жинақтау мен тақырып-талдау тікелей браузеріңізде жүреді — сервер қатыспайды. Құрал HTML жолдарын реактивті түрде құрастыру үшін React-тың useMemo-ін және импорт/аудит мүмкіндігі үшін бар бет белгілеуін оқу үшін браузердің нативті DOMParser API-ын пайдаланады.

  1. 1
    Форма кірісі тірі жинақтауды басқарады
    Терген кезде, useMemo хугі толық тег блогын — тақырыпты, мета сипаттаманы, Open Graph қасиеттерін және Twitter Card атрибуттарын — дереу қайта жинақтайды, арнайы таңбаларды (&, <, >, ") қашырады, сондықтан шығыс HTML-ге тікелей қоюға қауіпсіз.
  2. 2
    Браузердің URL конструкторы арқылы URL тексеруі
    Әр URL өрісі (бет URL-і, әлеуметтік кескін) браузердің кірістірілген URL конструкторымен тексеріледі. Тек дұрыс құрылымдалған http:// немесе https:// нүктелі хост атаулары бар мекенжайлар өтеді; жарамсыз мәндер көшіру түймесін бұғаттайды және инлайн қате көрсетеді.
  3. 3
    Импорт: DOMParser бар тақырып белгілеуін оқиды
    Оны аудиттеу үшін бар <head> HTML-ды қойсаңыз, құрал оны инерт режимде DOMParser арқылы жүргізеді — ешбір скрипт орындалмайды, ешбір желілік сұрау жасалмайды. Содан кейін ол талданған құжаттан белгілі мета селекторларды (og:title, twitter:description, канондық сілтеме және т.б.) сұрайды және тапқанымен форма өрістерін алдын ала толтырады.
  4. 4
    Тірі Google және әлеуметтік карта алдын ала қаралары
    Құрал стильденген Google іздеу нәтижесі мен Open Graph карта алдын ала қараулары дәл сол форма күйін пайдаланып нақты уақытта өңдейді, сондықтан шығысты көшірмес бұрын тақырып пен сипаттаманың қалай қысқартылатынын дәл көре аласыз.

Байланысты құралдар

Жиі қойылатын сұрақтар