Skip to main content

Askboon

Hugo กับการรองรับ Open Graph

หลังจากลองงมเองมาสักพัก ถึงจะพอเข้าใจ เพราะหาข้อมูลจากในอินเทอร์เน็ตได้ค่อนข้างยาก เลยเอามาสรุปไว่ที่โพสต์นี้นะครับ

Open Graph คืออะไร?

อธิบายแบบบ้านๆเลย Open Graph ก็จะเป็น Protocol มาตรฐานอันหนึ่งที่จะทำให้เราสามารถแชร์เนื้อหาในเว็บของเราไปยัง Social Network ต่างๆได้ดีขึ้น เช่น แสดงข้อความหรือหัวข้อต่างๆได้ครบถ้วน หรือแสดงรูปภาพประกอบโพสต์ต่างๆได้ถูกต้อง ซึ่งหากเราไม่มีการกำหนดส่วนนี้ไว้แล้ว ลิงก์ที่เราแชร์ไปยัง Social Network ต่างๆก็จะดูไม่เรียบร้อยและไม่เป็นมืออาชีพขึ้นมาทันที

พวก Content Management (CMS) ต่างๆก็มักจะมีพวก Plugin เข้ามาช่วยทำให้มันถูกต้องอยู่แล้ว แต่โพสต์นี้จะพูดถึง Static Site Generator Hugo เพราะมันไม่ค่อยมีบอกไว้ชัดเจนนัก

Hugo จะรองรับ Open Graph หลักๆไว้อยู่แล้ว พื้นฐานที่เรามักจะต้องใช้งาน มีดังนี้

1
2
3
4
5
<meta property="og:title" content="XXX" />
<meta property="og:description" content="XXX" />
<meta property="og:type" content="XXX" />
<meta property="og:url" content="XXX" />
<meta property="og:image" content="XXX" />

Tag อื่นๆก็จะถูกผูกอยู่กับเนื้อหาในไฟล์ Markdown ของ Hugo อยู่แล้ว ยกเว้นบาง Theme ที่ผมใช้ไม่ได้มีการพูดถึงแท็ก og:image ที่จะใช้งาน จึงทำให้ผมไม่สามารถแชร์โพสต์ไปบน Facebook แล้วให้ภาพ Cover ของโพสต์นั้นแสดงอย่างถูกต้องได้

การแก้ปัญหา

ในส่วนของ Front Matter ให้ใส่พารามิเตอร์เกี่ยวกับเพิ่มเข้าไปดังนี้

1
2
images:
  - PATH_FILE_PATH

เพื่อให้ Internal Template ของ Hugo ทราบว่าจะต้องไปดึงไฟล์รูปไหนมาใส่ในแท็ก og:image

จบแล้ว

ครับ แก้แค่นี้เอง แต่ใช้เวลาในการแกะ Internal Template ของ Hugo พอสมควร

Ref: