วิธีเพิ่มไฮเปอร์ลิงก์ให้รูปภาพใน WordPress

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

สำหรับเว็บไซต์ธุรกิจ วิธีนี้มีประโยชน์อย่างมาก รูปภาพที่คลิกได้สามารถพาผู้เข้าชมไปยังหน้าบริการ แบบฟอร์มติดต่อ หน้าราคา บทความบล็อก หรือขั้นตอนการสมัครใช้งานได้ เมื่อใช้อย่างเหมาะสม จะช่วยให้ใช้งานง่ายขึ้น สนับสนุนการแปลงเป็นลูกค้า และทำให้หน้าสำคัญค้นหาได้ง่ายขึ้น

ทำไมต้องลิงก์รูปภาพ?

การเพิ่มไฮเปอร์ลิงก์ให้รูปภาพมีประโยชน์ในรูปแบบหน้าเว็บไซต์ที่พบบ่อยหลายแบบ:

• แบนเนอร์หน้าแรกที่นำไปยังข้อเสนอเด่น
• การ์ดบริการที่เปิดหน้ารายละเอียด
• โลโก้ที่พาผู้ใช้กลับไปยังหน้าแรก
• รูปสินค้าที่ลิงก์ไปยังหน้ารายละเอียดสินค้า
• กราฟิกโปรโมชันที่ส่งผู้เข้าชมไปยังหน้าแลนดิ้งแคมเปญ
• ส่วนเรียกให้ดำเนินการที่ต้องการจุดคลิกแบบภาพ

รูปภาพที่คลิกได้สามารถทำให้หน้าเว็บอ่านง่ายขึ้น โดยเฉพาะบนอุปกรณ์มือถือที่สัญญาณภาพมักใช้งานได้ดีกว่าลิงก์ข้อความขนาดเล็ก

ก่อนเริ่มต้น

ตรวจสอบว่าคุณมีสิ่งต่อไปนี้พร้อมแล้ว:

• หน้าเพจหรือบทความ WordPress ที่เผยแพร่แล้วหรือเป็นฉบับร่าง
• รูปภาพที่อัปโหลดไว้ในคลังสื่อหรือพร้อมแทรก
• URL ปลายทางที่คุณต้องการให้รูปภาพเปิด

หากคุณลิงก์ไปยังหน้าภายใน ให้คัดลอก URL ของหน้านั้นไว้ก่อน หากคุณลิงก์ไปยังเว็บไซต์ภายนอก ให้ยืนยันว่าเป็นปลายทางที่น่าเชื่อถือและเกี่ยวข้อง

วิธีเพิ่มไฮเปอร์ลิงก์ให้รูปภาพในตัวแก้ไขบล็อกของ WordPress

เว็บไซต์ WordPress รุ่นใหม่ส่วนใหญ่มักใช้ตัวแก้ไขบล็อก หรือที่เรียกว่า Gutenberg ขั้นตอนค่อนข้างตรงไปตรงมา

1. เปิดหน้าเพจหรือบทความ

จากแผงควบคุม WordPress ของคุณ ไปยังหน้าเพจหรือบทความที่คุณต้องการให้ลิงก์รูปภาพแสดงอยู่

2. แทรกหรือเลือกบล็อกรูปภาพ

หากรูปภาพยังไม่อยู่บนหน้า:

• คลิกปุ่ม +
• เลือกบล็อกรูปภาพ
• อัปโหลดรูปใหม่ เลือกจากคลังสื่อ หรือแทรกจาก URL หากเหมาะสม

หากรูปภาพอยู่บนหน้าแล้ว ให้คลิกหนึ่งครั้งเพื่อเลือกบล็อก

3. เพิ่มลิงก์

เมื่อเลือกบล็อกรูปภาพแล้ว ให้มองหาไอคอนลิงก์ในแถบเครื่องมือของบล็อก

• คลิกปุ่มลิงก์
• วางหรือพิมพ์ URL ปลายทาง
• กด Enter หรือยืนยันการใส่ลิงก์

ขึ้นอยู่กับเวอร์ชัน WordPress และธีมที่ใช้ คุณอาจเห็นตัวเลือกให้ลิงก์ไปยัง:

• ไฟล์มีเดีย
• หน้าไฟล์แนบ
• URL แบบกำหนดเอง
• ไม่มี

สำหรับการใช้งานธุรกิจส่วนใหญ่ Custom URL มักเป็นตัวเลือกที่ดีที่สุด เพราะคุณควบคุมได้เต็มที่ว่ารูปภาพจะพาไปที่ใด

