องค์ประกอบเว็บที่ใช้อย่างเหมาะสมสำหรับ SEO

แก้ไขล่าสุดเมื่อ 16 มกราคม 2019

หน้าเว็บส่วนใหญ่ประกอบด้วยองค์ประกอบพื้นฐาน 3 อย่าง ได้แก่ HTML, CSS และ JavaScript เอกสารสำเร็จรูปเหล่านี้ประกอบขึ้นเป็นหน้าเว็บทั้งหมดไม่ว่าจะใช้อะไรในการแสดงผลก็ตาม องค์ประกอบเว็บแต่ละรายการมีตำแหน่งที่เหมาะสม แม้ว่าจะมีการทับซ้อนกันอยู่บ้าง แต่การใช้สิ่งเหล่านี้อย่างมีจุดประสงค์จะช่วยทำให้หน้าปรับ SEO ให้เหมาะสม ดังนั้นควรใช้องค์ประกอบเหล่านี้อย่างไรและมีวิธีใดบ้างที่จะนำไปใช้ในทางที่ผิด?

ฟังก์ชันองค์ประกอบเว็บพื้นฐาน

ลองเปรียบเทียบหน้าเว็บกับบ้าน บ้านมีหลายส่วน โดยแต่ละส่วนจะเข้าที่และให้บริการตามวัตถุประสงค์ ในเว็บเพจของเรา HTML คล้ายกับองค์ประกอบของเว็บที่มีโครงสร้าง โครงถัก ผนัง และฐานราก HTML ให้เค้าโครงเนื้อหาของหน้าที่สำคัญ สรุปลำดับและองค์ประกอบที่ปรากฏที่ใด

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

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

แยกพวกเขาทำไม?

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

ดังนั้น มาทบทวนการใช้ผิดประเภทที่พบบ่อยๆ กัน

ใช้แท็กหัวเรื่องผิด

การใช้ผิดประเภทที่พบบ่อยที่สุดอย่างหนึ่งคือการใช้แท็กส่วนหัวเพื่อจัดรูปแบบองค์ประกอบเว็บ แท็กหัวเรื่องจะสรุปหัวข้อหลักในหน้าเว็บ ตั้งแต่แท็ก H1 ที่สำคัญที่สุด (ทุกหน้าควรมี) ไปจนถึง H6 เมื่อใช้เพื่อจัดรูปแบบองค์ประกอบ คุณกำลังบอก Google ว่าคำเหล่านั้นเกี่ยวข้องกับหน้าเว็บของคุณ หรือคุณอาจใช้แท็กส่วนหัวที่ไม่ถูกต้อง (เช่น ใช้ h3 แทน h2 เพราะคุณชอบขนาดฟอนต์มากกว่า) ไม่ว่าในกรณีใด คุณกำลังส่งข้อความผิด คุณควรใช้ CSS เพื่อจัดรูปแบบองค์ประกอบให้มีขนาดหรือแบบอักษรที่เหมาะสมที่คุณต้องการแทน

แท็ก H1 คู่

ปัญหาทั่วไปอีกประการหนึ่งคือการมีแท็ก H1 อย่างน้อย 2 แท็กในหน้า แท็ก H1 ของคุณควรเป็นแนวคิดหลักของหน้า ควรบอกทุกคน (และทุกบอตรวบรวมข้อมูล) ที่เข้าชมหน้าเว็บว่าเกี่ยวกับอะไร และด้วยเหตุนี้ คุณควรมีเพียงอันเดียว การมีแท็ก H1 สองแท็กก็เหมือนกับการส่งสัญญาณสองแบบที่แตกต่างกันบนหน้า บางคนและแม้แต่ธีมมืออาชีพมักจะใส่โลโก้ในแท็ก H1 ดังนั้นโปรดระวังเพื่อให้แน่ใจว่ามีเพียงหน้าเดียวเท่านั้น

---

---

ภาพทั้งหมดเป็นภาพพื้นหลัง

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

แสดงผล CSS ด้วย JavaScript

การให้บริการ CSS ที่ไม่จำเป็นผ่าน JavaScript จะเพิ่มเวลาในการโหลดบนหน้าเว็บ จะดีกว่ามากที่จะเชื่อมโยงไฟล์ CSS ในส่วนหัว แทนที่จะใส่ผ่านขั้นตอนพิเศษนั้น นอกจากนี้ การใช้ JavaScript สำหรับแอนิเมชั่นอย่างง่ายหรือเอฟเฟกต์โฮเวอร์จะเพิ่มเวลาในการโหลดเมื่อทำผ่าน CSS ได้เร็วกว่ามาก แม้แต่การเพิ่มเฟรมเวิร์ก JavaScript เมื่อไม่ต้องการก็สามารถเพิ่มเวลาในการโหลดได้ เช่นเดียวกับการโหลด jQuery เพื่อทำให้ปุ่มเคลื่อนไหว แทนที่จะเขียน vanilla JavaScript หรือดีกว่านั้น การใช้องค์ประกอบแอนิเมชั่นใน CSS หรือแม้แต่สไตล์ชีตแอนิเมชั่น CSS จะโหลดได้เร็วกว่ามาก

การจัดรูปแบบองค์ประกอบเว็บใน HTML

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

การใช้ HTML สำหรับการจัดรูปแบบการจัดวาง

อันนี้ค่อนข้างยุ่งยากเพราะธีมมักจะจับคู่ CSS Selectors กับโครงสร้าง HTML สิ่งนี้ทำให้ยากขึ้นสำหรับบุคคลในการเปลี่ยนแปลงโครงสร้าง HTML โดยไม่ทำลายรูปแบบที่สำคัญที่ทำให้หน้าอ่านและใช้งานได้ ตัวอย่างเช่น:

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

หน้าที่จัดรูปแบบอย่างเหมาะสมคือหน้าที่ปรับแต่งมาอย่างดี

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