-
لقد قرأت الكثير من المقالات حول تحسين SEO خلال هذه الفترة، ووجدت أن معظمها يتحدث عن المعرفة في مرحلة التشغيل، مثل الروابط الخارجية، والروابط الداخلية في المقالات، وتحسين العلاقات العامة، وبعض الخبرة تتحدث عن تحسين محرك بحث معين . هناك بالفعل عدد كبير جدًا من المقالات من هذا النوع، إذا قرأت الكثير منها، ستشعر أنها متماثلة وليست جديدة. سأتحدث اليوم عن شيء جديد، خاصة حول بعض التقنيات المتعلقة بتخطيط HTML في تحسين محركات البحث. المؤلف مبرمج بالولادة، لذا فإن ما كتبته تقني بعض الشيء، وآمل أن تفهمني.
تحتوي العديد من الصفحات الرئيسية لمواقع الويب على وحدة خريطة حرارية يمكن تبديلها في شكل عرض شرائح (انظر الصورة أدناه)
تشغل هذه الوحدة 70٪ من مواقع الويب المحلية، بما في ذلك موقع المؤلف. غالبًا ما يكون رمز هذا التأثير في الجزء الأمامي من بنية مستند HTML، وأكثرها شيوعًا هو أسفل شريط التنقل. طريقة التنفيذ ليست أكثر من Flash أو JS، رمز التخطيط الأكثر استخدامًا هو كما يلي:
<div class="banner">
<كائن>
نسخة فلاش
</كائن>
</div>
<div class="banner">
<نوع البرنامج النصي = "نص/جافا سكريبت">
نسخة جافا سكريبت
</script>
</div>
يعتقد المؤلف أنه إذا تم إدراج الكود أعلاه في الجزء الأمامي من HTML، فلن يكون ذلك ضارًا بتحسين محركات البحث فحسب، بل سيكون أيضًا محبطًا للغاية للمستخدمين العاديين. عيب تحسين محركات البحث هو: الجزء الأمامي كما يعلم جميع أصدقاء مشرفي المواقع من مستند HTML هذا ما تقدره محركات البحث أكثر إذا كنت تستخدم JS أو FLASH لتنفيذه، على الرغم من أنه لا يمكن لمحركات البحث التعرف على هذه الرموز، إلا أنه يمكن عرض أجزاء مهمة أخرى لمحركات البحث أولاً، وسيتم عرض هذه الأشياء التي لا يمكن التعرف عليها. لاحقاً. الشيء السيئ بالنسبة للمستخدمين العاديين هو أن هذا التأثير يتطلب عادةً التبديل بين 4 إلى 5 صور، ويبلغ الحجم الإجمالي لهذه الصور حوالي 200 كيلو بايت على الأقل. سواء كنت تستخدم JS أو FLASH لتنفيذه، طالما قمت بتضمينه في ملف مستند HTML، يجب على المستخدم الانتظار حتى يتم تحميل هذه الأشياء، خاصة عندما تكون الصورة كبيرة، فمن المحتمل جدًا أن تتعثر في منطقة الرأس، مما يتسبب في تجميد المتصفح، وهذا هو الشيء الأكثر رعبًا للمستخدمين.
خلال هذه الفترة، لخص المؤلف بعض الحلول ومن خلال المراقبة طويلة المدى، أثبتت الممارسة أن هذه الحلول جيدة، ولم يتأثر التصنيف، وأن التضمين أمر طبيعي وأشاركها بجرأة مع الجميع هنا.
1. تعديل التسلسل الهيكلي
وفقًا لخبرة التنضيد والتخطيط السابقة، يجب أن يبدو الكود الخاص بنا كما يلي:
كود HTML:
<الجسم>
<div class="container">
<div class="header">محتوى الرأس</div>
<div class="banner">وحدة تأثير عرض الشرائح</div>
<div class="content">محتوى النص</div>
<div class="copyright">قسم حقوق الطبع والنشر</div>
</div>
</الجسم>
كود CSS:
الجسم {الهامش:0;الحشو:0;محاذاة النص:المركز;}
.container {width:980px;margin:0 auto;position:relative;background:silver;}
.الرأس {الارتفاع: 200 بكسل؛ ارتفاع الخط: 200 بكسل؛ الخلفية: أحمر؛}
.banner {الارتفاع: 150 بكسل؛ ارتفاع الخط: 150 بكسل؛ الخلفية: أصفر؛}
.المحتوى {الارتفاع: 400 بكسل؛ ارتفاع الخط: 400 بكسل؛ الخلفية: أزرق؛}
حقوق الطبع والنشر {الارتفاع:50px;ارتفاع الخط:50px;الخلفية:أخضر;}
الكود المحسن للمؤلف هو كما يلي:
كود HTML:
<الجسم>
<div class="container">
<div class="header">محتوى الرأس</div>
<div class="content">محتوى النص</div>
<div class="copyright">قسم حقوق الطبع والنشر</div>
<div class="banner">وحدة تأثير عرض الشرائح</div>
</div>
</الجسم>
كود CSS:
الجسم {الهامش:0;الحشو:0;محاذاة النص:المركز;}
.container {width:980px;margin:0 auto;position:relative;background:silver;}
.الرأس {الارتفاع: 200 بكسل؛ ارتفاع الخط: 200 بكسل؛ الخلفية: أحمر؛}
.banner {position:absolute;top:200px;width:980px;height:150px;line-height:150px;background:yellow;}
.المحتوى {الهامش العلوي:150px;الارتفاع:400px;ارتفاع الخط:400px;الخلفية:أزرق;}
حقوق الطبع والنشر {الارتفاع:50px;ارتفاع الخط:50px;الخلفية:أخضر;}
من خلال التحليل المقارن للرموز المذكورة أعلاه، استخدمت بالفعل تقنية تخطيط الموضع العائم في CSS. يمكنك العثور على المعلومات ذات الصلة حول تخطيط الموضع العائم، وتأكد من إتقان نقطة المعرفة هذه، وهي مفيدة جدًا لتحسين محركات البحث.
2. استخدم التحميل المؤجل بمهارة
كود HTML:
<الجسم>
<div class="container">
<div class="header">محتوى الرأس</div>
<div class="content">محتوى النص</div>
<div class="copyright">قسم حقوق الطبع والنشر</div>
<div class="banner"></div>
</div>
</الجسم>
رمز مسج:
$(مستند).جاهز(وظيفة() {
window.setTimeout(function() {
نسخة فلاش
$(".banner").html("<object>هذا هو المكان الذي يتم فيه إدراج كود FLASH</object>")
نسخة اياكس
$.get(" http://www.flagwind.com/GetBanner.html ", function(data){
$(".banner").html(data);
});
}, 3000);
});
المعنى العام لرمز Jquery هذا هو أنه بعد تحميل المستند، بعد 3 ثوانٍ، قم بتنفيذ طلب AJAX أو أي شيء آخر للتحكم في المحتوى الموجود في لافتة DIV.
رموز الحلين المذكورين أعلاه ليست سوى بعض الأمثلة. يمكنك استخدامها في أماكن أخرى، أو تحميل بعض المحتوى الذي لا علاقة له بـ SEO لاحقًا، أو استخدام JS لتأخير التحميل للعرض، ولن يكون لذلك تأثير كبير على البحث ومع ذلك، فهو أيضًا أمر جيد للمستخدمين العاديين. تم إنشاء هذه المقالة في الأصل بواسطة إنشاء موقع ويب Shenzhen Flagwind Network www.flagwind.com . يرجى عدم حذف معلومات حقوق الطبع والنشر للمؤلف الأصلي عند إعادة التوجيه، شكرًا لك.
شكرًا لشبكة Shenzhen Qifeng على المساهمة