4. ปรับพฤติกรรมของลิงก์หากจำเป็น

ตัวแก้ไขบางแบบให้คุณเลือกได้ว่าลิงก์จะเปิดในแท็บใหม่หรือไม่ สิ่งนี้มักมีประโยชน์สำหรับลิงก์ภายนอก แต่ลิงก์ภายในมักเหมาะที่สุดเมื่อเปิดในแท็บเดิม

ใช้แท็บใหม่เฉพาะเมื่อช่วยให้ผู้เข้าชมใช้งานได้ดีขึ้น หลีกเลี่ยงการบังคับให้ลิงก์ทุกอันเปิดในแท็บใหม่ เพราะอาจทำให้รู้สึกสับสน

5. บันทึกหรืออัปเดตหน้า

คลิก Update, Publish หรือ Save Draft เพื่อบันทึกการเปลี่ยนแปลง

วิธีลิงก์รูปภาพใน Classic Editor

หากเว็บไซต์ของคุณยังใช้ Classic Editor ขั้นตอนจะแตกต่างเล็กน้อย แต่ก็ยังไม่ซับซ้อน

1. แทรกรูปภาพ

คลิก Add Media แล้ววางรูปภาพลงในพื้นที่เนื้อหา

2. เลือกรูปภาพ

คลิกที่รูปภาพเพื่อให้แถบเครื่องมือสำหรับแก้ไขแสดงขึ้น

3. เปิดการตั้งค่าลิงก์

เลือกตัวเลือกสำหรับลิงก์จากแถบเครื่องมือรูปภาพหรือจากแผงรายละเอียดรูปภาพ ขึ้นอยู่กับการตั้งค่าของคุณ

4. ใส่ URL ปลายทาง

วาง URL ลงในช่องลิงก์และยืนยันการเปลี่ยนแปลง

5. อัปเดตบทความหรือหน้าเพจ

บันทึกงานของคุณเพื่อให้รูปภาพที่มีลิงก์ใช้งานได้บนเว็บไซต์จริง

แนวทางปฏิบัติที่ดีที่สุดสำหรับรูปภาพที่มีลิงก์

ไฮเปอร์ลิงก์บนรูปภาพจะมีประโยชน์ก็ต่อเมื่อผู้เข้าชมเข้าใจทันทีว่าคลิกแล้วจะเกิดอะไรขึ้น ปฏิบัติตามแนวทางต่อไปนี้เพื่อให้ประสบการณ์ชัดเจนและมีประสิทธิภาพ

ทำให้ปลายทางชัดเจน

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

ใช้ alt text ที่อธิบายได้

Alt text ช่วยให้โปรแกรมอ่านหน้าจอเข้าใจรูปภาพ และยังสนับสนุนการเข้าถึงสำหรับผู้ใช้ที่มีข้อจำกัดด้านการมองเห็น นอกจากนี้ยังให้บริบทเมื่อรูปภาพไม่สามารถโหลดได้

หากรูปภาพเป็นเพียงองค์ประกอบตกแต่ง คุณอาจไม่จำเป็นต้องใส่ลิงก์เลย

ทำให้รูปภาพสำคัญคลิกได้ดีบนมือถือ

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

หลีกเลี่ยงการลิงก์ไปยังเนื้อหาที่ไม่เกี่ยวข้อง

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

ใช้รูปภาพที่มีลิงก์อย่างพอเหมาะ

รูปภาพที่คลิกได้มากเกินไปอาจทำให้หน้าดูรก ใช้เฉพาะในจุดที่เพิ่มคุณค่าจริง ไม่ใช่แค่เพราะฟีเจอร์นี้มีอยู่

จับคู่รูปภาพกับข้อความประกอบ

พาดหัวสั้น ๆ หรือคำบรรยายใกล้กับรูปภาพจะช่วยให้ผู้เข้าชมเข้าใจขั้นตอนถัดไปได้ดียิ่งขึ้น สิ่งนี้สำคัญเป็นพิเศษสำหรับหน้าโปรโมชันและหน้าบริการ

ตัวอย่างการใช้งานบนเว็บไซต์ธุรกิจ

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

การนำทางหน้าแรก

โลโก้หรือรูปภาพเด่นสามารถพาผู้ใช้ไปยังหน้าสำคัญ เช่น บริการ ราคา หรือ ติดต่อเรา

การโปรโมตสินค้าและบริการ

รูปภาพบนหน้าแลนดิ้งเพจสามารถพาผู้เข้าชมไปลึกขึ้นในเส้นทางการขายของคุณ

การมีส่วนร่วมกับบล็อก

