قبل البدء بتصميم وتكويد أي موقع علينا أن نعرف أن الهدف الأهم في هذه الأيام من تصميم أي موقع ويب هو ظهوره بشكل جيد في محركات البحث وجلب الزوار إلى هذا الموقع .

 

بالتأكيد هناك الكثير من القواعد والمعايير التي تستخدمها محركات البحث لتقييم أي موقع وإعطاءه ترتيب مرتفع في نتائج البحث ، لكن كمصمم ويب ما هي الأمور التي يجب عليك أن تأخذها في الحسبان عند تصميم أي موقع ويب ؟

 

من أهم العوامل الأساسية التي يجب عليك مراعاتها هو كون موقعك مرتب ومكود بشكل منطقي، واستخدام أكواد html5 بشكل منطقي وغير اعتباطي على حسب أهمية المحتوى وأقسامه بناء على ذلك نقدم النصائح التالية:

نصائح لـ تصميم موقع إنترنت متوافق مع معايير html5 : 

 

العناوين:

في كل صفحة يجب عليك أن تراعي أن يكون هناك عنوان واحد من فئة h1 وعناوين h2 فرعية ينقسم إليها الموضوع بشكل مباشر، كمثال لو فرضنا أننا نتحدث عن مقالة بعنوان من نحن سيكون العنوان الأول هو من نحن والعناوين الفرعية هي مثلاً نظرتنا ومهمتنا !

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

تنبيه: لا تستخدم العناوين فقط لاستخدام خطوط كبيرة وصغيرة! هذا أكثر خطأ يقع به مصممو مواقع الويب العناوين وضعت لترتيب المقال المنطقي وليس للتحكم بحجم الخط!

 

وسم main:

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

 

وسم header:

استخدم وسم header لقسم الهيدر لتفهم محركات البحث أن هذا رأس الصفحة الذي سوف يتكرر في جميع الصفحات . 

 

وسم footer:

استخدم وسم footer لذيل الصفحة أيضاً لتفصله عن محتوى الصفحة الأساسي الذي يجب أن يكون فريد ومميز . 

 

وسم article:

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

حاول أن تبتعد عن استخدام وسم div هنا عوضاً عن article إذ إن وسم div يعني العموم بشكل أكبر .

 

وسم section:

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

 

وسم nav:

وسم nav وسم مهم جداً يستخدم لضم قائمة الموقع الأساسية أو القائمة الرئيسية التي غالباً ما تضم صفحات وأقسام الموقع الأساسية تأكد من قائمتك الرئيسية العلوية دائما هي داخل هذا الوسم .

 

وسم aside:

وسم aside هل تتضمن صفحتك قسم جانبي ؟ أو ما يسمى بالسايد بار ؟ إن وسم aside هو أفضل وسم يخبر محركات البحث أنه هذا القسم متعلق بمحتوى الصفحة وليس المحتوى الأساسي للصفحة فيمكنك أن تضع فيه المقالات المتعلقة وغير ذلك .

 

وسم figure ووسم figcaption:

وسم figure ووسم figcaption الوسم الأول هو عبارة عن كونتينر للصورة وشرحها كمثال لو أردنا أن نضمن صفحتنا صورة معينة يفضل محرك البحث أن تلحق هذه الصورة بشرح بسيط عنها ليفهم محتوى هذه الصورة ويتم كتابة شرح الصورة بعد وسم img باستخدام وسم figcaption ويتم كتابة هذين الوسمين داخل الوسم figure .

توضيح لاستخدام وسم figure
توضيح لاستخدام وسم figure

 

وسم details ووسم summary

وسم details ووسم summary :  هل ترغب باخفاء محتوى بسيط يتم إظهاره عن الضغط على عنوان هذا المحتوى ؟ يتم استخدام هذين الوسمين سوية للقيام بهذا الغرض .

في البداية تكتب الوسم details  وتضع بداخله الوسم summary  وهو يمثل الجزء الظاهر من المحتوى اما الجزء بعد هذا الوسم داخل وسم details  هو الذي سوف يكون مخفياً ويتم إظهاره عن الضغط على وسم summary  .

توضيح لاستخدام وسم details
توضيح لاستخدام وسم details

وسم mark:

وسم mark : يقوم هذا الوسم بتحديد نص قصير  أو كلمة مميزة ضمن محتوى المقالة، استخدامه يمكن أن يثير انتباه محركات البحث لمحتوى هذا الوسم والتركيز على هذه الكلمة كمقصد او هدف او ما يشبه كلمة مفتاحية للصفحة .

 

وسم time

وسم time يقوم إخبار محركات البحث بأن ما بداخله هو ووقت وليس نص عادي .

عند تصميم موقع انترنت باستخدام هذه الوسوم هل سيظهر موقعي في أول صفحة في جوجل ؟

طبعا لا يمكن قول ذلك بالتأكيد فقط وضحنا في البداية أن هناك الكثير من العوامل التي تعتمدها محركات البحث لترتيب أي موقع ولسنا بصدد الحديث عنها هنا.

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

 

تطور وسوم html وكيفية نقلها من html4 إلى html5
تطور وسوم html وكيفية نقلها من html4 إلى html5

نتمنى أن نكون قدمنا لكم محتوى بسيط ومفيد.