มีความคิดหลายอย่างเกี่ยวกับการจัดสไตล์ Anchor Links ด้าน Design วันนี้โฟกัสที่สำคัญกว่า: การตั้งชื่อ Anchor Text และเหตุผล เว็บไซต์จำนวนมากทำผิด ผมก็ผิดเหมือนกัน
เพื่อสร้างลิงก์ที่คลิกได้ เราห่อ Link Path ด้วย Anchor Tag HTML: <a></a> Anchor Tags มี Attribute หลายอย่าง: URL (Link Path) Classes, ID, Title, และ Anchor Text
Anchor Text หมายถึง ส่วน ที่คลิกได้ ของลิงก์ คือ ข้อความ (ไม่ใช่ URL) ที่เราห่อ Anchor Tag รอบ
ลิงก์ไปหน้าแรก TechStacker โค้ด HTML:
<a href="https://techstacker.com">TechStacker </a> - URL ใน
href=""คือ Link Target >TechStacker<คือ Anchor Text ที่คลิกได้นำไป Target
ดู 2 วิธีเขียน Anchor Text ต่างกัน Link Target คือหน้า Performance Optimization วิธีแรกแย่ วิธีที่สองดี:
ทำไม Anchor Text แรกถึงแย่? แรก ไม่บรรยาย ที่สองบรรยายและ เกี่ยวข้อง กับ URL ปลายทาง
เคล็ดลับ Anchor Text:
- ทำให้ Anchor Text สั้น มากกว่า 5 คำมักทำ Layout แน่น ระหว่าง Anchor Tags มี Design เน้นหนัก ขึ้นกับบริบท
- ใช้ Anchor Text ที่มีความหมายและบรรยายได้ "Click here" ไม่บรรยาย ไม่ว่าสำหรับ Screen Readers หรือคนทั่วไป
- Anchor Text ส่งผลต่อ SEO เครื่องมือค้นหาต้องการลิงก์ที่บรรยายและเกี่ยวข้องกับเนื้อหาที่ลิงก์ไป
- Anchor Text ส่งผลต่อ Accessibility คิดว่า Screen Reader จะอ่าน Anchor Text ให้ผู้บกพร่องทางสายตาฟัง ยอมให้นำทางการเขียน Anchor Text
สรุป
Anchor Text ส่งผลต่อ SEO และ UX ด้วยการคิดเล็กน้อยในการตั้งชื่อ Anchor Text คุณจะทำให้ทั้งผู้อ่านและเครื่องมือค้นหามีความสุข
ผมอ่าน Google's SEO Starter Guide สำหรับ Research บทความนี้
เห็นไหมสิ่งที่ผมทำ? Anchor Text ข้างต้นบรรยายและเกี่ยวข้องกับบริบทบทความนี้และ Google SEO Start Guide ที่ลิงก์ไป นั่นคือวิธีตั้งชื่อ Anchor Text
Anchor Text ควรตั้งคาดหวัง คล้าย UI Cards ที่เป็น Preview เนื้อหายาว (บทความ หน้าสินค้า ฯลฯ) ตัวอย่าง: หน้าแรก Medium หรือ TechStacker
ผมเขียนบทความนี้เพื่อเตือนตัวเองว่าการใช้คำบรรยายที่มีความหมายสำคัญมาก โดยทั่วไป ไม่ว่าจะ Blogging, Coding, หรือ List ซื้อของ อย่าคลุมเครือ ให้บรรยาย
เหมือน Digital Product Designer Luke Wroblewski กล่าว:
Obvious always wins.
