ลองพิจารณาคำถามว่าทำไมคุณจึงต้องใช้รูปภาพบนเว็บไซต์ และรูปภาพเหล่านี้มีบทบาทอย่างไรในการเพิ่มประสิทธิภาพ SEO ของทรัพยากร นอกจากนี้ เราจะดูที่การใช้ส่วนประกอบ HTML เป็นชื่อและแอตทริบิวต์ alt สำหรับรูปภาพ และเหตุใดจึงมีความสำคัญ ลองยกตัวอย่างรูปภาพที่ปรับให้เหมาะสมและที่ไม่ปรับให้เหมาะสม พิจารณาคุณภาพที่ใช้รูปภาพ และผลกระทบต่อการดำเนินงานของทรัพยากรบนเว็บอย่างไร
ข้อดีข้อเสียของการใช้รูปภาพในโครงการเว็บ:
1. ข้อดี
เป็นไปได้มากว่าเมื่อคุณไปที่เว็บไซต์ใดๆ คุณจะสังเกตเห็นว่าเกือบทุกเว็บไซต์มีรูปภาพ ภาพถ่าย รูปภาพ หรือองค์ประกอบกราฟิกอื่นๆ ที่หลากหลาย
สิ่งที่มักเกิดขึ้นคือเจ้าของเว็บไซต์เขียนข้อความอีกข้อความในหัวข้อใดหัวข้อหนึ่งและต้องการเน้นย้ำความคิดของตนให้ชัดเจนเพื่อให้ผู้เยี่ยมชมที่เข้ามาเยี่ยมชมเว็บไซต์สามารถเข้าใจได้ชัดเจนยิ่งขึ้นและพอใจกับข้อมูลที่ได้รับครบถ้วน เพราะในเวลาต่อมาส่งผลดีต่ออำนาจของทรัพยากรในสายตาของผู้ใช้และการโปรโมตเว็บไซต์ในเครื่องมือค้นหา โซเชียลเน็ตเวิร์ก ฯลฯ
ผู้ที่ท่องอินเทอร์เน็ตเพื่อค้นหาข้อมูล (เนื้อหา) ที่จำเป็นจะรู้ว่าไซต์ของคุณนอกเหนือจากเนื้อหาคุณภาพสูงและมีประโยชน์แล้ว ยังมีสื่อช่วยการมองเห็นในรูปแบบของรูปภาพ รูปภาพ และกราฟิกอื่น ๆ อีกด้วย โดยปกติแล้ว เพื่อให้รูปภาพของคุณสร้างความประทับใจ คุณจะต้องอัปโหลดรูปภาพเหล่านั้นไปยังไซต์ โดยจะต้องมีคุณภาพดีเยี่ยม โดยต้องระบุแอตทริบิวต์ title และแอตทริบิวต์ alt แน่นอน
ด้านบวกถัดไปของการใช้รูปภาพบนเว็บไซต์คือความสามารถในการปรับให้เหมาะสมสำหรับข้อความค้นหาหลักบางรายการของหน้าทรัพยากรที่เกี่ยวข้องซึ่งมีรูปภาพเหล่านั้นอยู่ สิ่งนี้ส่งผลโดยตรงต่อการโปรโมตเพจตามคำหลักที่ได้รับการโปรโมต
ยิ่งไปกว่านั้น เสิร์ชเอ็นจิ้นยังให้การค้นหารูปภาพที่อยู่ในโครงการเว็บอีกด้วย หากคุณได้ลงทะเบียนคีย์สำหรับรูปภาพแล้ว ผู้ใช้ที่เลือกรูปภาพตามคำขอนี้สามารถไปที่ทรัพยากรของคุณโดยใช้รูปภาพที่เลือกได้ เป็นผลให้คุณจะได้รับผู้เยี่ยมชมเป้าหมายรายอื่น
2. ข้อเสีย
เมื่อใช้รูปภาพ ภาพถ่าย รูปภาพบนเว็บไซต์ ข้อเสียส่วนใหญ่มักพบในผู้เริ่มต้น เนื่องจากการใช้องค์ประกอบกราฟิกในโครงการเว็บอาจทำให้ผู้อ่านตกใจได้
เหตุผล:
การอัปโหลดภาพคุณภาพต่ำในสภาพแย่มาก
โดยทั่วไปการใช้รูปถ่ายจะนอกประเด็น
การมีรูปภาพมากเกินไป ซึ่งเพิ่มน้ำหนักให้กับหน้าและทำให้การโหลดยาวขึ้น (แม้แต่พื้นหลังของเทมเพลต)
ขาดการเพิ่มประสิทธิภาพเช่น รูปภาพไม่มีแอตทริบิวต์ alt และ title และไม่ได้ "ปรับแต่ง" ให้เหมาะกับข้อความค้นหาที่สำคัญโดยเฉพาะ
บทบาทของชื่อและแอตทริบิวต์ Alt ในการเพิ่มประสิทธิภาพ SEO ของรูปภาพ
ดังที่เราได้กล่าวไปแล้ว การใช้รูปภาพช่วยเว็บไซต์ในการโปรโมตและโปรโมตในเครื่องมือค้นหา นอกจากนี้ ยังช่วยเพิ่มจำนวนผู้เยี่ยมชมเป้าหมายจากเครื่องมือค้นหาเดียวกันอีกด้วย และสำหรับสิ่งนี้คุณเพียงแค่ต้องใช้คุณสมบัติง่ายๆ สองสามอย่าง แต่ในขณะเดียวกันก็มีคุณสมบัติที่สำคัญ - นี่คือคุณลักษณะ ชื่อและคุณลักษณะ ทางเลือกอื่นสำหรับรูปภาพ รูปถ่าย และกราฟิกอื่นๆ สาระสำคัญของคุณลักษณะเหล่านี้คือการใช้สิ่งเหล่านี้เพื่อบีบให้เกิดประโยชน์สูงสุดซึ่งจะช่วยส่งเสริมทรัพยากรในเครื่องมือค้นหา เนื่องจากมีคุณสมบัติเพียงสองประการเท่านั้น ดังนั้นจึงมีสองบทบาทที่พวกเขาปฏิบัติด้วยและมีความแตกต่างกัน
แม้ว่านี่จะเป็นวิธีการง่าย ๆ ในการเพิ่มตำแหน่งของโครงการเว็บในเครื่องมือค้นหา แต่ผู้ดูแลเว็บส่วนใหญ่ไม่ได้ใช้มันอย่างเต็มที่หรือเพิกเฉยต่อมันเลย บางคนสับสนโดยสิ้นเชิงและไม่ทราบถึงความแตกต่างระหว่างพวกเขา นอกจากนี้ยังเกิดขึ้นที่แอตทริบิวต์เหล่านี้เรียกว่าแท็ก แต่สิ่งเหล่านี้เป็นแอตทริบิวต์ของแท็ก img (จากคำว่า "รูปภาพ") แต่ไม่ใช่แท็กแยกกัน จำไว้!
แท็ก "img" ของ HTML ใช้เพื่อแสดงรูปภาพ (รูปภาพ ภาพถ่าย) ในรูปแบบกราฟิก PNG, JPEG หรือ GIF บนหน้าเว็บไซต์ หากจำเป็น คุณสามารถสร้างลิงก์รูปภาพเดียวกันได้ โดยคุณต้องใส่แท็ก "img" ไว้ในคอนเทนเนอร์ .
1. คุณลักษณะ ALT
คุณลักษณะนี้รวมอยู่ในภาษา HTML มีวัตถุประสงค์เพื่ออธิบายวัตถุเพื่อให้ข้อมูลเพิ่มเติมเกี่ยวกับวัตถุนี้ (ในกรณีของเราคือรูปภาพ) เหล่านั้น. แอตทริบิวต์ Alt สำหรับรูปภาพจะสื่อคำอธิบายไปยังเบราว์เซอร์เมื่อปิดใช้งานกราฟิก หากคุณไม่ระบุแอตทริบิวต์นี้ ผู้เข้าชมจะเห็นไอคอนว่างแทนที่จะเป็นรูปภาพที่ต้องการ แต่หากคุณระบุแอตทริบิวต์ alt ข้อความก็จะปรากฏขึ้น อย่างไรก็ตาม คุณลักษณะนี้มีผลกระทบมากที่สุดต่อการจัดอันดับรูปภาพโดยบอทของเครื่องมือค้นหา
คุณลักษณะนี้ทำงานอย่างไร ใช่ มันง่ายมาก: นำรูปภาพที่เลือกซึ่งคุณได้ดาวน์โหลดไปยังคอมพิวเตอร์ของคุณแล้วอัปโหลดไปยังหน้าที่ต้องการของเว็บไซต์ของคุณในตำแหน่งที่ถูกต้อง จากนั้นค้นหาโค้ด HTML ของรูปภาพนี้และป้อนความหมายต่อไปนี้: alt = “อธิบายรูปภาพโดยย่อและป้อนคำสำคัญ” คำอธิบายควรสั้นที่สุดเท่าที่จะทำได้ (สูงสุดสองสามประโยค) และไม่จำเป็นต้องใส่คำหลักจำนวนมากในนั้น เนื่องจากเครื่องมือค้นหามีทัศนคติเชิงลบต่อสิ่งนี้ และอาจส่งผลเสียต่อโครงการของคุณ
แอตทริบิวต์ alt ทำงานดังนี้: ผู้เยี่ยมชมมาที่ไซต์ของคุณเห็นรูปภาพ แต่ไม่มีคำอธิบายสำหรับเขา (หากเปิดใช้งานฟังก์ชั่นการแสดงรูปภาพในเบราว์เซอร์ของเขา) แต่บอทการค้นหาจะเห็นมันเมื่อจัดทำดัชนีทรัพยากร หากเบราว์เซอร์ของผู้ใช้ปิดใช้งานฟังก์ชันนี้ข้อความ (คำอธิบายของคุณ) จะปรากฏขึ้นแทนที่รูปภาพซึ่งผู้อ่านจะเข้าใจว่าเป็นรูปภาพประเภทใด
2. แอตทริบิวต์ชื่อ
คุณลักษณะ title นี้รวมอยู่ในภาษา HTML ด้วย โดยพื้นฐานแล้วจุดประสงค์จะเหมือนกับแอตทริบิวต์ alt แต่ความแตกต่างคือผู้เข้าชมจะเห็นคำอธิบายของคุณหากเขาวางเคอร์เซอร์ไว้เหนือรูปภาพที่เลือก คุณลักษณะนี้ไม่ส่งผลต่อการโปรโมตและการโปรโมตไซต์ แต่อาจส่งผลต่อปัจจัยด้านพฤติกรรมที่ส่งผลต่อการจัดอันดับของโครงการเว็บ เราเขียนแบบนี้: title = “อธิบายรูปภาพ” นั่นคือทั้งหมดที่ ให้เราเพิ่มการเพิ่มประสิทธิภาพรูปภาพ คุณลักษณะ ทั้งหมดนี้มีบทบาทสำคัญในการโปรโมตเว็บไซต์ในเครื่องมือค้นหา
ด้านล่างนี้คือตัวอย่างรูปภาพที่ปรับให้เหมาะสมกับ SEO โดยใช้แอตทริบิวต์ title และ alt
คุณจะเห็นตัวอย่างภาพที่ปรับให้เหมาะสมพร้อมคุณสมบัติเหล่านี้:
การกรอกชื่อและแอตทริบิวต์ alt สำหรับผู้ใช้นั้นง่ายกว่ามากใน WordPress CMS เมื่อคุณอัปโหลดรูปภาพไปยังไซต์ ตัวโหลดพิเศษและหน้าต่างพิเศษสำหรับการเพิ่มประสิทธิภาพจะปรากฏขึ้น:
ชื่อ (เพื่อไม่ให้สับสนกับชื่อ) จะถูกกรอกโดยอัตโนมัติ แต่คุณจะต้องกรอกแอตทริบิวต์ alt ด้วยตัวเอง ถัดไปทันทีหลังจากแทรกรูปภาพลงในไซต์แล้วจะต้องแก้ไข คลิกที่มันในตัวแก้ไขภาพแล้วคุณจะเข้าสู่หน้าต่างตัวแก้ไข:
อย่างที่คุณเห็น คุณสามารถป้อนแอตทริบิวต์ alt ได้ที่นี่ แต่มีการกรอกไว้แล้ว (ซึ่งเป็นสิ่งสำคัญสำหรับรูปภาพที่คุณจะใช้เป็นภาพขนาดย่อ) นี่คือที่ที่คุณกรอกแอตทริบิวต์ ชื่อโดยเขียนข้อความค้นหาที่สำคัญเหมือนกับที่คุณระบุในปลั๊กอิน: All In SEO Pack หลังจากนั้น ให้บันทึก เท่านี้ก็เรียบร้อย รูปภาพของคุณได้รับการปรับให้เหมาะสมแล้ว
รูปภาพควรใช้คุณภาพเท่าใดบนเว็บไซต์?
คุณต้องอัปโหลดรูปภาพไปยังไซต์ด้วยคุณภาพที่ดีที่สุดเท่าที่จะเป็นไปได้ แต่คุณต้องแน่ใจว่ารูปภาพเหล่านั้นจะไม่ส่งผลต่อความเร็วในการโหลดหน้าเว็บ เนื่องจากยังมีผู้ใช้ที่ความเร็วอินเทอร์เน็ตต่ำ ดังนั้น หากเพจใช้เวลาโหลดนาน บุคคลนั้นจะออกจากไซต์อย่างแน่นอนและไม่น่าจะกลับมาอีก!
นอกจากนี้คุณยังสามารถสังเกตเห็นความแตกต่างนี้ในโครงการเว็บหลายแห่ง: นอกเหนือจากการใช้รูปภาพขนาดใหญ่กิโลไบต์ (ขนาด) แล้ว แอตทริบิวต์ชื่อและ alt จะไม่ถูกใช้ที่นี่โดยธรรมชาติ แต่ยังใช้พื้นหลังไซต์ขนาดใหญ่อีกด้วย หากคุณต้องการใช้รูปภาพเป็นพื้นหลังของไซต์ด้วย เราขอแนะนำให้คุณเลือกรูปภาพที่มีขนาดเล็กและมีสีเดียว เนื่องจากรูปภาพจะถูกทำให้เรียบและคุณจะได้ภาพที่ชัดเจน
นอกเหนือจากการอัปโหลดรูปภาพคุณภาพสูงไปยังไซต์แล้วอย่าลืมเกี่ยวกับการใช้พื้นที่ดิสก์บนโฮสติ้งและความเร็วในการทำงาน ยิ่งความเร็วต่ำลง ทรัพยากรของคุณก็จะโหลดช้าลงเท่านั้น ดังนั้น เราขอแนะนำว่าก่อนที่จะใช้รูปภาพคุณภาพสูงสำหรับหน้าเว็บไซต์ ควรตัดสินใจว่าจะใช้รูปภาพใดและจะอัปโหลดรูปภาพไปยังหน้าได้กี่ภาพ
คุณยังสามารถใช้ Photoshop เพื่อลดน้ำหนักของภาพได้ ในโปรแกรมไปที่เมนู "ไฟล์" → "บันทึกสำหรับเว็บและอุปกรณ์" - เพียงเท่านี้
ปรับปรุงการเพิ่มประสิทธิภาพโครงการของคุณ ร่วมกับผู้ที่มีความสามารถ คุณจะมีโครงการที่ดี!
เกือบทุกบทความและหน้าบนอินเทอร์เน็ตมีลิงก์และรูปภาพ และหากคุณไม่มีลิงก์และรูปภาพ ให้เพิ่มและเพิ่มประสิทธิภาพทันที คุณสามารถปรับรูปภาพและลิงก์ให้เหมาะสมได้โดยใช้แอตทริบิวต์ชื่อและ Alt เราจะดูวิธีดำเนินการอย่างถูกต้องในบทความนี้
ก่อนหน้านี้เราพิจารณาโดยทั่วไปแล้ว ตอนนี้เรามาพูดถึงรูปภาพและลิงก์โดยเฉพาะมากขึ้น
การใช้ชื่อและแอตทริบิวต์ Alt อย่างเหมาะสมจะช่วยให้คุณสามารถเพิ่มประสิทธิภาพรูปภาพและลิงก์ของคุณ และช่วยเพิ่มการเข้าชมไซต์ของคุณ
การนำทางหน้า:
ความแตกต่างระหว่างแอตทริบิวต์ title และ alt
อะไรคือความแตกต่างระหว่างแอตทริบิวต์ title และ alt?- เมื่อมองแวบแรก พวกมันมีภาระข้อมูลที่คล้ายกัน อย่างไรก็ตาม พวกมันมีความแตกต่างและมีความสำคัญมาก
แอตทริบิวต์ชื่อ(เพื่อไม่ให้สับสนกับแท็ก Title) อธิบายองค์ประกอบที่องค์ประกอบนั้นตั้งอยู่ เมื่อคุณวางเมาส์เหนือองค์ประกอบ คุณจะเห็นคำอธิบายที่ซ่อนอยู่ในแอตทริบิวต์ วัตถุประสงค์หลักของแอตทริบิวต์คือการให้ข้อมูลเพิ่มเติมแก่ผู้เยี่ยมชมเว็บไซต์ ชื่อควรเปิดเผยแก่นแท้ขององค์ประกอบ, ไม่ว่าจะเป็นรูปภาพหรือลิงค์
แอตทริบิวต์สำรอง- เป็นแอตทริบิวต์ของแท็ก img โดยมีวัตถุประสงค์เพื่อแสดงสาระสำคัญของรูปภาพในกรณีที่ไม่สามารถโหลดรูปภาพได้หรือเมื่อการตั้งค่าเบราว์เซอร์ปิดการใช้งานการวาดภาพโดยเจตนา คุณสมบัติที่สองที่ไม่ควรละเลยคือข้อเท็จจริงที่ว่าโรบ็อตการค้นหาจะอ่านแอตทริบิวต์ alt เนื่องจากขณะนี้พวกเขาไม่ทราบวิธีอ่านรูปภาพ แอตทริบิวต์ alt จึงเป็นข้อมูลเกี่ยวกับรูปภาพที่พวกเขาป้อนลงในฐานข้อมูลสำหรับพวกเขา
แอตทริบิวต์ Alt และ title สำหรับรูปภาพ
เมื่อเพิ่มรูปภาพในโพสต์ อย่าลืมใช้แอตทริบิวต์ชื่อและ Alt ในคุณลักษณะเหล่านี้ ควรรวมคำหลักที่เกี่ยวข้องกับโพสต์ของคุณ ซึ่งไม่เพียงแต่จะทำให้มีความเข้มข้นของคำหลักใน "รูปภาพ" โดยรวมของเนื้อหา แต่ยังช่วยให้คุณก้าวหน้าในการค้นหารูปภาพอีกด้วย
สิ่งที่ต้องเขียนในชื่อและแอตทริบิวต์ alt?
คุณลักษณะชื่อมีไว้สำหรับผู้เยี่ยมชมสำหรับข้อมูลโดยละเอียดเกี่ยวกับรูปภาพ เมื่อคุณวางเคอร์เซอร์ไว้เหนือรูปภาพ เราจะได้ข้อความที่เขียนไว้ในชื่อเรื่อง ชื่อควรมีคำอธิบายที่กว้างขวางซึ่งจะทำให้คุณเข้าใจแก่นแท้ของภาพ
Alt มีข้อมูลมากกว่าสำหรับโรบ็อตการค้นหา เนื่องจากเป็นทางเลือกแทนภาพกราฟิก และควรป้อนคำที่เฉพาะเจาะจงมากขึ้นลงในคุณลักษณะนี้เพื่อสรุปสาระสำคัญของสิ่งที่นำเสนอ
ตัวอย่างการใช้แอตทริบิวต์ชื่อและ Alt เมื่อปรับภาพให้เหมาะสม
ลองดูตัวอย่างการใช้แอตทริบิวต์ title และ alt และการเติมที่เหมาะสมที่สุด เรามีภาพนี้:
แท็ก img ในกรณีนี้มีลักษณะดังนี้:
.
จากตัวอย่างนี้เราจะเห็นว่า มีการใช้ค่า altในรูปแบบที่เข้มงวดมากขึ้นจะแสดงขึ้นมาเมื่อปิดการแสดงภาพหรือมีปัญหาในการโหลดภาพ ทำไมต้องอยู่ในรูปแบบบีบอัด? ความจริงก็คือว่าถ้าเราเขียนข้อความขนาดใหญ่แต่รูปภาพไม่โหลด เราก็มักจะเห็นข้อความซ้ำกัน กล่าวอีกนัยหนึ่ง คุณไม่ควรส่งส่วนของข้อความไปยังแอตทริบิวต์ alt คุณต้องรวมส่วนนั้นไว้ในลักษณะที่สั้นที่สุด
ตอนนี้เรามาดูแอตทริบิวต์ title กันดีกว่า ซึ่งมีการนำเสนออย่างกว้างขวางมากขึ้น และมีข้อมูลมากขึ้นสำหรับผู้อ่าน เมื่อคุณวางเคอร์เซอร์ไว้เหนือรูปภาพ เราจะเห็นผลของแอตทริบิวต์ title
สิ่งสำคัญ: พยายามอย่าทำซ้ำชื่อโพสต์หลักและ Alt เพราะอาจทำให้เกิดสแปม ซึ่งจะส่งผลเสียต่อการโปรโมต แก้ไขข้อความในแอตทริบิวต์
การเพิ่มประสิทธิภาพลิงก์ภายในโดยใช้แอตทริบิวต์ชื่อ
เพื่อ ปรับลิงค์ให้เหมาะสมใช้เพียงอันเดียว แอตทริบิวต์ชื่อ. วัตถุประสงค์ของแอตทริบิวต์ title ในลิงก์- ให้ข้อมูลเกี่ยวกับการเปลี่ยนแปลงที่เสนอ เพื่อความเข้าใจที่ดีขึ้นว่าผู้เขียนอ้างอิงถึงจุดใด และสิ่งที่เราจะได้เห็นในที่สุด
สิ่งที่ต้องเขียนในแอตทริบิวต์ชื่อลิงก์?
คำอธิบายในลิงค์ชื่อเรื่องควรให้ข้อมูลและเกี่ยวข้องกับข้อความของทั้งโพสต์ซึ่งมีลิงก์อยู่และไปยังหน้า Landing Page ของการเปลี่ยนแปลง กล่าวอีกนัยหนึ่ง คุณควรอ้างอิงเฉพาะบทความที่มีหัวข้อคล้ายกันเท่านั้น
ข้อความชื่อเรื่องควรแตกต่างจากจุดยึด (ข้อความลิงก์) ซึ่งเป็นสิ่งสำคัญและไม่ควรลืม มันก็คุ้มค่าเช่นกัน ใช้คำสำคัญในชื่อเรื่องซึ่งจะเพิ่มน้ำหนักของหน้า Landing Page
ตัวอย่างการใช้แอตทริบิวต์ title เมื่อเพิ่มประสิทธิภาพลิงก์
ตามที่เราเห็นเราได้มีส่วนร่วม แอตทริบิวต์ชื่อในคำอธิบายลิงก์และจุดยึดนั้นแตกต่างจากข้อความชื่อเรื่อง แต่ทั้งสองอย่างให้ข้อมูลอย่างให้ข้อมูลแก่เราเกี่ยวกับลิงก์ ซึ่งเป็นสิ่งที่เราจำเป็นต้องทำให้สำเร็จ
หากนี่เป็นครั้งแรกที่คุณแยกแยะข้อมูลนี้ แสดงว่าคุณมีงานอีกมากรออยู่ข้างหน้าเพื่อเพิ่มประสิทธิภาพลิงก์และรูปภาพของคุณ แม้จะใช้เวลานาน แต่ก็คุ้มค่า
นี่เป็นการสรุปบทเรียนเกี่ยวกับการเพิ่มประสิทธิภาพรูปภาพและลิงก์ ยังมีสิ่งที่น่าสนใจมากมายรออยู่ข้างหน้า แต่สำหรับตอนนี้ คุณสามารถศึกษาส่วนที่เหลือและการเพิ่มประสิทธิภาพกลไกค้นหาได้
ได้รับการปรับให้เหมาะสมและขอให้ TOP 1 อยู่กับคุณ)))
แอตทริบิวต์ alt เป็นแหล่งข้อมูลอื่นสำหรับผู้ใช้ที่ปิดใช้งานการแสดงรูปภาพในเบราว์เซอร์ หากมีการกำหนดแอตทริบิวต์ alt เมื่อไม่สามารถแสดงรูปภาพได้ ข้อความแอตทริบิวต์จะแสดงแทนที่:
หากไม่มีการตั้งค่าแอตทริบิวต์ alt รูปภาพจะแสดงเป็นค่าว่าง:
สิ่งสำคัญอย่างยิ่งคือต้องอธิบายรูปภาพโดยใช้แอตทริบิวต์ alt สำหรับไซต์ที่มีเนื้อหาประกอบด้วยรูปภาพเป็นหลัก
คุณสามารถตั้งค่าแอตทริบิวต์ alt ได้ดังนี้:
ในแอตทริบิวต์ alt คุณไม่ควรเขียนคำหลักทั้งหมดของไซต์หรือหน้าเว็บ แต่เฉพาะคำหลักที่เกี่ยวข้องกับรูปภาพเท่านั้น สิ่งนี้จะช่วยให้หุ่นยนต์ค้นหารูปภาพได้แม่นยำยิ่งขึ้น และผู้ใช้ Yandex สามารถเลือกรูปภาพนั้นในผลการค้นหาและไปที่เว็บไซต์ของคุณ ไม่แนะนำให้ปล่อยแอตทริบิวต์ alt ว่างไว้
หากคุณกำลังเพิ่มรูปภาพที่คล้ายกันหลายรูป (เช่น รูปภาพของผลิตภัณฑ์จากร้านค้าออนไลน์) ก็ควรตั้งค่าแอตทริบิวต์ Alt ที่ไม่ซ้ำกัน (มุมมองด้านหน้า, มุมมองด้านหลัง)
ข้อความแอตทริบิวต์ชื่อแท็ก Img
แอตทริบิวต์ title ให้ข้อมูลเพิ่มเติมเกี่ยวกับรูปภาพ ข้อความที่อยู่ในแอตทริบิวต์นี้จะปรากฏขึ้นเมื่อคุณวางเมาส์เหนือรูปภาพ:
คุณสามารถตั้งค่าแอตทริบิวต์ชื่อดังนี้:
สำหรับแต่ละภาพ คุณควรระบุชื่อที่ไม่ซ้ำกัน ไม่แนะนำให้เว้นแอตทริบิวต์ title ว่างไว้
ข้อความอื่น ๆ
นอกเหนือจากค่าของแอตทริบิวต์ alt และ title แล้ว ข้อความต่อไปนี้ยังใช้ในการค้นหาด้วยรูปภาพ:
ข้อความลิงก์ไปยังรูปภาพจากหน้าอื่นและเว็บไซต์อื่น
ข้อความที่อยู่ติดกับรูปภาพ - อยู่บนหน้าใกล้กับรูปภาพ
ข้อความและชื่อเรื่องของเอกสารสั้น ๆ ที่เป็นภาพเดียว
ชื่อไฟล์และสคริปต์รูปภาพ รวมถึงคำนึงถึงการทับศัพท์และการแปลแบบอินไลน์แบบง่าย
อย่างไรก็ตาม แอตทริบิวต์ Alt และ Title เป็นแอตทริบิวต์ที่เป็นสากลมากที่สุด ดังนั้นจึงควรรวมไว้ด้วยเสมอ
สวัสดีเพื่อนรัก วันนี้ตามคำร้องขอของหนึ่งในสมาชิกของฉัน ฉันจะบอกคุณเกี่ยวกับแท็ก ALT (แอตทริบิวต์) ซึ่งควรจะปรากฏในพารามิเตอร์ของแต่ละภาพบนไซต์
การไม่มีแอตทริบิวต์ alt จะไม่ปรากฏภายนอกในภาพ แต่ภายในซอร์สโค้ด การไม่มีแท็ก alt ถือเป็นข้อผิดพลาด และโรบ็อตการค้นหาจะนับทุกข้อผิดพลาดดังกล่าว และดูเหมือนเรื่องเล็ก ๆ น้อย ๆ ดังกล่าวทำให้การโปรโมตเครื่องมือค้นหาของเว็บไซต์ใด ๆ ช้าลง
และหากเมื่อวางรูปภาพในบทความคุณสามารถระบุข้อความแสดงแทนที่ต้องการได้ทันที จากนั้นรูปภาพ (องค์ประกอบ) ของการออกแบบก็จะยากขึ้น มันเกิดขึ้นที่องค์ประกอบการออกแบบเฉพาะเหล่านี้ไม่มีแท็ก alt และผู้เริ่มต้นหลายคนไม่รู้ด้วยซ้ำเกี่ยวกับการมีข้อผิดพลาดเหล่านี้บนเว็บไซต์ของตน
เหตุใดจึงต้องมีแอตทริบิวต์ alt
มันเป็นเรื่องของกลไกที่เบราว์เซอร์โหลดหน้าเว็บไซต์ เมื่อเพจโหลด ข้อความจากแอตทริบิวต์ alt จะถูกโหลดก่อน จากนั้นข้อความจะเปลี่ยนเป็นรูปภาพ หากปิดใช้งานการโหลดรูปภาพในเบราว์เซอร์ รูปภาพจะมีข้อความแสดงแทน (จากแอตทริบิวต์ alt) แทน
โรบ็อตการค้นหาจะมองเห็นหน้าเว็บเป็นซอร์สโค้ดเท่านั้น และการมีอยู่ของแท็ก Alt จะบอกพวกเขาเกี่ยวกับเนื้อหาของรูปภาพ อย่างไรก็ตามแม้กระทั่งการมีแท็ก alt ที่ไม่มีข้อความก็ได้รับการยอมรับจากเครื่องมือค้นหาแล้วว่าเป็นสัญญาณของรูปแบบที่ดี นั่นคือจำเป็นต้องมีการมีอยู่ของแอตทริบิวต์ แต่ค่าของแอตทริบิวต์นั้นเป็นทางเลือก
Alt="value" !}
วิธีตรวจสอบรูปภาพสำหรับแอตทริบิวต์ alt
วิธีที่ง่ายและเข้าถึงได้มากที่สุดสำหรับทุกคนคือการตรวจสอบซอร์สโค้ดของเพจ (การตรวจสอบโค้ด) เพื่อหาข้อผิดพลาด
ในการดำเนินการนี้ คุณต้องเปิดบริการตรวจสอบรหัส W3Cและกรอก url ของเพจ
หลังจากตรวจสอบซอร์สโค้ดบนหน้าที่ระบุ รายงานความพร้อมใช้งานและข้อมูลข้อผิดพลาด (ถ้ามี) จะเปิดขึ้นบนหน้าจอ และหากรูปภาพอย่างน้อยหนึ่งภาพบนหน้าไม่มีแท็ก Alt คุณจะเห็นข้อผิดพลาดนี้:
หมายเหตุ: หากมีข้อผิดพลาดจำนวนมาก ขอแนะนำให้คุณใช้การค้นหา CTRL+F เพื่อค้นหาข้อมูลที่คุณต้องการอย่างรวดเร็ว
นี่เป็นอีกวิธีหนึ่งที่จะช่วยให้คุณค้นหาข้อผิดพลาดในซอร์สโค้ดของเว็บไซต์ของคุณ แต่หากต้องการใช้เครื่องมือนี้ คุณต้องลงทะเบียนในบัญชีผู้ดูแลเว็บ Bing และในสำนักงานแห่งนี้ก็มีเครื่องมืออยู่ “เครื่องมือวิเคราะห์ SEO”.
โดยที่คุณป้อนที่อยู่ของหน้าเว็บไซต์เพื่อการวิเคราะห์และรับรายงาน และหากมีแท็กหายไปที่ไหนสักแห่ง ทางเลือกอื่นคุณจะเห็นมัน
คุณยังสามารถดูซอร์สโค้ดของหน้าเพื่อดูว่าต้องดูที่ใด ในการทำเช่นนี้คุณต้องไปที่บุ๊กมาร์ก “รหัสเพจ”และหาว่าผิดพลาดตรงไหน ทำได้ง่าย โดยโค้ดที่ต้องการจะถูกเน้นด้วยสีเหลือง
วิธีค้นหาซอร์สโค้ดที่ต้องการและเพิ่มแอตทริบิวต์ alt
ก่อนอื่น คุณต้องดูข้อมูลที่คุณได้รับจากเครื่องมือวิเคราะห์อย่างละเอียด ใส่ใจ:
- เป็นชื่อไฟล์รูปภาพ
— ชื่อของคลาส, บล็อกที่รูปภาพนั้นอยู่,
- ไปยังองค์ประกอบที่อยู่ติดกัน
องค์ประกอบทั้งหมดเหล่านี้จะช่วยในอนาคตในการค้นหาไฟล์และในส่วนของซอร์สโค้ดที่ต้องการ
เป็นตัวอย่าง ดูภาพหน้าจอด้านบน รหัสที่เราต้องการนั้นไม่ธรรมดา ใช่ เรารู้ว่าแบนเนอร์นี้อยู่บนอะไร หนังสือฟรีใหม่ของ Azamat- ยิ่งกว่านั้น เรารู้ว่าแบนเนอร์นั้นอยู่ในแถบไซต์ แต่ลองจินตนาการว่าฉันไม่สนใจเรื่องนี้ แล้วคุณเรียนรู้อะไรจากโค้ดนี้ได้บ้าง?
ก่อนอื่นเรารู้ชื่อไฟล์รูปภาพแล้ว และไม่สำคัญว่ารูปภาพนั้นจะอยู่ในไซต์อื่น เรายังเห็นบล็อก DIV พร้อมคลาสด้วย
และจากคลาส "textwidget" เป็นที่ชัดเจนว่าโค้ดที่เราต้องการนั้นอยู่ใน Widgets และถ้าเป็นเช่นนั้นก็ไม่มีประโยชน์ที่จะมองหาองค์ประกอบทั้งหมดที่เราให้ความสนใจ เนื่องจากในธีม WordPress ส่วนใหญ่ วิดเจ็ตในแถบไซต์จึงถูกสร้างขึ้นแบบไดนามิก ซึ่งหมายความว่าในโค้ดของไฟล์ที่รับผิดชอบแถบไซต์ ( แถบด้านข้าง.php) ส่วนใหญ่เป็นโค้ด PHP ซึ่งไม่ได้ชี้ไปที่วิดเจ็ตเฉพาะแต่อย่างใด
ดังนั้นไปที่แผงผู้ดูแลระบบ WordPress กัน – "รูปร่าง" — "วิดเจ็ต"และค้นหาวิดเจ็ตที่ต้องการ
และที่นี่เราเพิ่มแอตทริบิวต์ alt ให้กับพารามิเตอร์รูปภาพ
ถึง
หลังจาก 
alt="การตลาดเชิงข้อมูล 20/80"
!}/>
แค่นั้นแหละ. ทุกอย่างพร้อมแล้ว.
แต่ทุกอย่างชัดเจนด้วยวิดเจ็ตนี้ใครๆ ก็จัดการได้ แล้วองค์ประกอบการออกแบบเฉพาะล่ะ?
ตามตัวอย่าง ฉันจะแสดงเทมเพลตที่ฉันใช้ตอนนี้เฉพาะในเวอร์ชันดั้งเดิมเท่านั้น นั่นคือในขั้นตอนการติดตั้งมีข้อผิดพลาด 21 ข้อ (ไม่มีแอตทริบิวต์ alt)
เปิดแท็บ “รหัสเพจ”และวิเคราะห์โค้ด เรากำลังมองหาองค์ประกอบที่เราสามารถยึดเกาะได้ โดยที่เราสามารถค้นหาไฟล์และโค้ดที่ต้องการได้
ในพารามิเตอร์การค้นหา คุณควรเลือกเพื่อค้นหาไฟล์ทั้งหมดที่มีโค้ดที่มีการกล่าวถึงองค์ประกอบที่คุณกำลังมองหา ในกรณีของเราคือชื่อของไฟล์รูปภาพ
ต่อไป เป็นการดีกว่าถ้าสร้างสำเนาสำรองของไฟล์ (คัดลอกแยกต่างหากไปยังคอมพิวเตอร์ของคุณ) แล้วคุณก็สามารถเริ่มแก้ไขได้ ใน Total Commander เพียงเลือกไฟล์แล้วกด F4 หรือคุณสามารถคัดลอกไฟล์ไปยังคอมพิวเตอร์ของคุณและเปิดโดยใช้ Notepad++ หรืออย่างน้อยก็ผ่าน Notepad
ดังนั้นให้เปิดไฟล์แล้วค้นหารหัสที่ต้องการ คุณสามารถใช้การค้นหา CTRL+F
เราพบมันและแทรกแอตทริบิวต์ alt ที่จำเป็น แล้วกับภาพทั้งหมดที่ไม่มีมัน
หลังจากทำการเปลี่ยนแปลงแล้ว ให้บันทึกไฟล์และตรวจสอบอีกครั้งด้วยเครื่องมือวิเคราะห์
เพื่อน ๆ นี่คือวิธีการเพิ่มแอตทริบิวต์ alt ให้กับรูปภาพ หากต้องการดูตัวอย่างที่เป็นภาพ โปรดดูวิดีโอบทช่วยสอน และจำไว้ว่าจะเป็นการดีกว่าหากทำการแก้ไขเทมเพลตทั้งหมดนี้
และแน่นอนอ่านบทความเกี่ยวกับเรื่องนี้โดยทั่วไป คุณจะพบว่ารูปภาพเทมเพลตจำนวนมากไม่เพียงแต่ไม่มีแท็ก alt แต่ยังไม่ได้รับการปรับให้เหมาะสมเลย
และนั่นคือทั้งหมดสำหรับฉันในวันนี้ ฉันหวังว่าจะแสดงความคิดเห็นของคุณ ประสบความสำเร็จและอารมณ์ดี! พบกันในวิดีโอและบทความใหม่ๆ
หัวข้อของบทความวันนี้คือ SEO - การเพิ่มประสิทธิภาพรูปภาพโดยใช้แอตทริบิวต์ ALT หลายๆ คนไม่ทราบว่าเมื่อคุณเพิ่มประสิทธิภาพแอตทริบิวต์นี้ คุณจะเพิ่มโอกาสที่ผู้คนจะเข้าชมไซต์ของคุณ ดังนั้นฉันจะบอกรายละเอียดเพิ่มเติมให้คุณทราบในบทความต่อไป:
คุณลักษณะ ALT คืออะไร?
อัลทีเป็นแอตทริบิวต์ที่มีข้อความแสดงแทนสำหรับรูปภาพ คุณลักษณะนี้จะแสดงเมื่อเบราว์เซอร์ถูกปิดใช้งานเพื่อแสดงภาพ แต่คุณจะไม่เห็นคุณลักษณะดังกล่าวในการตั้งค่ามาตรฐาน
วิธีเขียนคำอธิบายภาพให้ถูกต้อง
ก่อนที่จะเขียนชื่อเรื่อง ฉันจะแจ้งข้อผิดพลาดทั่วไปที่ฉันสังเกตเห็นบนเว็บไซต์ให้คุณทราบ
แอตทริบิวต์ว่างเปล่าอัลทีและชื่อ- ตามกฎแล้ว เครื่องมือเพิ่มประสิทธิภาพ SEO จำนวนมากไม่สนใจแท็กนี้ ใช่ อาจเป็นไปได้ว่าหากเว็บไซต์ของคุณมีขนาดใหญ่มากและมีผู้เข้าชม 100,000 คนต่อวัน คุณไม่ควรกังวล แต่ถ้าคุณเพิ่งเริ่มต้นและต้องการการเข้าชมครั้งแรก ก็ยังคุ้มค่าที่จะระบุแอตทริบิวต์
รูปภาพและแอตทริบิวต์ไม่ตรงกันสมมติว่าหากรูปภาพของคุณแสดง BMW X5 และคุณระบุ Audi A3 ในแอตทริบิวต์ ก็อย่าคาดหวังให้ใครติดตามรูปภาพของคุณไปที่ไซต์
การเพิ่มประสิทธิภาพอีกครั้ง- นี่เป็นปัญหาทั่วไปที่สามารถใช้เป็นตัวอย่างของสิ่งที่ไม่ควรทำ เครื่องมือเพิ่มประสิทธิภาพหวังว่าจะได้รับการเข้าชมที่เป็นที่ต้องการ เขียนคำหลักหลายคำลงในแอตทริบิวต์ "alt" และรอให้ตำแหน่งในผลการค้นหาระหว่างรูปภาพเริ่มเติบโต คุณต้องเข้าใจว่าผู้ที่ประเมินภาพหลายภาพจะอ่านข้อความนี้และหากเป็นสแปมทั้งหมดจะไม่มีใครคลิกลิงก์ ไม่แนะนำให้เพิ่มคำทางการค้า “ซื้อ สั่งซื้อ ราคา ต้นทุน ชื่อเมือง”
เครื่องมือค้นหาอาจกำหนดมาตรการคว่ำบาตรแก่คุณ ดังนั้นอย่าดำเนินการไป
คุณควรเขียนแท็กรูปภาพอย่างไร?
คำอธิบายภาพโดยย่อและชัดเจน อธิบายรูปภาพให้ถูกต้องที่สุดเท่าที่จะเป็นไปได้ และหาก ALT ถูกสร้างขึ้นโดยอัตโนมัติ ให้ตรวจสอบทุกหน้าอีกครั้ง
ความยาวแอตทริบิวต์มีจำกัดเครื่องมือค้นหาคำนึงถึงคำ 3-4 คำ (ประมาณ 250 ตัวอักษร) ซึ่งทำให้อธิบายรูปภาพได้ยาก
การรวมคำหลักจริงๆ แล้ว นี่คือเหตุผลว่าทำไมแอตทริบิวต์ ALT จึงคุ้มค่าที่จะระบุ เขียนคำสำคัญในข้อความที่ใช้งานง่าย
ตัวอย่างเช่น:
alt=”ซ่อมคอมพิวเตอร์ในเชบอคซารย์”
คุณสมบัติเฉพาะของแต่ละภาพ นอกจากนี้ยังเป็นองค์ประกอบที่สำคัญซึ่งเป็นปัญหาที่พบบ่อยที่สุดในเครื่องมือเพิ่มประสิทธิภาพ SEO จากตัวอย่าง ฉันจะแสดงวิธีแก้ปัญหาให้คุณดู
การ์ดผลิตภัณฑ์ประกอบด้วยรูปภาพจำนวนมาก
คุณจะแยกรูปภาพของผลิตภัณฑ์เดียวกันได้อย่างไร หากคุณไม่สามารถส่งสแปมได้และคุณต้องลงทะเบียนทุกสิ่งที่ไม่ซ้ำกัน สมมติว่า “ระบบแยก HYUNDAI H-AR6-07H” สามารถเขียนได้ดังนี้:
“ระบบแยก HYUNDAI H-AR6-07H Type 1”
“ระบบแยก HYUNDAI H-AR6-07H Type 2”
นอกจากรูปภาพผลิตภัณฑ์แล้ว คุณยังมีองค์ประกอบบนเว็บไซต์ เช่น ผลิตภัณฑ์ที่คล้ายคลึงกัน มีการดูผลิตภัณฑ์นี้บ่อยขึ้น และอื่นๆ รูปภาพประเภทนี้ไม่ควรลดราคาและเพิ่มประสิทธิภาพ SEO โดยการระบุ ALT และ Title ยิ่งไปกว่านั้น คุณควรสละเวลาเขียนโดยเฉพาะ: แบรนด์ รุ่น หมายเลขผลิตภัณฑ์ พารามิเตอร์สำคัญทั้งหมดที่ผู้คนสามารถพิมพ์ลงในการค้นหา
ขนาดภาพ– ยิ่งความละเอียดของภาพสูงเท่าไรก็ยิ่งดีเท่านั้น ไม่ว่าในกรณีใด สามารถปรับการแสดงผลได้ด้วยแอตทริบิวต์ "ความกว้าง" และ "ความสูง" แต่คุณไม่ควรทำให้รูปภาพเล็กเกินไป มิฉะนั้นเครื่องมือค้นหาจะไม่คำนึงถึงรูปภาพที่มีขนาดเล็กกว่า 150 พิกเซล และจะถือว่าเป็นไอคอน
ตำแหน่งรูปภาพ– ใกล้เคียงกับข้อความที่มีคำหลักมากที่สุด นั่นเป็นสาเหตุที่เครื่องมือเพิ่มประสิทธิภาพหลายตัวคำนึงถึงปัจจัยนี้และเค้าโครงรูปภาพมาตรฐานมีลักษณะดังนี้:
ข้อความชื่อเรื่องพร้อมคำสำคัญ
คำอธิบายเพิ่มเติม
การลดน้ำหนักของภาพขนาดของรูปภาพมีบทบาทสำคัญ เพราะหากรูปภาพมีน้ำหนักมากจนทำให้ความเร็วในการโหลดไซต์ช้าลง ก็จะส่งผลต่อการจัดอันดับของไซต์ทั้งหมด ใช่ ใช่ สิ่งนี้เกิดขึ้นแล้ว!
คำบรรยายใต้ภาพ
หากไซต์ของคุณมีรูปภาพจำนวนมากและแทบไม่มีข้อความใดเลย คำอธิบายภาพจะมีประโยชน์ ดังนั้นจึงจำเป็นต้องปรับให้เหมาะสมจากมุมมองของ SEO:
- ระบุคำหลัก จำเป็นต้องมีการรวมคำหลักในลายเซ็นเนื่องจากข้อความนี้จะมีบทบาทในการจัดอันดับทั้งหน้า
- ระบุข้อเท็จจริง/ประโยชน์บางประการเกี่ยวกับรูปภาพ
ตัวอย่างเช่น คุณมีรูปภาพของลำโพง iPhone 7
ในลายเซ็นระบุข้อเท็จจริงนี้: “เสียงของ iPhone 7 ดีขึ้นอย่างเห็นได้ชัดด้วย Lighting” ทัศนคติของยานเดกซ์ต่อคุณลักษณะ ALT
“ฉันจะใส่รูปภาพของฉันก่อนได้อย่างไร”
เมื่อจัดอันดับรูปภาพ ข้อความที่อยู่ติดกับรูปภาพจะถูกนำมาพิจารณาด้วย ยิ่งคำอธิบายรูปภาพตรงกับคำค้นหาของผู้ใช้แม่นยำมากเท่าใด โอกาสที่รูปภาพจะแสดงบนหน้าแรกของผลการค้นหาก็จะยิ่งสูงขึ้นเท่านั้น”
ข้อความใต้ภาพมีประโยชน์สำหรับเครื่องมือค้นหามากกว่า ALT มาก
การจัดอันดับรูปภาพของ Google
นอกเหนือจาก ALT ที่กล่าวมาข้างต้น นี่คือสิ่งที่ Google พิจารณาเมื่อจัดอันดับรูปภาพ
มาดูปัจจัยหลักๆ ของ Google กันดีกว่า
ภาพถ่ายคุณภาพดี– นี่ควรจะชัดเจนดังนั้น จะไม่มีใครสนใจภาพถ่ายที่พร่ามัวหรือมีคุณภาพต่ำ ในกรณีนี้ คุณภาพของภาพมีบทบาทต่อความสามารถในการคลิก ซึ่งเป็น CTR ที่แน่นอน
แยกหน้าสำหรับแต่ละภาพ– เป็นแนวคิดที่น่าสนใจ แต่จริงๆ แล้วฉันไม่ค่อยเจอเว็บไซต์ประเภทนี้เลย การเพิ่มประสิทธิภาพจะกลายเป็นปัญหา: ร้านค้าออนไลน์, ไซต์หน้าเดียว, ไซต์แคตตาล็อกที่เก็บรูปภาพจำนวนมาก
แล้วแอตทริบิวต์ Title ล่ะ?
Google ไม่ได้กล่าวถึง และ Yandex ไม่ได้กล่าวถึงแอตทริบิวต์ Title (อย่าสับสนกับแท็ก) การระบุจะไม่ฟุ่มเฟือยอย่างแน่นอน แต่เป็นไปได้เพียงเพราะชื่อจะแสดงเมื่อคุณเลื่อนเมาส์ไปเหนือรูปภาพและมีความหมาย ในเรื่องนี้คุณสามารถทดลองระบุข้อมูลที่เป็นประโยชน์เช่นข้อเท็จจริงต่างๆข้อดีและอื่น ๆ ได้เช่นเดียวกับข้อความใต้ภาพ
ไม่ว่าในกรณีใด มันมีประโยชน์มากกว่าที่ฉันเขียนเมื่อไม่นานมานี้มาก
นั่นคือทั้งหมดที่ ถามคำถามในความคิดเห็นเกี่ยวกับสิ่งที่คุณคิดเกี่ยวกับแอตทริบิวต์ ALT และ TITLE คุณจัดสไตล์ภาพของคุณอย่างไร?
