ຄັດລອກ & ວາງ ພ້ອມຕົວຢ່າງການສະແດງຜົນ ລວມເຄັດລັບຮູບພາບ/ແຄຊ

ເຄື່ອງມືສ້າງ OGP Tag (ສ້າງ og:title/og:image ແລະ ອື່ນໆ ອັດຕະໂນມັດ)

Q: "ຄວນລວມ Twitter Card tags ນຳຫຼືບໍ່?"

"ແມ່ນແລ້ວ. ສາມາດສ້າງ twitter:card ແລະ tags ທີ່ກ່ຽວຂ້ອງໄປພ້ອມກັນໄດ້. X ສາມາດດຶງຂໍ້ມູນຈາກ OG tags ໄດ້, ດັ່ງນັ້ນການຕັ້ງຄ່າແບບພື້ນຖານກໍຍັງໃຊ້ງານໄດ້."

Q: "ຂະໜາດຮູບພາບທີ່ແນະນຳແມ່ນເທົ່າໃດ?"

"ໂດຍທົ່ວໄປ Meta ແນະນຳ 1200×630 ຫຼື ໃຫຍ່ກວ່າ ແລະ ອັດຕາສ່ວນໃກ້ຄຽງ 1.91:1. ສ່ວນ X summary_large_image ຈະມີອັດຕາສ່ວນ ແລະ ຂະໜາດຂັ້ນຕ່ຳທີ່ຕ່າງກັນ. ໃຫ້ເລືອກຕາມແພລັດຟອມເປົ້າໝາຍ."

Q: "ຕົວຢ່າງການສະແດງຜົນບໍ່ອັບເດດ"

"ສ່ວນໃຫຍ່ແມ່ນເກີດຈາກແຄຊ. ໃຫ້ດຶງຂໍ້ມູນໃໝ່ຜ່ານ debugger/inspector ແລະ ຫາກມີການປ່ຽນຮູບ, ໃຫ້ໃຊ້ URL ຮູບໃໝ່."

ປ້ອນ URL, ຫົວຂໍ້, ລາຍລະອຽດ ແລະ URL ຮູບພາບ ເພື່ອສ້າງ meta tags ສຳລັບ Open Graph ແລະ Twitter Card ພ້ອມກັນ.

ການດຶງຂໍ້ມູນເຮັດວຽກພາຍໃນບຣາວເຊີໂດຍກົງ (ອາດຈະມີຂໍ້ຈຳກັດ CORS).

ຂໍ້ມູນເຂົ້າ

Meta tags ທີ່ສ້າງຂຶ້ນ / ຕົວຢ່າງການສະແດງຜົນ

1) ຂໍ້ມູນຫຼັກ

ຈຳເປັນ

ຫົວຂໍ້ (og:title) ຈຳເປັນ

ຄຳແນະນຳ: 30–60 ຕົວອັກສອນ 0

ລາຍລະອຽດ (og:description) ຕົວເລືອກ

ຄຳແນະນຳ: 80–120 ຕົວອັກສອນ 0

URL ຂອງຮູບພາບ (og:image) ຈຳເປັນ

ຮູບຕົວຢ່າງຈະສະແດງຂຶ້ນເມື່ອຮູບໂຫຼດສຳເລັດ.

ອັດຕາສ່ວນປັດຈຸບັນ -

ຊື່ເວັບໄຊ (og:site_name) ຕົວເລືອກ

ປະເພດ (og:type) ຈຳເປັນ

ເລືອກເປັນ website ຫຼື article.

2) Twitter Card

ຫຍໍ້ໄດ້ / ເປີດໄວ້ໂດຍເລີ່ມຕົ້ນ

ລວມ Twitter Card tags

twitter:card

twitter:site (ຕົວເລືອກ)

twitter:creator (ຕົວເລືອກ)

ກົດການຊິງຄ໌ອັດຕະໂນມັດ

• ຫາກ twitter:title ວ່າງ, ຈະໃຊ້ og:title ແທນ.
• ຫາກ twitter:description ວ່າງ, ຈະໃຊ້ og:description ແທນ.
• ຫາກ twitter:image ວ່າງ, ຈະໃຊ້ og:image ແທນ.

