เครื่องมือสร้าง Meta Tag
Meta Tag Open Graph
Meta Tag Twitter Card
วิธีใช้ เครื่องมือสร้าง Meta Tag
- 1
กรอกข้อมูลสำคัญ
ป้อนชื่อหน้า คำอธิบาย คีย์เวิร์ด ผู้เขียน และคำสั่ง robots ในส่วน "Meta Tag สำคัญ"
- 2
เพิ่มแท็กสำหรับแชร์โซเชียล
กรอกช่อง Open Graph และ Twitter Card รวมถึงชื่อ คำอธิบาย และ URL รูปภาพ เพื่อควบคุมว่าหน้าจะมีหน้าตาอย่างไรเมื่อถูกแชร์
- 3
ตรวจดูแท็กที่สร้างขึ้น
ดูมาร์กอัป meta tag ถูกสร้างขึ้นแบบสดในส่วนผลลัพธ์ขณะที่คุณพิมพ์ในแต่ละช่อง
- 4
คัดลอกลงใน <head>
คลิก "คัดลอก Meta Tag" แล้ววาง HTML ที่สร้างขึ้นลงในส่วน head ของหน้าคุณ
คู่มือฉบับสมบูรณ์ว่าด้วย Meta Tag ของ HTML เพื่อ SEO
Meta tag คืออะไรและควรอยู่ที่ไหน
Meta tag คือองค์ประกอบ HTML ที่อยู่ภายในส่วน head ของหน้า และอธิบายเอกสารให้แก่เบราว์เซอร์ เครื่องมือค้นหา และเครือข่ายสังคม มากกว่าจะอธิบายให้ผู้เข้าชมที่เป็นมนุษย์ มันไม่เคยถูกแสดงบนหน้าเว็บเอง เบราว์เซอร์จะอ่านมันก่อนวาดสิ่งใด ๆ ซึ่งเป็นเหตุผลที่ตำแหน่งมีความสำคัญ ทุกแท็กที่เครื่องสร้างนี้ผลิตขึ้นควรถูกวางไว้ภายในองค์ประกอบ head ควรอยู่สูง ๆ ก่อนสคริปต์ใด ๆ ที่บล็อกการแสดงผล โดยเฉพาะองค์ประกอบ title และการประกาศ charset ควรปรากฏให้เร็วที่สุดเท่าที่จะเป็นไปได้ เพราะเบราว์เซอร์ต้องรู้การเข้ารหัสอักขระก่อนจะแยกวิเคราะห์มาร์กอัปที่เหลือ
ข้อมูลเมตาที่สำคัญที่สุดสองอย่างในเชิงเทคนิคแล้วไม่ใช่ meta tag เลย องค์ประกอบ title (title) และลิงก์ canonical (link rel="canonical") เป็นองค์ประกอบที่แยกต่างหาก แต่ก็อยู่ในบล็อก head เดียวกันและเป็นหัวใจของวิธีที่หน้าเว็บถูกทำความเข้าใจ เครื่องมือนี้มุ่งเน้นที่แท็ก title, description, viewport, robots, Open Graph และ Twitter Card ซึ่งร่วมกันครอบคลุมข้อมูลเมตาที่สร้างความเปลี่ยนแปลงได้จริงต่อการค้นหาและโซเชียล
แท็ก title: สัญญาณบนหน้าที่สำคัญที่สุดเพียงหนึ่งเดียว
องค์ประกอบ title คือสัญญาณ SEO บนหน้าที่แข็งแกร่งที่สุดที่คุณควบคุมได้ มันคือสิ่งที่ Google มักแสดงเป็นพาดหัวสีน้ำเงินที่คลิกได้ในผลการค้นหา และเป็นสิ่งที่ปรากฏบนแท็บของเบราว์เซอร์ ตั้งเป้าราว 50 ถึง 60 อักขระ หรือประมาณ 580 พิกเซล เพื่อไม่ให้มันถูกตัดด้วยจุดไข่ปลาในหน้าผลการค้นหา วางคีย์เวิร์ดที่สำคัญที่สุดไว้ใกล้ส่วนหน้า เขียนเพื่อมนุษย์ที่กำลังตัดสินใจว่าจะคลิกหรือไม่ และทำให้แต่ละ title ไม่ซ้ำกันทั่วทั้งเว็บไซต์ของคุณ ข้อความสำเร็จรูปอย่างชื่อแบรนด์ที่ซ้ำกันที่ต้นของทุก title เป็นการสิ้นเปลืองพื้นที่อันมีค่าที่สุดที่คุณมี
ข้อผิดพลาดที่พบบ่อยคือการมองว่าแท็ก title และหัวข้อ H1 ใช้แทนกันได้ ทั้งสองตอบสนองผู้ชมที่ต่างกัน title มีไว้สำหรับสนิปเพตในการค้นหาและแท็บ ส่วน H1 คือพาดหัวบนหน้า ทั้งสองจะต่างกันได้ และมักควรต่างกัน เพราะถ้อยคำที่เหมาะกับการคลิกเข้าชมสำหรับผลการค้นหาไม่ได้เป็นหัวข้อที่ดีที่สุดเสมอไปสำหรับคนที่อยู่บนหน้าเว็บแล้ว
Meta description: การคลิก ไม่ใช่อันดับ
Meta description ไม่ได้มีอิทธิพลต่ออันดับโดยตรง แต่มีอิทธิพลอย่างมากต่ออัตราการคลิกเข้าชม ซึ่งเป็นเรื่องสำคัญ จงปฏิบัติต่อมันเหมือนข้อความโฆษณา สรุปเนื้อหาของหน้า ใส่คีย์เวิร์ดหลักเข้าไปเพื่อให้มันถูกทำตัวหนาเมื่อตรงกับคำค้นหา และเพิ่มเหตุผลให้คนคลิก เก็บความยาวไว้ราว 150 ถึง 160 อักขระ คำอธิบายที่ยาวกว่านั้นจะถูกตัด และ Google มักเขียนคำอธิบายที่ขาดหายไป ซ้ำกัน หรือไม่ค่อยตรงกับคำค้นหาเสียใหม่ ด้วยการดึงสนิปเพตจากเนื้อความของหน้ามาแทน
เนื่องจาก Google อาจมองข้ามคำอธิบายของคุณและสร้างขึ้นใหม่เอง อย่าพึ่งพามันสำหรับข้อมูลที่สำคัญ ถึงอย่างนั้นก็จงเขียนคำอธิบายที่ดีไว้ เพราะคำอธิบายที่น่าสนใจซึ่งรอดมาได้มักทำผลงานได้ดีกว่าสนิปเพตที่สร้างขึ้นอัตโนมัติ อย่ายัดคีย์เวิร์ดลงไปเด็ดขาด เพราะมันกระตุ้นให้เกิดการเขียนใหม่และอ่านแล้วเหมือนสแปมสำหรับผู้ใช้
แท็ก robots และการควบคุมการคลาน
แท็ก robots บอกเครื่องมือค้นหาว่าจะทำอะไรเมื่อคลานหน้าเว็บเสร็จแล้ว ค่าที่พบบ่อยที่สุดคือ index/noindex (ว่าหน้านี้จะปรากฏในผลการค้นหาได้หรือไม่) และ follow/nofollow (ว่าลิงก์บนหน้านั้นควรส่งต่อค่าหรือไม่) ค่าอย่าง noindex, follow จะกันหน้าออกจากดัชนีในขณะที่ยังให้ตัวคลานเดินทางผ่านลิงก์ของมันได้ ซึ่งมีประโยชน์สำหรับหน้าที่มีเนื้อหาน้อย เช่น ผลการค้นหาภายในหรือเวอร์ชันที่เหมาะกับการพิมพ์ คำสั่งอื่น ๆ ได้แก่ noarchive, nosnippet และ max-snippet สำหรับควบคุมอย่างละเอียดว่าผลการค้นหาจะถูกแสดงอย่างไร
มีข้อแตกต่างที่สำคัญ แท็ก robots ควบคุมการจัดทำดัชนี ในขณะที่ robots.txt ควบคุมการคลาน ทั้งสองใช้แทนกันไม่ได้ หากคุณบล็อก URL ใน robots.txt Google อาจไม่เคยเห็นแท็ก noindex บนหน้านั้นเลย เพราะมันคลานหน้าเพื่ออ่านไม่ได้ และ URL นั้นก็ยังคงปรากฏในผลการค้นหาเป็นลิงก์เปล่า ๆ ได้ หากต้องการนำหน้าออกจากการค้นหาอย่างเชื่อถือได้ ให้ปล่อยให้คลานได้และใส่ noindex
Viewport, charset และสิ่งจำเป็นทางเทคนิค
แท็ก viewport คือ width=device-width, initial-scale=1.0 คือสิ่งที่ทำให้หน้าเว็บตอบสนองต่อมือถือได้ หากไม่มีมัน เบราว์เซอร์บนมือถือจะแสดงหน้าที่ความกว้างของเดสก์ท็อปแล้วย่อมันลง ทำให้ตัวอักษรเล็กจิ๋วและประสบการณ์บนมือถือแย่ เนื่องจาก Google จัดทำดัชนีเวอร์ชันมือถือของหน้าก่อน แท็ก viewport ที่ขาดหายหรือตั้งค่าผิดจึงเป็นปัญหาด้านอันดับและการใช้งานจริง ไม่ใช่เรื่องความสวยงาม การประกาศ charset ซึ่งแทบจะเป็น UTF-8 เสมอ ช่วยให้อักขระพิเศษและอีโมจิแสดงผลถูกต้องแทนที่จะกลายเป็นตัวอักษรเพี้ยน
แท็กสองตัวนี้เล็กแต่ต่อรองไม่ได้ จงตั้ง viewport ให้เท่ากับความกว้างของอุปกรณ์ หลีกเลี่ยงการปิดการย่อขยายของผู้ใช้ด้วย maximum-scale หรือ user-scalable=no (ซึ่งทำลายการเข้าถึง) และประกาศการเข้ารหัส UTF-8 บนทุกหน้า
Open Graph และ Twitter Card สำหรับตัวอย่างบนโซเชียล
แท็ก Open Graph (ตระกูล og:) ควบคุมว่าลิงก์ของคุณจะมีหน้าตาอย่างไรเมื่อวางลงใน Facebook, LinkedIn, Slack, Discord และแพลตฟอร์มอื่น ๆ อีกมากมาย ชุดหลักคือ og:title, og:description, og:image, og:url และ og:type แท็ก Twitter Card (ตระกูล twitter:) ทำเช่นเดียวกันสำหรับ X โดยการตั้ง twitter:card เป็น summary_large_image เป็นตัวเลือกที่สะดุดตาที่สุด จงระบุ og:image ขนาดราว 1200 คูณ 630 พิกเซล และใช้ URL แบบเต็มสำหรับมันเสมอ พาธรูปภาพแบบสัมพัทธ์เป็นสาเหตุอันดับหนึ่งที่ทำให้ตัวอย่างไม่แสดงรูปย่อ
แพลตฟอร์มโซเชียลจะแคชสิ่งที่มันกวาดมา ดังนั้นหลังจากที่คุณเปลี่ยนแท็กเหล่านี้ คุณมักต้องสั่งให้มันกวาดหน้าใหม่โดยใช้เครื่องมือดีบักของแพลตฟอร์ม (เช่น Sharing Debugger ของ Facebook) เพื่อล้างตัวอย่างเก่า หากแท็กใดขาดหายไป แพลตฟอร์มส่วนใหญ่จะใช้ title และ description มาตรฐานแทน แต่ผลที่ได้คือการ์ดที่เรียบกว่าและน่าคลิกน้อยกว่า
แท็กที่ไม่ช่วยอีกต่อไป และข้อผิดพลาดที่พบบ่อย
แท็ก meta keywords ตายไปแล้วสำหรับ SEO Google ยืนยันเมื่อหลายปีก่อนว่ามันมองข้าม meta keywords โดยสิ้นเชิง และเพราะมันเปิดเผยคำเป้าหมายของคุณต่อคู่แข่งอย่างโจ่งแจ้ง การกรอกมันจึงดีที่สุดก็ไร้ประโยชน์และแย่ที่สุดก็เป็นการรั่วไหลข้อมูลเล็กน้อย เครื่องสร้างนี้มีช่อง keywords ไว้เพื่อความครบถ้วนและสำหรับระบบเก่า แต่อย่าคาดหวังประโยชน์ด้านอันดับใด ๆ จากมัน แท็กเก่าอื่น ๆ เช่น meta revisit-after และ meta author ก็ไม่มีผลต่ออันดับของ Google เช่นกัน
ข้อผิดพลาดจริงที่พบบ่อยที่สุดคือ title และ description ที่ซ้ำกันในหลายหน้า, title และ description ที่เกินขีดจำกัดการแสดงผลและถูกตัด, แท็ก canonical ที่ขาดหายบนหน้าที่เข้าถึงได้ผ่านหลาย URL, URL แบบสัมพัทธ์ใน og:image และการเผลอปล่อย noindex ทั่วทั้งเว็บไซต์ที่หลงเหลือมาจากสภาพแวดล้อมทดสอบ จงยืนยัน head ที่แสดงผลสุดท้ายด้วย view-source หรือเครื่องมือนักพัฒนาของเบราว์เซอร์เสมอ เพราะบางครั้งเฟรมเวิร์ก JavaScript แทรกหรือเขียนทับ meta tag หลังจาก HTML เริ่มต้นโหลดเสร็จ
คำถามที่พบบ่อย
ตัวสร้างนี้สร้าง meta tag ใดบ้าง
แท็ก Open Graph และ Twitter Card มีไว้ทำอะไร
ชื่อและคำอธิบายของฉันควรยาวแค่ไหน
ฉันควรใช้รูปภาพขนาดเท่าใดสำหรับแท็ก OG
ฉันควรวางแท็กที่สร้างขึ้นไว้ที่ไหน
เครื่องมือที่เกี่ยวข้อง
ทำงานต่อด้วยเครื่องมือที่มีประโยชน์เหล่านี้