ຂ້າມໄປຫາເນື້ອຫາຫຼັກ

ຕົວສ້າງ Meta Tag & Open Graph ຟຣີ

ສ້າງ SEO meta tag, Open Graph ແລະ Twitter Card markup ພ້ອມ Google live ແລະ ຕົວຢ່າງ social-share. ຄັດລອກ paste ໃສ່ head ຂອງໜ້າ.

ເຮັດວຽກແບບອອບໄລນ໌ໄດ້ຫຼັງໂຫຼດແລ້ວ
0 · 0/580px
0 · 0/920px

ດີທີ່ສຸດ: 1200×630 px, ນ້ອຍກວ່າ 5 MB, ລິ້ງ https:// ແບບເຕັມ.

ໃສ່ເພີ່ມ
ຫົວຂໍ້ 0/580px (ເປົ້າໝາຍ 30-60)ຄຳອະທິບາຍ 0/920px (ເປົ້າໝາຍ 70-160)

ການ preview ຄົ້ນຫາ Google

example.com
ຫົວຂໍ້ໜ້າຂອງທ່ານຈະປາກົດຢູ່ນີ້
Meta description ຂອງທ່ານຈະປາກົດຢູ່ນີ້. ເຮັດໃຫ້ດຶງດູດໃຈເພື່ອປັບປຸງ click-through rate ຈາກຜົນການຄົ້ນຫາ.

ຄວາມກວ້າງເປັນຄ່າປະມານ: Google ຕັດຕາມພິກເຊວ ບໍ່ແມ່ນຕາມຈຳນວນໂຕອັກສອນ.

ການ preview social card

ການ preview og:image
example.com
ຫົວຂໍ້ໜ້າ
ຄຳອະທິບາຍໜ້າ
ວາງໃນ <head>

ຕື່ມໃນບ່ອນໜ້ອຍສົ່ວນໜຶ່ງຂ້າງເທິງເພື່ອສ້າງ meta tags

ການນຳໃຊ້ທົ່ວໄປ

  • Meta Tags ສຳລັບບົດຄວາມທີ່ຢູ່ໃນ Blogສ້າງແທັກຫົວຂໍ້, ຄຳອະທິບາຍ ແລະ ໂຊຊຽວ ເພື່ອໃຫ້ບົດຄວາມຂອງທ່ານເບິ່ງດີເມື່ອຖືກແບ່ງປັນ.
  • Meta Tags ສຳລັບໜ້າສີນຄ້າໃຫ້ໜ້າສິນຄ້າຂອງທ່ານມີລັກສະນະທີ່ດີເມື່ອແບ່ງປັນ ແລະອ່ານໄດ້ດີໃນຜົນລັບການຊອກຫາ.
  • Meta Tags ສຳລັບໜ້າລົງຄວບຄຸມວິທີທີ່ໜ້າລົງແຜນການໃຫ້ບໍລິການຂອງທ່ານປາກົດໂດຍວ່າເມື່ອໄດ້ຮັບການແບ່ງປັນ ແລະຊອກຫາ.
  • ສ້າງ Meta Tag ສຳລັບເວັບແອັບໃດໆສ້າງຊຸດ meta tags ແບບສົມບູນໃນ head ໄວ້ສຳລັບໜ້າ ຫຼືເວັບໄຊທ໌ໃໝ່.
  • ແກ້ໄຂການເບິ່ງຕົວຢ່າງລິ້ງຢຸດໃຫ້ລິ້ງຂອງທ່ານປາກົດເປັນ URLs ຫວ່າງ — ເພີ່ມ tags ທີ່ສ້າງບັດຕົວຢ່າງທີ່ອຸດົມສົມບູນ.

ມັນເຮັດວຽກແນວໃດ

ການປະກອບແທັກ ແລະ ການແຍກວິເຄາະ head ທັງໝົດເກີດຂຶ້ນໂດຍກົງໃນບຣາວເຊີຂອງທ່ານ — ບໍ່ມີເຊີບເວີກ່ຽວຂ້ອງ. ເຄື່ອງມືໃຊ້ React useMemo ເພື່ອສ້າງສະຕຣິງ HTML ແບບໂຕ້ຕອບ ແລະ DOMParser API ພື້ນເມືອງຂອງບຣາວເຊີເພື່ອອ່ານມາກອັບໜ້າທີ່ມີຢູ່ແລ້ວສຳລັບຄຸນສົມບັດນຳເຂົ້າ/ກວດສອບ.

  1. 1
    ຂໍ້ມູນນຳເຂົ້າຂອງຟອມຂັບເຄື່ອນການປະກອບແບບສົດ
    ໃນຂະນະທີ່ທ່ານພິມ, hook useMemo ຈະປະກອບບລັອກແທັກເຕັມທັນທີ — ຫົວຂໍ້, ຄຳອະທິບາຍ meta, ຄຸນສົມບັດ Open Graph, ແລະ ຄຸນສົມບັດ Twitter Card — escape ຕົວອັກສອນພິເສດ (&, <, >, ") ດັ່ງນັ້ນຜົນລັບຈຶ່ງປອດໄພທີ່ຈະວາງໂດຍກົງໃນ HTML.
  2. 2
    ການກວດສອບ URL ຜ່ານ constructor URL ຂອງບຣາວເຊີ
    ແຕ່ລະຊ່ອງ URL (URL ໜ້າ, ຮູບພາບສັງຄົມ) ຖືກກວດສອບໂດຍໃຊ້ constructor URL ທີ່ມີໃນຕົວບຣາວເຊີ. ມີແຕ່ທີ່ຢູ່ http:// ຫຼື https:// ທີ່ຖືກຮູບແບບ ພ້ອມ hostname ແບບຈຸດ ຈຶ່ງຈະຜ່ານ; ຄ່າທີ່ບໍ່ຖືກຕ້ອງຈະບລັອກປຸ່ມຄັດລອກ ແລະ ສະແດງຂໍ້ຜິດພາດ inline.
  3. 3
    ນຳເຂົ້າ: DOMParser ອ່ານມາກອັບ head ທີ່ມີຢູ່ແລ້ວ
    ຖ້າທ່ານວາງ HTML <head> ທີ່ມີຢູ່ແລ້ວເພື່ອກວດສອບມັນ, ເຄື່ອງມືຈະໃຫ້ມັນຜ່ານ DOMParser ໃນໂໝດ inert — ບໍ່ມີສະຄຣິບຖືກປະຕິບັດ ແລະ ບໍ່ມີການຮ້ອງຂໍເຄືອຂ່າຍ. ຈາກນັ້ນມັນຄົ້ນຫາເອກະສານທີ່ແຍກວິເຄາະສຳລັບ selector meta ທີ່ຮູ້ຈັກ (og:title, twitter:description, canonical link, ອື່ນໆ) ແລະ ຕື່ມຊ່ອງຟອມລ່ວງໜ້າດ້ວຍສິ່ງທີ່ພົບ.
  4. 4
    ຕົວຢ່າງ Google ແລະ ບັດສັງຄົມແບບສົດ
    ເຄື່ອງມືສະແດງຜົນລັບການຄົ້ນຫາ Google ທີ່ມີສະໄຕລ໌ ແລະ ຕົວຢ່າງບັດ Open Graph ແບບສົດໂດຍໃຊ້ສະຖານະຟອມດຽວກັນ, ດັ່ງນັ້ນທ່ານຈຶ່ງເຫັນວ່າຫົວຂໍ້ ແລະ ຄຳອະທິບາຍຈະຖືກຕັດແນວໃດກ່ອນຄັດລອກຜົນລັບ.

ເຄື່ອງມືທີ່ກ່ຽວຂ້ອງ

ຄໍາຖາມທີ່ຖາມເລື້ອຍໆ