ستساعدك المقالة التالية: فوائد SEO لـ CSS

فوائد SEO لـ CSS

تعتبر هذه المقالة مفيدة للغاية إذا كنت على دراية إلى حد ما بـ HTML وCSS. أشرح المفاهيم جيدًا بما يكفي بحيث لا يلزمك أن تكون خبيرًا، ولكنني أريد تقديم مادة ستقدم لك تصميمًا أكثر تقدمًا بطرق يمكنك فهمها. مثل العديد من مصممي الويب الآخرين، بدأت في تخطيط صفحات الويب باستخدام الأدوات الرسومية واكتشفت عجائب الجداول للتخطيط دون أن يطلب مني أحد استخدامها. بما أن دعم المتصفح لـ CSS أصبح أفضل مما كان عليه من قبل، ولأن الجداول تسبب مشاكل، فإن CSS تقدم لك فائدة ربما لم تفكر بها من قبل، وهي فائدة تحسين محركات البحث (SEO).

أريد أن أقول على الفور أن المحتوى عالي الجودة يجب أن يكون على رأس أولوياتك، وليس حيل تحسين محركات البحث. ستساعدك النصيحة المقدمة هنا في الحصول على نتائج أفضل لمحركات البحث لأن مفتاح تحسين محركات البحث الحقيقي يبدأ بهيكل جيد للصفحة وتنظيم المحتوى الخاص بك. من خلال فهم كيفية “رؤية” محركات البحث لصفحاتك، يمكنك إنشاء بنية أفضل للصفحة.

تستخدم محركات البحث ما يسمى بالمنطق “من الأعلى إلى الأسفل” عند النظر إلى صفحات الويب. إنهم ينظرون إلى التعليمات البرمجية الخاصة بك، وليس العرض المرئي الذي يراه المستخدمون. تنجذب العيون البشرية إلى محتوى الصفحة على الفور، حتى في حالة وجود أشياء أخرى على الصفحة. لا ترى روبوتات محركات البحث الأشياء بنفس الطريقة، ولكنها تكون منطقية ويمكن التنبؤ بها بمجرد فهمها.

من المرجح أنك شاهدت نتائج محرك بحث غير منطقية لأنه يتم عرض بعض المحتوى الغامض بدلاً من المحتوى الفعلي للصفحة. سأوضح المنطق من أعلى إلى أسفل حتى تتمكن من فهم كيفية جعل CSS يعمل لصالحك.

في ذهن محرك البحث، يتم تحديد جوهر صفحة الويب الخاصة بك أولاً من خلال المحتوى الموجود في أعلى الصفحة. إذا بدأت بكلمات معينة، فإنها تظهر غالبًا في جميع أنحاء الصفحة، ثم تظهر مرة أخرى في الجزء السفلي، لذا فهي في الأساس نقطة الختام الخاصة بك، وهي أن ما تدور حوله صفحتك هو في العقول الآلية لمحرك البحث.

من المحتمل أن تبحث مقل عيونك المدربة جيدًا عن عنوان، ثم تقرأ المحتوى؛ بالنسبة لك، هذا هو المنطق من أعلى إلى أسفل للصفحة. اقرأ كود HTML الخاص بك من الأعلى إلى الأسفل. قد تتفاجأ بالمدى الذي يتعين عليك التمرير فيه قبل أن تصل إلى المحتوى الحقيقي، وكم “المحتوى” الآخر الذي سيراه محرك البحث أولاً. إذا كنت تستخدم الجداول للتخطيط، فإن المنطق من الأعلى إلى الأسفل للكود الخاص بك يبدو كما لو أنه تم قطع الأرجل وإعدادات المكان على الأرض.

باستخدام CSS، يمكنك تنظيم التعليمات البرمجية الخاصة بك بحيث ترى محركات البحث المحتوى الحقيقي الخاص بك أولاً بغض النظر عن مكان ظهوره على الصفحة.

دعونا نستخدم مثال HTML بسيط:

<أتش تي أم أل>
<الرأس>
أدخل جميع معلومات رأسك، بما في ذلك رابط CSS كما هو موضح أدناه

<الجسم>

بعد ذلك، سأعرض مثالًا بسيطًا لكيفية جعل الملف file.css يتحكم في التخطيط. يمكنك استخدام هذا الرمز في محرر النصوص لرؤية التأثيرات. من أجل التبسيط، سأركز فقط على رمز التخطيط، ولن نعلن عن الخطوط والأحجام والروابط وما إلى ذلك.

في مثال HTML، لدينا 4 أقسام (divs). يمكنك التقسيم على البكسل أو النسب المئوية (أو حتى كليهما). سنستخدم وحدات البكسل لتوضيح بسيط للمبدأ هنا.

/*بدء CSS*/

/*للعلم فقط، هذا تعليق في CSS*/

