Անցնել հիմնական բովանդակությանը

Meta tag ու Open Graph գեներատոր անվճար

Ստեղծեք SEO meta tag-ներ, Open Graph ու Twitter Card markup ուղիղ Google ու սոցիալական կիսման նախադիտմամբ: Ուղղ մտցրեք ձեր page head-ի մեջ:

Աշխատում է անցանց՝ բեռնվելուց հետո
0 · 0/580px
0 · 0/920px

Լավագույնը՝ 1200×630 px, 5 ՄԲ-ից պակաս, բացարձակ https:// հղում։

Նաև ներառել
Վերնագիր 0/580px (նպատակ՝ 30-60)Նկարագրություն 0/920px (նպատակ՝ 70-160)

Google որոնման նախադիտում

example.com
Ձեր էջի վերնագիրը հայտնվում է այստեղ
Ձեր meta նկարագրությունը հայտնվում է այստեղ: Գրեք գրավիչ, որպեսզի բարելավեք անցումների տոկոսը:

Լայնությունները մոտավոր են. Google-ը կտրում է ըստ պիքսելների, ոչ թե նիշերի։

Սոցիալական քարտի նախադիտում

og:image նախադիտում
example.com
Էջի վերնագիր
Էջի նկարագրություն
Տեղադրեք ձեր <head>-ում

Վերևում լրացրեք առնվազն մեկ դաշտ՝ մետա պիտակներ ստեղծելու համար:

Տարածված կիրառություններ

  • Blog Posts-ի համար Meta TagsՍտեղծեք վերնագիր, նկարագրություն և սոցիալական պիտակներ, որպեսզի ձեր հոդվածները լավ լինեն, երբ կիսվեն:
  • Ապրանքային Էջերի համար Meta TagsԿազմեք ապրանքային էջերը գեղեցիկ կիսման և լավ ընթերցման որոնման արդյունքներում:
  • Landing Pages-ի համար Meta TagsՃշգրիտ վերահսկեք, թե ինչպես են ցուցադրվում ձեր landing pages-ը կիսվածից և որոնածից:
  • Ցանկացած Web App-ի համար Meta Tags ՍտեղծեքԱրագ մշակեք head meta tags-ի ամբողջ հավաքածուն նոր էջի կամ կայքի համար:
  • Շատ Վատ Link Previews-ի մեջ Դրոշ ՇինելԿանգնեցրեք ձեր հղումներից թվացել անգործ URL-ների նման — ավելացրեք պիտակներ, որոնք ստեղծում են հարուստ preview cards:

Ինչպես է այն աշխատում

Ամբողջ պիտակների հավաքումն ու head-վերլուծությունը տեղի են ունենում ուղղակիորեն ձեր դիտարկիչում — ոչ մի սերվեր ներգրավված չէ։ Գործիքն օգտագործում է React-ի useMemo-ն HTML տողերը ռեակտիվորեն կառուցելու համար և դիտարկիչի բնիկ DOMParser API-ն՝ ներմուծում/աուդիտ հատկանիշի համար գոյություն ունեցող էջի նշագրումը կարդալու համար։

  1. 1
    Ձևի մուտքագրումը վարում է կենդանի հավաքումը
    Երբ մուտքագրում եք, useMemo կրպակն անմիջապես վերահավաքում է ամբողջ պիտակի բլոկը — վերնագիր, meta նկարագրություն, Open Graph հատկություններ և Twitter Card հատկանիշներ — փախուստավորելով հատուկ նիշերը (&, <, >, ')՝ որպեսզի ելքն անվտանգ լինի ուղղակիորեն HTML-ում փակցնելու համար։
  2. 2
    URL վավերացում դիտարկիչի URL կոնստրուկտորով
    Յուրաքանչյուր URL դաշտ (էջի URL, սոցիալական պատկեր) վավերացվում է դիտարկիչի ներկառուցված URL կոնստրուկտորով։ Միայն ճիշտ ձևավորված http:// կամ https:// հասցեները կետավոր հոսթանուններով անցնում են. անվավեր արժեքները արգելափակում են պատճենման կոճակը և ցույց են տալիս ներգծված սխալ։
  3. 3
    Ներմուծում. DOMParser-ը կարդում է գոյություն ունեցող head նշագրումը
    Եթե փակցնում եք գոյություն ունեցող <head> HTML՝ այն աուդիտելու համար, գործիքն այն գործարկում է DOMParser-ով անգործուն ռեժիմում — ոչ մի script չի կատարվում, և ոչ մի ցանցային հարցում չի կատարվում։ Այն ապա հարցում է կատարում վերլուծված փաստաթղթին հայտնի meta ընտրիչների համար (og:title, twitter:description, canonical հղում և այլն) և նախապես լրացնում է ձևի դաշտերը իր գտածով։
  4. 4
    Կենդանի Google և սոցիալական քարտի նախադիտումներ
    Գործիքը մատուցում է ոճավորված Google որոնման արդյունք և Open Graph քարտի նախադիտում իրական ժամանակում՝ օգտագործելով նույն ձևի վիճակը, ուստի կարող եք ճշգրիտ տեսնել, թե ինչպես կկրճատվեն վերնագիրն ու նկարագրությունը մինչև ելքը պատճենելը։

Առնչվող գործիքներ

Հաճախակի տրվող հարցեր