3) ຂັ້ນສູງ

ເປີດສະເພາະຫາກຕ້ອງການປັບແຕ່ງລະອຽດ.

og:locale (ຕົວເລືອກ)

og:image:alt / twitter:image:alt

ຂໍ້ຄວາມສຳລັບການເຂົ້າເຖິງ (Accessibility). ບໍ່ເກີນ 420 ຕົວອັກສອນ.

og:image:width

og:image:height

ການເພີ່ມຄວາມກວ້າງ/ຄວາມສູງ ຊ່ວຍໃຫ້ crawler ສະແດງຜົນໄດ້ໄວຂຶ້ນ.

Article tags (ສະເພາະເມື່ອ og:type=article)

article:published_time

article:modified_time

ໃຊ້ຮູບແບບ ISO 8601 ຫາກຈຳເປັນ.

Meta tags ທີ່ສ້າງຂຶ້ນ

ຕົວຢ່າງການສະແດງຜົນ

ຕົວຢ່າງ OG

example.com

ຫົວຂໍ້ຕົວຢ່າງ

ລາຍລະອຽດຈະສະແດງຢູ່ບ່ອນນີ້.

SNS ແລະ ແອັບແຊັດສ່ວນໃຫຍ່ຈະສະແດງຜົນຄ້າຍຄືແບບນີ້

ຕົວຢ່າງ X card summary

example.com

ຫົວຂໍ້ຕົວຢ່າງ

ລາຍລະອຽດຈະສະແດງຢູ່ບ່ອນນີ້.

ສະຫຼັບລະຫວ່າງ summary ແລະ summary_large_image

ໝາຍເຫດ (ຕົວເລືອກ)

ໝາຍເຫດຈະສະແດງຢູ່ບ່ອນນີ້ຕາມຂໍ້ມູນທີ່ທ່ານປ້ອນ.

ຕົວເລືອກ

ບັນທຶກຂໍ້ມູນໃນ URL ແບ່ງປັນລິ້ງເພື່ອເປີດຄືນໃໝ່ດ້ວຍການຕັ້ງຄ່າເດີມ ຕັດຊ່ອງວ່າງອັດຕະໂນມັດ ລວມເຖິງການຕັດຊ່ອງວ່າງແບບ full-width Escape double quotes ຮັກສາຄ່າໃນ meta attributes ໃຫ້ປອດໄພ

ຄຳແນະນຳຂະໜາດຮູບ (ຕົວຢ່າງ)

ເລືອກ OG ຫຼື X ເພື່ອເບິ່ງຕົວຢ່າງຂະໜາດ

ເນັ້ນ OG ເນັ້ນ X

ຄຳແນະນຳອັດຕາສ່ວນ -

ວິທີໃຊ້ / ຕົວຢ່າງ

ຕື່ມ URL, ຫົວຂໍ້, ລາຍລະອຽດ ແລະ URL ຮູບພາບ.
ເລືອກ og:type ແລະ (ຫາກຕ້ອງການ) ຕັ້ງຄ່າ Twitter Card.
ຄັດລອກ tags ທີ່ສ້າງຂຶ້ນແລ້ວໄປວາງໄວ້ໃນ <head>.

ຕົວຢ່າງແບບໄວ

ປ້ອນ URL + ຫົວຂໍ້ + ຮູບພາບ, ຈາກນັ້ນຄັດລອກຊຸດທີ່ແນະນຳ.

ໝາຍເຫດ & ເຄັດລັບ

OGP ແມ່ນຫຍັງ?

OGP (Open Graph Protocol) ຊ່ວຍໃຫ້ແພລັດຟອມໂຊຊຽວອ່ານຫົວຂໍ້, ລາຍລະອຽດ ແລະ ຮູບພາບຂອງໜ້າເວັບທ່ານໄດ້.

ການຕັ້ງ og:title/og:description/og:image ຊ່ວຍໃຫ້ທ່ານຄວບຄຸມການສະແດງຜົນເມື່ອມີການແບ່ງປັນລິ້ງ.

Twitter Cards (X) ໃຊ້ metadata ທີ່ຄ້າຍຄືກັນ ແລະ ສາມາດດຶງຂໍ້ມູນຈາກ OG tags ໄດ້.