#nav {الموضع: مطلق؛
أعلى: 0 بكسل؛
اليسار: 0 بكسل؛
العرض: 200 بكسل؛
الارتفاع: 500 بكسل؛
الحشو: 20 بكسل 10 بكسل 10 بكسل 20 بكسل؛
}

/*لشرح الكود أعلاه، قمت بإدراج divs بترتيب مختلف عن HTML. يتبع هذا الترتيب تدفق الطريقة التي أقوم بها بتخطيط الصفحة. كما أنه يتبع التدفق الذي ستحصل عليه إذا قمت بإعداد بنية جدول بتنسيق HTML. يتجه قسم التنقل إلى أعلى الزاوية اليسرى من الصفحة (يبلغ حجم كل من الجزء العلوي واليسار 0 بكسل). تحدد العلامة # “معرف” div متبوعًا بالاسم. لقد قمت بتعيين العرض على 200 بكسل وهو ما يشبه إنشاء خلية جدول بهذا العرض. لقد استخدمت ارتفاع 500 بكسل كمثال فقط، لذا سيبدأ الملخص أدناه حيث تنتهي عملية التنقل. تريد التأكد من أن كل شيء سيتناسب مع الأحجام التي تحددها. يمكنك أيضًا تعيين المساحة المتروكة، ولكن على عكس خلية الجدول في HTML، يمكنك تعيين كل جانب على حدة. في المثال أعلاه، أول 20 بكسل هو الجزء العلوي، ثم يتم الإعلان عن كل جانب بترتيب اتجاه عقارب الساعة بحيث يكون الجانب الأيسر أيضًا 20 بكسل.*/

#ملخص {الموضع: مطلق؛
أعلى: 500 بكسل؛
اليسار: 0 بكسل؛
العرض: 200 بكسل؛
الحشو: 20 بكسل 10 بكسل 10 بكسل 20 بكسل؛
}

/*يبدأ الملخص أعلاه حيث ينتهي التنقل، على مسافة 500 بكسل من الأعلى. الإعدادات الأخرى تتطابق مع المحاذاة. لم أقم بتعيين ارتفاع لأنه سوف يمتد تمامًا مثل خلية الجدول عند إدراج المحتوى الخاص بك.*/

#banner {الموضع: مطلق؛
أعلى: 0 بكسل؛
اليسار: 200 بكسل؛
العرض: 550 بكسل؛
الارتفاع: 150 بكسل؛
الحشو: 20px 0px 10px 20px ؛
}

/*سيكون الشعار في أعلى الصفحة، ولكنه سيبدأ عند 200 بكسل من اليسار حيث تنتهي عملية التنقل. يعد الإعلان عن الارتفاع أمرًا اختياريًا، ولكنه سيساعد في فهم المكان الذي سيبدأ فيه المحتوى أدناه. لقد استخدمت 150 بكسل كمثال فقط. سبب الحشو 0px على الجانب الأيمن هو أن بقية الشاشة فارغة في هذا التخطيط، فلا حاجة لحشو هذا الجانب. قمت بتحديد العرض بحيث يتم عرضه بدقة تصل إلى 800 × 600 (العرض الإجمالي هنا هو 750 بكسل).*/

#المحتوى {الموضع: مطلق؛
أعلى: 150 بكسل؛
اليسار: 200 بكسل؛
العرض: 550 بكسل؛
الحشو: 10px 0px 10px 20px ؛
}

/*الآن يبدأ المحتوى من حيث ينتهي البانر، 200 بكسل إلى اليسار و150 بكسل من الأعلى. لاحظ أن هذا هو الأخير. إذا استخدمت الجداول لإنشاء نفس التخطيط، فسيكون هذا هو الأخير في التعليمات البرمجية الخاصة بك أيضًا. ستقرأ محركات البحث كل شيء آخر قبل الوصول إلى جوهر صفحتك. في HTML المستخدم هنا، يوجد في الجزء العلوي من التعليمات البرمجية الخاصة بك بحيث تراه محركات البحث أولاً.*/

/*نهاية CSS*/

هذه أمثلة بسيطة، ولكن إذا كنت تستطيع التفكير من حيث المنطق من الأعلى إلى الأسفل، فيمكنك إنشاء صفحات صديقة لمحركات البحث. سيتم أيضًا تحميلها بشكل أسرع نظرًا لأن بنيات الجدول المعقدة تستغرق وقتًا أطول للتحميل مقارنة بتخطيط CSS، وهو ما يعد فائدة أخرى لـ CSS.

–

كاتب العمود ستيف تشيتندن وشركته، خدمات الأعمال الإبداعية، توفر خدمات تصميم الويب والتصميم الجرافيكي والكتابة والتسويق المخططة بعناية تهدف إلى تحقيق هذا الهدف.