Үндсэн агуулга руу очих
LibraTool logoLibraTool

Мета таг ба Open Graph үүсгэгч — үнэгүй

SEO мета тагийг, Open Graph болон Twitter Card тэмдэглэгээг шууд Google болон нийгмийн хуваалтын урьдчилан харалттайгаар үүсгэх. Хуудасны толгой хэсэгт шууд хуулах.

Ачаалагдсаны дараа офлайн ажилладаг
0 · 0/580px
0 · 0/920px

Хамгийн сайн нь: 1200×630 px, 5 MB-аас бага, үнэмлэхүй https:// холбоос.

Мөн оруулах
Гарчиг 0/580px (30-60 байвал зохимжтой)Тайлбар 0/920px (70-160 байвал зохимжтой)

Google хайлтын урьдчилан харах

example.com
Таны хуудасны гарчиг энд харагдана
Таны meta тайлбар энд харагдана. Хайлтын үр дүнгийн дарах хувиа сайжруулахын тулд сонирхол татахуйц болго.

Өргөн нь тооцоолол: Google тэмдэгтээр бус пикселээр тасалдаг.

Нийгмийн сүлжээний картын урьдчилан харах

og:image урьдчилан харах
example.com
Хуудасны гарчиг
Хуудасны тайлбар
<head> тагт буулгах

Мета тогтмол үүсгэхийн тулд дээр байгаа ядаж нэг нүдийг бөглөөрэй.

Түгээмэл хэрэглээ

  • Блог нийтлэлүүдийн мета-шошгоӨнөө найруулсан нийтлэлүүд халаатай байхаар нэрсийн тайлбар, дүрслэл, нийгмийн хаяглагчийг бүтээ.
  • Бүтээгдэхүүний хуудасны мета-шошгоТүүхий хуудсууд татаж авахдаа сайн харагддаг, сайны сорилтуудаас сайн унших боломжтой болго.
  • Ирэх хуудсын мета-шошгоКампанийн ирэх хуудсууд юу байх дүрэлдсэнээ нарийн хянан зохион байгуулаарай.
  • Аливаа web программдын хувьд мета-шошго үүсгэШинэ хуудсууд эсвэл сайтынхаа толгойн мета-шошгоны түүхэн багцыг хурдан сүлжүүлнэ.
  • Эрэлтэй холбоосуудын алдааг заснаТаны холбоосуудыг цэвэр URL хэлбэрээр сайн харуулахыг оруул — богино үзүүлэльч картаг байрлуулах шошго нэмнэ.

Хэрхэн ажилладаг

Бүх tag угсаралт, толгой-задлалт таны хөтчид шууд явагддаг — сервер хамааралгүй. Хэрэгсэл HTML мөрийг реактив байдлаар бүтээхийн тулд React-ийн useMemo, импорт/аудит онцлогийн хувьд байгаа хуудасны тэмдэглэгээг унших хөтчийн уугуул DOMParser API ашигладаг.

  1. 1
    Форм оролт амьд угсаралтыг удирддаг
    Та бичих тутамд useMemo hook шууд бүтэн tag блокыг дахин угсардаг — гарчиг, meta тайлбар, Open Graph шинж чанар, Twitter Card шинж чанар — тусгай тэмдэгтийг (&, <, >, ") escape хийж гаралтыг HTML-д шууд наахад аюулгүй болгодог.
  2. 2
    Хөтчийн URL constructor-оор URL баталгаажуулалт
    URL талбар бүр (хуудасны URL, нийгмийн сүлжээний зураг) хөтчийн суурилагдсан URL constructor-оор баталгаажуулагддаг. Зөвхөн цэгтэй хостын нэр бүхий зөв хэлбэртэй http:// эсвэл https:// хаяг тэнцэнэ; хүчингүй утга хуулах товчийг хааж, мөр доторх алдаа харуулна.
  3. 3
    Импорт: DOMParser байгаа толгой хэсгийн тэмдэглэгээг уншдаг
    Хэрэв та аудит хийхийн тулд байгаа <head> HTML-ээ буулгавал хэрэгсэл түүнийг DOMParser-ийн идэвхгүй (inert) горимоор боловсруулдаг — ямар ч script ажиллахгүй, сүлжээний хүсэлт гарахгүй. Дараа нь задарсан баримт бичгээс мэдэгдэж буй meta сонгогчдыг (og:title, twitter:description, canonical link гэх мэт) хайж, олсон зүйлээрээ форм талбаруудыг урьдчилан бөглөдөг.
  4. 4
    Амьд Google, нийгмийн картын урьдчилан харах
    Хэрэгсэл ижил форм state ашиглан Google хайлтын үр дүн, Open Graph картын урьдчилан харахыг бодит цагт зурдаг тул та гарчиг, тайлбар яг хэрхэн товчлогдохыг гаралтыг хуулахаасаа өмнө харна.

Холбоотой хэрэгслүүд

Түгээмэл асуултууд