-
ในช่วงนี้ผมได้อ่านบทความเกี่ยวกับการเพิ่มประสิทธิภาพ SEO เป็นจำนวนมาก และพบว่าส่วนใหญ่พูดถึงความรู้ในขั้นตอนการดำเนินงาน เช่น ลิงก์ภายนอก ลิงก์ภายในในบทความ การปรับปรุง PR และประสบการณ์บางส่วนพูดถึงการปรับแต่งเว็บไซต์ให้ติดอันดับบนเครื่องมือการค้นหาโดยเฉพาะ . มีบทความประเภทนี้มากเกินไปจริงๆ หากคุณอ่านมากเกินไป คุณจะรู้สึกว่าบทความเหล่านั้นเหมือนกันและไม่มีความสดใหม่ วันนี้ฉันจะพูดถึงสิ่งใหม่ ๆ ส่วนใหญ่จะเกี่ยวกับเทคนิคบางอย่างเกี่ยวกับเค้าโครง HTML ในการเพิ่มประสิทธิภาพ SEO ผู้เขียนเป็นโปรแกรมเมอร์โดยกำเนิด ดังนั้นสิ่งที่ฉันเขียนจึงเป็นเชิงเทคนิคเล็กน้อย ฉันหวังว่าคุณจะเข้าใจฉัน
หน้าแรกของเว็บไซต์หลายแห่งมีโมดูลแผนที่ความร้อนที่สามารถสลับได้ในรูปแบบของสไลด์โชว์ (ดูภาพด้านล่าง)
โมดูลนี้ครอบคลุม 70% ของเว็บไซต์ในประเทศ รวมถึงเว็บไซต์ของผู้เขียนด้วย โค้ดสำหรับเอฟเฟกต์นี้มักจะอยู่ที่ส่วนหน้าของโครงสร้างเอกสาร HTML ซึ่งพบมากที่สุดอยู่ใต้แถบนำทาง วิธีการนำไปใช้นั้นไม่มีอะไรมากไปกว่า Flash หรือ สคริปต์ JS โค้ดโครงร่างที่ใช้บ่อยที่สุดมีดังนี้:
<div class="แบนเนอร์">
<วัตถุ>
เวอร์ชันแฟลช
</วัตถุ>
</div>
<div class="แบนเนอร์">
<script type="text/javascript">
เวอร์ชันจาวาสคริปต์
</สคริปต์>
</div>
ผู้เขียนเชื่อว่าหากแทรกโค้ดข้างต้นไว้ที่ส่วนหน้าของ HTML จะไม่เพียงส่งผลเสียต่อการเพิ่มประสิทธิภาพ SEO เท่านั้น แต่ยังส่งผลเสียอย่างมากต่อผู้ใช้ทั่วไปอีกด้วย ข้อเสียของ SEO คือส่วนหน้าอย่างที่เพื่อนเว็บมาสเตอร์ทุกคนรู้ดี ของเอกสาร HTML นี่คือสิ่งที่เครื่องมือค้นหาให้คุณค่ามากกว่า หากคุณใช้ JS หรือ FLASH ในการใช้งาน แม้ว่าเครื่องมือค้นหาจะไม่สามารถจดจำโค้ดเหล่านี้ได้ แต่ส่วนสำคัญอื่นๆ ก็สามารถแสดงให้เครื่องมือค้นหาทราบก่อนได้ และสิ่งที่จำไม่ได้เหล่านี้ก็จะปรากฏขึ้นมา ภายหลัง. สิ่งที่ไม่ดีสำหรับผู้ใช้ทั่วไปคือเอฟเฟกต์นี้มักจะต้องสลับระหว่าง 4 ถึง 5 รูปภาพ และขนาดรวมของรูปภาพเหล่านี้คืออย่างน้อยประมาณ 200KB ไม่ว่าคุณจะใช้ JS หรือ FLASH เพื่อใช้งาน ตราบใดที่คุณฝังมันไว้ใน เอกสาร HTML ผู้ใช้ต้องรอให้สิ่งเหล่านี้โหลด โดยเฉพาะเมื่อรูปภาพมีขนาดใหญ่มีโอกาสติดที่ส่วนหัวมากทำให้เบราว์เซอร์ค้าง นี่คือสิ่งที่น่ากลัวที่สุดสำหรับผู้ใช้
ในช่วงเวลานี้ ผู้เขียนได้สรุปวิธีแก้ปัญหาบางอย่างและจากการสังเกตในระยะยาว การปฏิบัติได้พิสูจน์แล้วว่าวิธีแก้ปัญหาเหล่านี้ใช้ได้ การจัดอันดับไม่ได้รับผลกระทบ และการรวมเข้าด้วยกันเป็นเรื่องปกติ ฉันกล้าแบ่งปันกับทุกคนที่นี่
1. การปรับลำดับโครงสร้าง
จากประสบการณ์การเรียงพิมพ์และเลย์เอาต์ที่ผ่านมา โค้ดของเราควรมีลักษณะดังนี้:
รหัส HTML:
<ร่างกาย>
<div class="คอนเทนเนอร์">
<div class="header">เนื้อหาส่วนหัว</div>
<div class="banner">โมดูลเอฟเฟกต์สไลด์โชว์</div>
<div class="content">เนื้อหาข้อความ</div>
<div class="copyright">ส่วนลิขสิทธิ์</div>
</div>
</ร่างกาย>
รหัสซีเอสเอส:
เนื้อความ {margin:0;padding:0;text-align:center;}
.container {width:980px;margin:0 auto;position:relative;พื้นหลัง:silver;}
.header {ความสูง:200px;line-height:200px;พื้นหลัง:สีแดง;}
.banner {height:150px;line-height:150px;พื้นหลัง:สีเหลือง;}
.content {ความสูง:400px;line-height:400px;พื้นหลัง:สีน้ำเงิน;}
.copyright {ความสูง:50px;line-height:50px;พื้นหลัง:สีเขียว;}
รหัสที่ได้รับการปรับปรุงของผู้เขียนมีดังนี้:
รหัส HTML:
<ร่างกาย>
<div class="คอนเทนเนอร์">
<div class="header">เนื้อหาส่วนหัว</div>
<div class="content">เนื้อหาข้อความ</div>
<div class="copyright">ส่วนลิขสิทธิ์</div>
<div class="banner">โมดูลเอฟเฟกต์สไลด์โชว์</div>
</div>
</ร่างกาย>
รหัสซีเอสเอส:
เนื้อความ {margin:0;padding:0;text-align:center;}
.container {width:980px;margin:0 auto;position:relative;พื้นหลัง:silver;}
.header {ความสูง:200px;line-height:200px;พื้นหลัง:สีแดง;}
.banner {position:absolute;top:200px;width:980px;height:150px;line-height:150px;พื้นหลัง:สีเหลือง;}
.content {margin-top:150px;height:400px;line-height:400px;พื้นหลัง:สีน้ำเงิน;}
.copyright {ความสูง:50px;line-height:50px;พื้นหลัง:สีเขียว;}
จากการวิเคราะห์เปรียบเทียบของโค้ดข้างต้น ฉันใช้เทคนิคการจัดวางตำแหน่งแบบลอยตัวใน CSS จริงๆ คุณสามารถค้นหาข้อมูลที่เกี่ยวข้องเกี่ยวกับการจัดวางตำแหน่งแบบลอยตัวได้ อย่าลืมฝึกฝนประเด็นความรู้นี้ให้เชี่ยวชาญ ซึ่งมีประโยชน์มากสำหรับการเพิ่มประสิทธิภาพ SEO
2. ใช้การโหลดล่าช้าอย่างชำนาญ
รหัส HTML:
<ร่างกาย>
<div class="คอนเทนเนอร์">
<div class="header">เนื้อหาส่วนหัว</div>
<div class="content">เนื้อหาข้อความ</div>
<div class="copyright">ส่วนลิขสิทธิ์</div>
<div class="แบนเนอร์"></div>
</div>
</ร่างกาย>
รหัสเจคิวรี่:
$(เอกสาร).ready(function() {
window.setTimeout (ฟังก์ชั่น () {
เวอร์ชันแฟลช
$(".banner").html("<object>นี่คือที่สำหรับใส่โค้ด FLASH</object>")
เวอร์ชั่นอาแจ็กซ์
$.get(" http://www.flagwind.com/GetBanner.html ", ฟังก์ชั่น(ข้อมูล){
$(".banner").html(ข้อมูล);
-
}, 3000);
-
ความหมายทั่วไปของโค้ด Jquery นี้คือหลังจากโหลดเอกสารแล้ว หลังจากผ่านไป 3 วินาที ให้ดำเนินการคำขอ AJAX หรืออย่างอื่นเพื่อควบคุมเนื้อหาในแบนเนอร์ DIV
โค้ดของทั้งสองโซลูชันข้างต้นเป็นเพียงตัวอย่างบางส่วน คุณสามารถใช้โค้ดเหล่านี้ในที่อื่น โหลดเนื้อหาบางส่วนที่ไม่เกี่ยวข้องกับ SEO ในภายหลัง หรือใช้ JS เพื่อชะลอการโหลดเพื่อแสดง เครื่องยนต์ก็เป็นสิ่งที่ดีสำหรับผู้ใช้ทั่วไปเช่นกัน บทความนี้สร้างขึ้นโดยการสร้างเว็บไซต์ของเซินเจิ้น Flagwind Network www.flagwind.com โปรดอย่าลบข้อมูลลิขสิทธิ์ของผู้เขียนต้นฉบับเมื่อส่งต่อขอขอบคุณ!
ขอขอบคุณ Shenzhen Qifeng Network สำหรับการสนับสนุน