استخدام عناصر الويب بشكل صحيح لتحسين محركات البحث

تم التحديث الأخير في 16 يناير 2019

تتكون معظم صفحات الويب من 3 عناصر أساسية ، HTML و CSS وجافا سكريبت. تشكل وحدات البناء هذه جميع صفحات الويب بغض النظر عما تستخدمه لعرضها. كل عنصر ويب له مكانه الصحيح. بينما يمكن أن يكون هناك بعض التداخل ، فإن استخدامها بشكل هادف يساعد في إنشاء صفحة مُحسّنة لتحسين محركات البحث. إذن كيف يجب استخدام هذه العناصر وما هي بعض الطرق التي يمكن من خلالها إساءة استخدامها؟

وظائف عنصر الويب الأساسية

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

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

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

لماذا نفصل بينهما؟

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

لذا ، دعنا نراجع بعض الإساءات الشائعة.

إساءة استخدام علامات العناوين

أحد أكثر الأخطاء شيوعًا هو استخدام علامات العناوين لتصميم عناصر الويب. تحدد علامات العناوين الموضوعات الأساسية في الصفحة ، بدءًا من علامة H1 الأكثر أهمية (يجب أن تحتوي كل صفحة) إلى H6. عند استخدامها لعناصر النمط ، فأنت تخبر Google أن هذه الكلمات هي ما تدور حوله صفحتك. أو ربما تستخدم علامة عنوان خاطئة (مثل استخدام h3 بدلاً من h2 لأنك تفضل حجم الخط بشكل أفضل). في كلتا الحالتين ، أنت ترسل رسالة خاطئة. بدلاً من ذلك ، يجب عليك استخدام CSS لتصميم العناصر بالحجم المناسب أو الخط الذي تريده.

علامات مزدوجة H1

هناك مشكلة شائعة أخرى وهي وجود علامتي H1 أو أكثر على الصفحة. يجب أن تكون علامة H1 هي الفكرة الرئيسية للصفحة ؛ يجب أن يخبر الجميع (وكل روبوت زحف) أنه يزور الصفحة بما تدور حوله ، وعلى هذا النحو ، يجب أن يكون لديك واحد فقط. يشبه وجود علامتي H1 إرسال إشارتين مختلفتين على الصفحة. يميل بعض الأشخاص وحتى السمات الاحترافية إلى وضع شعارهم في علامة H1. لذا كن على اطلاع للتأكد من وجود واحد فقط في كل صفحة.

---

---

جميع الصور هي صور خلفية.

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

تقديم CSS مع JavaScript

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

تصميم عناصر الويب في HTML

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

استخدام HTML لتصميم التخطيطات

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

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

الصفحة المنسقة بشكل صحيح هي صفحة جيدة التحسين.

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