ຄຳແນະນຳຂະໜາດຮູບພາບ (ເພື່ອໃຫ້ສະແດງຜົນຄົງທີ່)

ຄຳແນະນຳຈາກ Meta (Facebook)

• ຂັ້ນຕ່ຳ 200×200.
• ເພື່ອການສະແດງຜົນທີ່ດີ, ຄວນໃຊ້ 1200×630 ຫຼື ໃຫຍ່ກວ່າ; ຢ່າງໜ້ອຍ 600×315.
• ອັດຕາສ່ວນໃກ້ຄຽງ 1.91:1 ຊ່ວຍຫຼີກລ່ຽງການຖືກຕັດຮູບ.
• ຂະໜາດໄຟລ໌ຄວນຈະບໍ່ເກີນ 8MB.

ຄຳແນະນຳຈາກ X (Twitter)

• summary_large_image ຮອງຮັບອັດຕາສ່ວນ 2:1; ຂັ້ນຕ່ຳ 300×157, ສູງສຸດ 4096×4096.
• ຂະໜາດໄຟລ໌ບໍ່ເກີນ 5MB ແລະ ຮອງຮັບຮູບແບບ JPG/PNG/WEBP/GIF.

ເມື່ອການປ່ຽນແປງບໍ່ສະແດງຜົນ (ແຄຊ & ດຶງຂໍ້ມູນໃໝ່)

• SNS crawlers ຈະເກັບແຄຊຂໍ້ມູນ OG. ໃຫ້ໃຊ້ debugger ຂອງແຕ່ລະແພລັດຟອມເພື່ອດຶງຂໍ້ມູນໃໝ່.
• ຫາກປ່ຽນຮູບແລ້ວແຕ່ຍັງບໍ່ອັບເດດ, ອາດເປັນເພາະ URL ຮູບຖືກເກັບແຄຊ; ໃຫ້ລອງປ່ຽນຊື່ໄຟລ໌ ຫຼື ຕື່ມ query string.
• ການເພີ່ມ og:image:width/height ຊ່ວຍໃຫ້ການສະແດງຜົນຄົງທີ່ຂຶ້ນ.

ເຄື່ອງມືສຳລັບການກວດສອບ

Meta Sharing Debugger

ດຶງຂໍ້ມູນໃໝ່ ແລະ ກວດສອບ OG tags.

LinkedIn Post Inspector

ຣີເຟຣຊຕົວຢ່າງແຄຊຂອງ LinkedIn.

X Card Validator

ກວດສອບການສະແດງຜົນຂອງ Twitter Card.

FAQ

ຄວນລວມ Twitter Card tags ນຳຫຼືບໍ່?

ແມ່ນແລ້ວ. ສາມາດສ້າງ twitter:card ແລະ tags ທີ່ກ່ຽວຂ້ອງໄປພ້ອມກັນໄດ້. X ສາມາດດຶງຂໍ້ມູນຈາກ OG tags ໄດ້, ດັ່ງນັ້ນການຕັ້ງຄ່າແບບພື້ນຖານກໍຍັງໃຊ້ງານໄດ້.

ຂະໜາດຮູບພາບທີ່ແນະນຳແມ່ນເທົ່າໃດ?

ໂດຍທົ່ວໄປ Meta ແນະນຳ 1200×630 ຫຼື ໃຫຍ່ກວ່າ ແລະ ອັດຕາສ່ວນໃກ້ຄຽງ 1.91:1. ສ່ວນ X summary_large_image ຈະມີອັດຕາສ່ວນ ແລະ ຂະໜາດຂັ້ນຕ່ຳທີ່ຕ່າງກັນ. ໃຫ້ເລືອກຕາມແພລັດຟອມເປົ້າໝາຍ.

ຕົວຢ່າງການສະແດງຜົນບໍ່ອັບເດດ

ສ່ວນໃຫຍ່ແມ່ນເກີດຈາກແຄຊ. ໃຫ້ດຶງຂໍ້ມູນໃໝ່ຜ່ານ debugger/inspector ແລະ ຫາກມີການປ່ຽນຮູບ, ໃຫ້ໃຊ້ URL ຮູບໃໝ່.