รูปภาพเด่นสามารถลิงก์ไปยังแหล่งข้อมูลที่เกี่ยวข้อง กรณีศึกษา หรือบทความภายในอื่น ๆ

การสร้างลูกค้าเป้าหมาย

แบนเนอร์หรือรูปตราสัญลักษณ์สามารถลิงก์ไปยังแบบฟอร์มสมัคร หน้าให้คำปรึกษา หรือหน้าข้อเสนอ

การสร้างความน่าเชื่อถือ

ตรารับรอง โลโก้พันธมิตร หรือกราฟิกคำรับรองสามารถลิงก์ไปยังหน้าที่มีข้อมูลสนับสนุนเพิ่มเติม

วิธีแก้ปัญหาที่พบบ่อย

หากรูปภาพที่มีลิงก์ไม่ทำงานตามที่คาดไว้ ให้ตรวจสอบสิ่งต่อไปนี้:

ใส่ URL ผิด

ตรวจสอบให้แน่ใจว่าปลายทางถูกต้องครบถ้วน การขาด https:// หรือการลิงก์ภายในที่เสียหายอาจทำให้รูปภาพทำงานไม่ถูกต้อง

รูปภาพถูกลิงก์ไปยังหน้าไฟล์แนบแทนหน้าที่ต้องการ

บางครั้ง WordPress จะตั้งค่าเริ่มต้นเป็นลิงก์ไปยังสื่อหรือหน้าไฟล์แนบ ให้เปลี่ยนเป็นปลายทางที่คุณต้องการอย่างชัดเจน

การเปลี่ยนแปลงในตัวแก้ไขยังไม่ได้บันทึก

หากลิงก์รูปภาพไม่แสดงบนหน้าเว็บจริง ให้ตรวจสอบว่าคุณได้คลิก Update หรือ Publish หลังแก้ไขแล้ว

ปลั๊กอินหรือธีมกำลังรบกวนการทำงาน

Page builder บางตัว ปลั๊กอินเพิ่มประสิทธิภาพ หรือธีมที่ปรับแต่งเองอาจเปลี่ยนวิธีการทำงานของลิงก์รูปภาพ หากจำเป็น ให้ทดสอบหน้าในสภาพแวดล้อม staging โดยปิดปลั๊กอินชั่วคราว

รูปภาพดูเหมือนคลิกได้ แต่ไม่มีอะไรเกิดขึ้น

กรณีนี้อาจเกิดจากมีองค์ประกอบอื่นซ้อนทับรูปภาพ หรือโค้ดแบบกำหนดเองมีผลต่อเลย์เอาต์ของหน้า ลองตรวจสอบโครงสร้างหน้าและทดสอบในเบราว์เซอร์อื่น

เคล็ดลับกลยุทธ์ลิงก์เพื่อประสิทธิภาพเว็บไซต์ที่ดีขึ้น

รูปภาพที่มีลิงก์ควรสนับสนุนกลยุทธ์เนื้อหาโดยรวม ไม่ใช่แค่ทำหน้าที่เป็นของตกแต่ง

• ลิงก์เฉพาะเมื่อรูปภาพช่วยให้ผู้ใช้ก้าวไปยังขั้นตอนถัดไปที่มีประโยชน์
• เชื่อมรูปภาพไปยังหน้าที่สอดคล้องกับความตั้งใจของผู้ใช้
• ใช้คำบรรยายและข้อความเรียกให้ดำเนินการใกล้กับรูปภาพให้ชัดเจน
• ตรวจสอบประสิทธิภาพการคลิกในเครื่องมือวิเคราะห์ข้อมูลเมื่อทำได้
• อัปเดตลิงก์รูปภาพเก่าเมื่อ URL ของหน้าเปลี่ยน

สำหรับเว็บไซต์บริษัท การปรับปรุงเล็ก ๆ เหล่านี้สามารถทำให้การนำทางราบรื่นขึ้นและลดอุปสรรคตลอดเส้นทางของผู้ใช้

สรุปท้ายสุด

การเพิ่มไฮเปอร์ลิงก์ให้รูปภาพใน WordPress เป็นงานที่ทำได้ง่าย แต่เมื่อใช้อย่างมีจุดประสงค์ก็อาจส่งผลอย่างมากต่อการใช้งานและการแปลงเป็นลูกค้า ไม่ว่าคุณจะลิงก์โลโก้ แบนเนอร์ รูปบริการ หรือกราฟิกโปรโมชัน หัวใจสำคัญคือทำให้ปลายทางเกี่ยวข้องและการกระทำชัดเจน

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