มีความคิดเห็นมากมายเกี่ยวกับวิธีที่คุณควรกำหนดรูปแบบลิงก์สมอจากมุมมองของการออกแบบ วันนี้เราจะมาพูดถึงสิ่งที่สำคัญกว่านั้น:วิธีตั้งชื่อข้อความแองเคอร์ลิงก์และเหตุผล เว็บไซต์ที่น่าตกใจจำนวนมากเข้าใจผิดเรื่องนี้ ฉันก็รู้สึกผิดเช่นกัน
ในการสร้างลิงก์ที่คลิกได้บนเว็บไซต์ เราล้อมเส้นทางลิงก์ด้วยแท็กแองเคอร์ HTML:<a></a>
. แท็ก Anchor สามารถมีแอตทริบิวต์ได้หลายอย่าง:คลาส URL (เส้นทางลิงก์) รหัส ชื่อ และข้อความจุดยึด
ข้อความยึด หมายถึง คลิกได้ ส่วนหนึ่งของลิงค์ เป็นข้อความ (ไม่ใช่ URL ของลิงก์) ที่เราใส่แท็กสมอ
นี่คือลิงค์ไปยังหน้าแรกของ TechStacker HTML มีลักษณะดังนี้:
<a href="https://techstacker.com">TechStacker </a>
- URL ภายใน
href=" "
คือเป้าหมายของลิงก์ - The
>TechStacker<
คือ anchor text ที่คลิกได้ซึ่งนำไปสู่เป้าหมาย
ดูสองวิธีในการเขียน anchor text สำหรับลิงก์ต่างๆ ดังต่อไปนี้ ในกรณีนี้ เป้าหมายของลิงก์คือหน้าเกี่ยวกับการเพิ่มประสิทธิภาพ Anchor text แรกไม่ดี อันที่สองดี:
ทำไม anchor text แรกถึงไม่ดี อันแรก ไม่อธิบาย อันที่สองเป็นคำอธิบายและเกี่ยวข้อง ไปยังปลายทาง URL ที่จะนำไปสู่
ตัวชี้ข้อความสมอ:
- เขียน Anchor text ให้สั้น คำใดก็ตามที่มากกว่า 5 คำมักจะทำให้การจัดวางของคุณเกะกะ โดยเฉพาะอย่างยิ่งหากแท็กสมอของคุณเน้นการออกแบบอย่างชาญฉลาด ทั้งนี้ขึ้นอยู่กับบริบท
- ใช้ anchor text ที่สื่อความหมายและสื่อความหมาย “คลิกที่นี่” ไม่ใช่คำอธิบาย ทั้งสำหรับผู้ที่ใช้โปรแกรมอ่านหน้าจอหรือผู้ที่มีสายตาปกติ
- ข้อความ Anchor ส่งผลต่อ SEO เครื่องมือค้นหาต้องการลิงก์ที่สื่อความหมายและเกี่ยวข้องกับเนื้อหาที่ลิงก์ไป
- ข้อความ Anchor ส่งผลต่อการเข้าถึง ลองนึกดูว่าโปรแกรมอ่านหน้าจอจะอ่าน Anchor Text ของคุณกับคนที่มีความบกพร่องทางสายตาได้อย่างไร ให้สิ่งนั้นเป็นแนวทางในคำอธิบายข้อความสมอ
สรุป
Anchor text มีผลกับทั้ง SEO และ UX การคิดชื่อ Anchor Text ของคุณจะช่วยให้ทั้งผู้อ่านและเครื่องมือค้นหาของคุณมีความสุขด้วยการใช้ความคิดบางอย่าง
ฉันอ่านคู่มือ SEO สำหรับผู้เริ่มต้นใช้งานของ Google ซึ่งเป็นส่วนหนึ่งของการวิจัยบทความนี้
คุณเห็นสิ่งที่ฉันเพิ่งทำไหม Anchor text ด้านบนเป็นคำอธิบายและเกี่ยวข้องกับทั้งบริบทของบทความนี้และ Google SEO Start Guide ที่ลิงก์ไป นั่นคือวิธีที่คุณควรตั้งชื่อ anchor text
Anchor text ควรสร้างความคาดหวัง คล้ายกับวิธีการทำงานของการ์ด UI เป็นตัวอย่างสำหรับเนื้อหาที่มีรายละเอียดมากขึ้น (บทความ หน้าผลิตภัณฑ์ ฯลฯ) ตัวอย่าง:หน้าแรกของ Medium หรือที่นี่ใน TechStacker
ที่จริงฉันเขียนบทความนี้เพื่อเตือนตัวเองว่าการใช้คำอธิบายที่มีความหมายสำหรับเนื้อหานั้นสำคัญเพียงใดโดยทั่วไป ไม่ว่าจะเป็นบล็อก เขียนโค้ด หรือแม้แต่รายการซื้อของ อย่าคลุมเครือ จงอธิบาย
เช่นเดียวกับนักออกแบบผลิตภัณฑ์ดิจิทัล Luke Wroblewski กล่าวว่า:
ย่อมชนะเสมอ