เมตาแท็กเป็นส่วนหนึ่งของแท็ก HTML ที่อธิบายเนื้อหาหน้าของคุณต่อเครื่องมือค้นหาและผู้เยี่ยมชมเว็บไซต์ เมตาแท็กจะปรากฏเฉพาะในโค้ดของเพจ และทุกคนสามารถตรวจสอบได้ผ่านซอร์สโค้ด (Ctrl+U)
กล่าวโดยย่อ เมตาแท็กคือสิ่งสำคัญสำหรับเครื่องมือค้นหาทั้งหมดที่ปรากฏในโค้ด HTML ของหน้าเว็บไซต์และบอกเครื่องมือค้นหาว่าหน้านั้นเกี่ยวกับอะไร และเป็นความประทับใจแรกและจุดติดต่อสำหรับเครื่องมือค้นหาทั้งหมด
เพิ่มเมตาแท็กในส่วน <head> ของหน้าเว็บ HTML และเป็นการ ซ่อนคำในหน้าของคุณสำหรับเครื่องมือค้นหา " อย่างถูกกฎหมาย"
ทุกแพลตฟอร์มมีโซลูชันที่แตกต่างกันสำหรับการเพิ่มเมตาแท็ก เช่นเดียวกับ WordPress ที่มีปลั๊กอินฟรีให้เลือก ฉันแนะนำ ปลั๊กอิน All in One SEO PackและYoast SEO เป็นการ ส่วนตัว ทั้งสองเป็นที่นิยมและคุณสามารถเลือกได้ตามความต้องการ
Meta Tags มีความสำคัญต่อ SEO ในปี 2022 หรือไม่?
ใช่ พวกเขาทำได้ แต่ไม่ใช่เมตาแท็กทั้งหมดที่สามารถช่วยคุณได้ในปี 2022
จากประสบการณ์ของผม หากคุณต้องการอันดับสูงใน Google ในปี 2022 คุณต้องเน้นที่เนื้อหาคุณภาพสูงและความพึงพอใจของผู้ใช้ด้วย เป้าหมายหลักของโพสต์นี้คือเพื่ออธิบายว่าเมตาแท็กใดที่เหมาะกับการใช้งานและแท็กใดที่ไม่ทำงานและไม่มีประโยชน์
(ดูด้านล่าง: มีแท็กสองสามแท็ก เราสามารถเรียกมันว่าแท็ก Meta ที่ไม่ดี และเราควรเพิกเฉยต่อพวกเขา)
เมตาแท็กสามารถส่งผลต่อวิธีที่ผู้ใช้เห็นไซต์ของคุณในผลการค้นหา และไม่ว่าพวกเขาจะคลิกผ่านไปยังไซต์ของคุณจริงหรือไม่
วิธีตรวจสอบเมตาแท็กบนเว็บไซต์
หากคุณต้องการตรวจสอบเมตาแท็กสำหรับหน้าใดๆ เพียงคลิกขวาที่ใดก็ได้บนหน้าแล้วเลือก “ดูที่มาของหน้า” คุณยังสามารถใช้เครื่องมืออย่างเช่น SEMrush (โดยเฉพาะเครื่องมือตรวจสอบ SEMrush) และ Screaming Frog เพื่อตรวจสอบ Meta tags ในเว็บไซต์ใดก็ได้
Meta Tags ที่สำคัญที่สุดสำหรับ SEO ในปี 2022
โดยส่วนตัวแล้วฉันเน้นที่เมตาแท็กหลัก 8 รายการซึ่งสามารถปรับปรุงการเพิ่มประสิทธิภาพของธุรกิจเริ่มต้นหรือเว็บไซต์ที่ทำงานอยู่
ฉันกำลังแบ่งปันความคิดเห็นของฉันเกี่ยวกับพวกเขาทั้งหมดด้านล่าง:
- แท็กชื่อเรื่อง
- คำอธิบายเมตา
- Canonical Tag
- ข้อความแสดงแทน (Alt) แท็ก
- เมตาแท็กโรบ็อต
- เมตาแท็กโซเชียลมีเดีย (เปิดกราฟและการ์ด Twitter)
- เมตาแท็กการออกแบบที่ตอบสนอง
แท็กชื่อเรื่อง
แท็กชื่อเป็นองค์ประกอบ HTML แรกที่ระบุหน้าเว็บของคุณสำหรับเครื่องมือค้นหาและผู้เยี่ยมชม องค์ประกอบชื่อสนับสนุนเบราว์เซอร์ทั้งหมดรวมทั้ง Chrome, Firefox, Safari เป็นต้น
เพิ่มแท็กชื่อของคุณในส่วน <head> ของไซต์ของคุณเสมอ
<head>
<title>นี่คือตัวอย่างชื่อเรื่อง</title>
</head>
ความยาวที่เหมาะสมที่สุดสำหรับแท็กชื่อ:โดยทั่วไป Google จะแสดงอักขระ 55-64 ตัว (ให้ไม่เกิน 60)
การเพิ่มประสิทธิภาพแท็กชื่อเป็นสิ่งสำคัญสำหรับเครื่องมือค้นหาและผู้เยี่ยมชม แสดงในSERPและในแท็บเบราว์เซอร์
แท็กชื่อแท็บเบราว์เซอร์ที่แสดงด้านล่างสำหรับโพสต์ของ Templatemonster:
แท็กชื่อ SERP ที่แสดงด้านล่างสำหรับMoti Hamou - ผู้เชี่ยวชาญด้านการตลาดออนไลน์ :
แท็กชื่อเป็นปัจจัยในหน้าที่สำคัญที่สุดอันดับสองสำหรับ SEO รองจากเนื้อหา – ที่มา: MOZ
คุณไม่สามารถเพิ่มองค์ประกอบ <title> มากกว่าหนึ่งรายการในหน้าเว็บของคุณ – ที่มา: w3schools
ประเด็นสำคัญในการเขียน Title tag ที่ดี:
- เพิ่ม “ตัวดัดแปลง” ลงในแท็กชื่อของคุณ (วิธีการ |ปีปัจจุบัน | รีวิว |ดีที่สุด | เคล็ดลับ | บนสุด | ค้นหา | ซื้อ | ง่าย)
- ฝังคีย์เวิร์ดหางยาวในแท็กชื่อ
- เพิ่มตัวเลขในชื่อของคุณ (9 แท็ก HTML ที่สำคัญสำหรับเว็บไซต์ของคุณเพื่อปรับปรุง SEO ของคุณ)
- เริ่มแท็กชื่อของคุณด้วยคำหลักที่กำหนดเป้าหมายหลักของคุณ
- อย่าใส่คีย์เวิร์ดของคุณ
- ทุกหน้าควรมีแท็กชื่อที่ไม่ซ้ำกัน
คำอธิบายเมตา
คำอธิบายเมตาเป็นองค์ประกอบ HTML ที่สรุปหน้าเว็บของคุณ เครื่องมือค้นหามักจะแสดงคำอธิบาย Meta ในผลการค้นหาใต้แท็กชื่อของคุณ
ตัวอย่างโค้ด
<head>
<meta name="description" content="นี่คือตัวอย่างคำอธิบายเมตา เราสามารถเพิ่มอักขระได้มากถึง 160 ตัว">
</head>
Google ไม่ได้ใช้คำอธิบาย Meta เป็นสัญญาณการจัดอันดับ ยังคงมีผลอย่างมากต่อ CTR ของหน้าเว็บเนื่องจากแสดงในผลการค้นหา
ในเดือนธันวาคม 2017 Google ได้เพิ่มความยาวของตัวอย่างข้อมูลในผล การค้นหา ตอนนี้ Google ยืนยันว่าได้ย่อตัวอย่างผลการค้นหาหลังจากขยายเมื่อเดือนธันวาคมปีที่แล้ว
ความยาวที่เหมาะสมที่สุดสำหรับ Meta Description คืออะไร?
“ไม่มีความยาวตายตัวสำหรับตัวอย่าง ความยาวแตกต่างกันไปตามสิ่งที่ระบบของเราเห็นว่ามีประโยชน์มากที่สุด” เขาเสริมว่า "Google จะไม่ระบุความยาวสูงสุดใหม่สำหรับตัวอย่างข้อมูล เนื่องจากตัวอย่างจะถูกสร้างขึ้นแบบไดนามิก"
ความยาวเฉลี่ยใหม่ของฟิลด์ข้อมูลโค้ดคำอธิบายบนเดสก์ท็อป อยู่ที่ประมาณ 160 อักขระ ลดลงจาก 300+ อักขระ
อักขระบนอุปกรณ์เคลื่อนที่สำหรับตัวอย่างผลการค้นหาลดลงเหลือเฉลี่ย 130 อักขระ
คำอธิบายที่สร้างโดย Google ในผลการค้นหา
ประเด็นสำคัญในการเขียนแท็ก Meta Description ที่ดี:
- อย่าเน้นที่จำนวนอักขระ เนื่องจาก Google อาจดึงข้อความคำอธิบาย Meta จากเนื้อหาของคุณตามข้อความค้นหาของผู้ใช้
- อย่าเพิ่มคำอธิบาย Meta ที่ซ้ำกัน
- เพิ่มคำกระตุ้นการตัดสินใจ (CTA) ที่ชัดเจนในคำอธิบายของคุณ เช่น สมัครวันนี้ ชำระเงิน ติดต่อเราวันนี้ ฯลฯ ดูคำหลัก CTA เหล่านี้สำหรับแคมเปญการตลาด
- เพิ่มคำหลักเป้าหมายของคุณในคำอธิบาย
- นำเสนอวิธีแก้ปัญหาอย่างมีกลยุทธ์
- เขียนสำหรับผู้ใช้ของคุณและสนับสนุนให้พวกเขาคลิกด้วยเนื้อหาเฉพาะและเกี่ยวข้อง
- เพิ่มส่วนลดหรือข้อเสนอใด ๆ ที่คุณมี
- แสดงความเห็นอกเห็นใจขณะเขียนคำอธิบายเมตาของคุณ
Canonical Tag
แท็ก Canonical คือแท็กลิงก์ HTML ที่มีแอตทริบิวต์ “rel=canonical” ที่ใช้หากคุณมี URL ของหน้าเดียวที่มีเนื้อหาเดียวกันกับ URL ของหน้าหลายรายการ
ด้วยการใช้แท็ก Canonical ในโค้ด เรากำลังบอกเครื่องมือค้นหาว่า URL นี้เป็นหน้าหลัก และหลีกเลี่ยงการสร้างดัชนี URL ของหน้าที่ซ้ำกันอื่นๆ
ไวยากรณ์แท็กบัญญัติ:
<link rel="canonical" href="http://example.com/" />
เราควรเลือก Canonical URL ที่ใด
URL หลายรายการ:
- http://www.example.com
- https://www.example.com
- http://example.com
- http://example.com/index.php
Google เห็นว่า URL ข้างต้นทั้งหมดเป็นเวอร์ชันที่ซ้ำกันของโฮมเพจ และเพื่อแก้ไขปัญหานี้ แท็กตามรูปแบบบัญญัติ (rel=canonical) ถูกคิดค้นขึ้น
URL รหัสเซสชัน:
นี่คือ URL ที่ระบบสร้างขึ้นโดยอัตโนมัติและสร้างขึ้นโดยทั่วไปเนื่องจาก URL ติดตามผล ลิงก์เบรดครัมบ์ และลิงก์ถาวรใน CMS
URL มือถือ:
เมื่อใช้ URL พิเศษ (m. example.com) สำหรับเว็บไซต์ของคุณในเวอร์ชันมือถือ
SEMrush มี 2 เวอร์ชัน เวอร์ชันหนึ่งเป็นเวอร์ชันสำหรับมือถือ และอีกเวอร์ชันหนึ่งเป็นเวอร์ชันเดสก์ท็อป สำหรับรุ่นมือถือและเดสก์ท็อป SEMrush ใช้แท็กบัญญัติดังต่อไปนี้:
<link rel="canonical" href="https://www.semrush.com/" />
ข้อความแสดงแทน (Alt) แท็ก
แท็ก Alt มีความสำคัญสำหรับรูปภาพใดๆ เนื่องจากเครื่องมือค้นหาไม่สามารถอ่านได้ ดังนั้น คุณต้องเพิ่มข้อความ Alt ที่เหมาะสมให้กับรูปภาพเพื่อให้เครื่องมือค้นหาสามารถพิจารณาได้
ไวยากรณ์สำหรับข้อความแสดงแทน:
<img src=”http://example.com/xyz.jpg” alt=”xyz” />
ประเด็นสำคัญที่ควรพิจารณาขณะสร้าง alt-tags สำหรับรูปภาพ:
- รูปภาพทั้งหมดควรมีชื่อไฟล์ที่ให้ข้อมูล
- ข้อความแสดงแทนต้องสั้นชัดเจนและตรงประเด็น
- ใช้รูปภาพที่เป็นต้นฉบับและถูกต้องเสมอ เพราะนี่คือก้าวสำคัญสู่ความสำเร็จ
- สร้างแผนผังเว็บไซต์รูปภาพ
- ใช้อักขระ 50-55 (สูงสุด 16 คำ) ในข้อความแสดงแทน
- ใช้ขนาดไฟล์ที่เหมาะสมที่สุดโดยไม่ทำให้คุณภาพลดลงเพื่อความเร็วในการโหลดหน้าเว็บที่เร็วขึ้น
“การเพิ่มแท็ก alt ทำได้ง่ายมาก และคุณน่าจะทำได้กับรูปภาพทั้งหมดของคุณ มันช่วยการเข้าถึงของคุณและช่วยให้เราเข้าใจว่าเกิดอะไรขึ้นในภาพของคุณ”
Robots Meta tag
แท็ก Robots Meta เป็นแท็ก HTML ที่ให้คำแนะนำแก่โปรแกรมรวบรวมข้อมูลเว็บว่าจะจัดทำดัชนีหรือ noindex ของหน้าเว็บหรือไม่
แท็ก Robots Meta มีค่าหลักสี่ประการสำหรับโปรแกรมรวบรวมข้อมูลของเครื่องมือค้นหา:
- ติดตาม – โปรแกรมรวบรวมข้อมูลของเครื่องมือค้นหาจะติดตามลิงก์ทั้งหมดในหน้าเว็บนั้น
- INDEX – โปรแกรมรวบรวมข้อมูลของเครื่องมือค้นหาจะจัดทำดัชนีหน้าเว็บทั้งหมด
- NOFOLLOW – โปรแกรมรวบรวมข้อมูลของเครื่องมือค้นหาจะไม่ติดตามหน้าและลิงก์ใด ๆ ในหน้าเว็บนั้น
- NOINDEX – โปรแกรมรวบรวมข้อมูลของเครื่องมือค้นหาจะไม่สร้างดัชนีหน้าเว็บนั้น
ไวยากรณ์แท็ก Robots Meta:
<meta name=”robots” content=”noindex, nofollow”> - หมายถึงไม่จัดทำดัชนีหรือไม่ติดตามหน้าเว็บนี้ <meta name=”robots” content=”index, follow”> - หมายถึงดัชนีและติดตามหน้าเว็บนี้
หมายเหตุ:ควรวางเมตาแท็กของโรบ็อตไว้ในส่วน <head> ของหน้าเว็บของคุณ
เมตาแท็กโซเชียลมีเดีย (เปิดกราฟและการ์ด Twitter)
แท็กเปิดกราฟ:
เมตาแท็ก Open Graph ได้รับการออกแบบมาเพื่อส่งเสริมการรวมระหว่าง Facebook, LinkedIn, Google และ URL ของเว็บไซต์ที่คุณแชร์บนแพลตฟอร์มเหล่านี้
นี่คือตัวอย่างลักษณะของแท็ก Open Graph ใน HTML มาตรฐาน:
<meta property="og:type" content="article" /> <meta property="og:title" content="TITLE OF YOUR POST OR PAGE" /> <meta property="og:description" content="DESCRIPTION" ของเนื้อหาหน้า" /> <meta property="og:image" content="LINK TO THE IMAGE FILE" /> <meta property="og:url" content="PERMALINK" /> <meta property="og:site_name " content="SITE NAME" />
การ์ด Twitter:
การ์ด Twitter ทำงานในลักษณะเดียวกันกับ Open Graph ยกเว้นว่าคุณเพิ่มแท็ก Meta พิเศษเหล่านี้สำหรับ Twitter เท่านั้น Twitter จะใช้แท็กเหล่านี้เพื่อปรับปรุงการแสดงหน้าของคุณเมื่อแชร์บนแพลตฟอร์มของพวกเขา
นี่คือตัวอย่างลักษณะของการ์ด Twitter ใน HTML มาตรฐาน:
<meta name="twitter:title" content="TITLE OF POST OR PAGE"> <meta name="twitter:description" content="DESCRIPTION OF PAGE CONTENT"> <meta name="twitter:image" content="LINK TO IMAGE"> <meta name="twitter:site" content="@USERNAME"> <meta name="twitter:creator" content="@USERNAME">
Meta Tags ของโซเชียลมีเดียทั้งสองมีลักษณะอย่างไร:
ตรงไปที่โพสต์นี้หากคุณต้องการทราบทุกอย่างเกี่ยวกับแท็กเหล่านี้
แท็กส่วนหัว
แท็ก Header ใช้สำหรับการสร้างหัวเรื่อง เช่น การใช้แท็กเหล่านี้ เราสามารถใช้การเปลี่ยนแปลงแบบอักษรได้
องค์ประกอบส่วนหัวคือ H1, H2, H3, H4, H5 และ H6 โดยที่ H1 เป็นระดับสูงสุด (หรือสำคัญที่สุด) และ H6 น้อยที่สุด
นี่คือตัวอย่างวิธีที่เราสามารถใช้แท็กส่วนหัวที่นำมาจากSEMrush :
<h1> 9 เคล็ดลับในการเพิ่มความเร็วของเว็บไซต์ Shopify ของคุณ </h1> <p>ย่อหน้าของเนื้อหา</p> <p>อีกย่อหน้าของเนื้อหา</p> <h2>การวิเคราะห์ประสิทธิภาพ</h2> <p> ย่อหน้าของเนื้อหา</p> <h3>วิเคราะห์ประสิทธิภาพมือถือและเดสก์ท็อปด้วย PageSpeed Insights</h3>
จุดสำคัญที่ต้องพิจารณา: ใช้แท็ก H1 ได้มากเท่าที่คุณต้องการ
ที่มา: Search Engine Roundtable
เมตาแท็กการออกแบบที่ตอบสนอง
Meta tag ที่สำคัญขั้นสุดท้ายคือ Responsive Design Meta tag ซึ่งเราเรียกว่า “Viewport Meta Element” ด้วยการใช้เมตาแท็กวิวพอร์ต เราสามารถควบคุมเลย์เอาต์สำหรับหน้าเว็บบนเบราว์เซอร์มือถือได้
องค์ประกอบวิวพอร์ตนี้รวมอยู่ในส่วนหัวของหน้าเว็บของคุณ
ไวยากรณ์:
<meta name="viewport" content="width=device-width,initial-scale=1">
หากคุณต้องการเรียนรู้เพิ่มเติมเกี่ยวกับเมตาแท็กการออกแบบที่ตอบสนอง ตรงไปที่โพสต์ที่เขียนอย่างดีนี้
หมายเหตุ:อย่าใช้ Meta tag ที่ตอบสนองนี้หากหน้าเว็บไซต์ของคุณไม่ตอบสนอง เนื่องจากจะทำให้ประสบการณ์ของผู้ใช้แย่ลง
Meta Tags ที่จะละเว้น
สุดท้าย มีแท็กสองสามแท็ก – เราสามารถเรียกมันว่าแท็ก Meta ที่ไม่ดี และเราควรเพิกเฉย:
- แท็กคีย์เวิร์ด – Google ไม่ใช้คีย์เวิร์ด Meta tag ในการจัดอันดับเว็บ – ที่มา
- กลับมาดู อีกครั้งหลัง – แท็ก HTML นี้เป็นคำสั่งให้โรบ็อตกลับไปยังหน้าหลังจากช่วงเวลาหนึ่ง แท็กนี้ไม่ได้ตามด้วยเครื่องมือค้นหาสำคัญๆ และไม่มีค่าใน SEO ทางที่ดีควรหลีกเลี่ยงแท็กนี้และปล่อยให้เครื่องมือค้นหาตัดสินใจว่าจะรวบรวมข้อมูลเว็บไซต์ของคุณอย่างไร ไวยากรณ์: <meta name=”revisit-after” content=”7 days” />
- Expiration/date – แท็กนี้กำหนดวันหมดอายุของเพจของคุณ โดยส่วนตัวฉันจะไม่แนะนำสิ่งนี้ เพียงแค่ลบสิ่งนี้หากคุณใช้งานอยู่ ไวยากรณ์: <meta http-equiv=”Expires” content=”Fri, 28 มกราคม 2022 23:59:59 GMT”>
- การ ยืนยันไซต์ – ให้เพิกเฉยต่อสิ่งนี้ คุณสามารถยืนยันไซต์ของคุณโดยใช้ Google Search Console และ Bing Webmaster tool
- ลิขสิทธิ์ – ทุกไซต์ใส่ลิขสิทธิ์ไว้ในส่วนท้าย ดังนั้นคุณไม่จำเป็นต้องมีแท็กแยกต่างหาก ไม่ใหญ่สำหรับแท็กนี้
- การกระจาย – ค่า "การแจกจ่าย" ควรจะใช้เพื่อควบคุมว่าใครสามารถเข้าถึงเอกสาร โดยปกติแล้วจะตั้งค่าเป็น "ทั่วโลก" มีนัยโดยเนื้อแท้ว่าหากเพจเปิดอยู่ (ไม่ได้ป้องกันด้วยรหัสผ่าน เช่นบนอินทราเน็ต) แสดงว่าหน้านั้นมีไว้สำหรับโลก ไปกับมันและปล่อยให้แท็กปิดหน้า – ที่มา
- ตัว สร้าง – แท็กที่ไร้ประโยชน์
- การควบคุมแคช – แท็กนี้ช่วยให้ผู้เผยแพร่เว็บกำหนดความถี่ในการแคชหน้า โดยทั่วไป สิ่งเหล่านี้ไม่จำเป็น เราสามารถใช้ส่วนหัว HTTP แทนแท็ก HTML นี้ได้
- เมตาแท็กของ ODP Robots – Google จะไม่ติดตามเมตาแท็กนี้อีกต่อไป – ที่มา
- Geo Meta Tag – Google ไม่ได้ใช้แท็ก Geo Meta เพื่อจัดอันดับหน้า – ที่มา
ดังนั้นนี่คือแท็ก HTML สองสามแท็กที่เราควรพิจารณาหรือเพิกเฉย ตอนนี้คุณสามารถใช้แท็ก HTML Meta ที่เกี่ยวข้องอย่างชาญฉลาดได้อย่างง่ายดาย
อย่าลืมแสดงความคิดเห็นด้านล่างและแบ่งปันมุมมองของคุณเกี่ยวกับแท็ก HTML ขอบคุณที่อ่าน!
