أخطاء تصميم الويب التي تضرّ بترتيبك في البحث

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

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

لماذا يتصادم التصميم مع السيو أصلًا؟

يتصادمان حين يُصمَّم الموقع لعين المشاهد وحدها. المصمّم يرى صفحة جميلة، والزاحف يرى شيفرة فيها نصّ قليل وروابط لا يمكن اتّباعها. الفجوة بين الرؤيتين هي مصدر كل خطأ في هذه القائمة.

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

الخطأ	المرحلة المتأثّرة	شدّة الضرر
تنقّل لا يمكن الزحف إليه	الزحف والفهرسة	عالية جدًا
محتوى مخفي في نسخة الجوال	الفهرسة والترتيب	عالية جدًا
نصّ داخل صور	الفهرسة	عالية
بطء التحميل وثقل الصور	الترتيب والتحويل	عالية
إزاحة المحتوى أثناء التحميل	تجربة الصفحة	متوسّطة
تباين ألوان ضعيف	الوصول والتحويل	متوسّطة
صفحة بلا عناوين هيكلية	الاستخراج والاستشهاد	متوسّطة

الصفّان الأولان يستحقّان انتباهًا خاصًّا لأن أثرهما صامت: لا رسالة خطأ ولا تنبيه، فقط صفحات لا تظهر ولا تعرف لماذا.

الخطأ الأول: تنقّل لا يستطيع الزاحف اتّباعه

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

الفحص بسيط: اعرض مصدر الصفحة الأصلي وابحث فيه عن عنوان صفحة داخلية. إن لم تجده فالزاحف لن يجده أيضًا في قراءته الأولى. العلاج أن يكون كل رابط وسم a بخاصّية href حقيقية داخل الشيفرة المرسَلة من الخادم.

نمط شائع	هل يُزحف إليه؟	البديل الصحيح
وسم a بعنوان كامل	نعم	هو الصحيح أصلًا
زرّ ينفّذ انتقالًا برمجيًا	لا	حوّله إلى وسم a
قائمة تُحمَّل بعد تفاعل المستخدم	غالبًا لا	اعرضها في الشيفرة الأولى
تنقّل داخل إطار مضمَّن	لا يُنسَب للصفحة	استبدله بتنقّل مباشر
روابط مبنية بعد التمرير	لا	أضف روابط ثابتة في التذييل

الصفّ الأخير علاج عملي رخيص: تذييل يحمل روابط أقسامك الرئيسية يضمن وصول الزاحف إليها مهما فعل التنقّل العلوي.

الخطأ الثاني: محتوى تخفيه في نسخة الجوال

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

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

الأسلوب	موجود في الشيفرة؟	يُفهرَس؟
قسم مطويّ يُفتح بالنقر	نعم	نعم
تبويبات تعرض قسمًا في كل مرّة	نعم	نعم
قاعدة تُلغي عرض القسم	نعم لكن مخفي	بقيمة أضعف
قالب لا يُصدِر القسم أصلًا للجوال	لا	لا

الخطأ الثالث: نصّ داخل صورة

العنوان الجميل المصمَّم كصورة لا يقرؤه المحرّك نصًّا. وكذلك الجداول التي تُصدَّر صورًا، والأسعار المكتوبة داخل بانر، والاقتباسات المصمَّمة في أداة تصميم ثم تُرفَع كملفّ واحد.

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

ماذا عن النصّ البديل نفسه؟

اكتبه واصفًا لا حاشيًا. «رفوف مكتبة ترمز إلى فهرس محركات البحث» وصف مفيد، و«سيو، تحسين محركات البحث، جوجل، ترتيب» حشو يضرّ ولا ينفع. الصور الزخرفية البحتة تأخذ نصًّا بديلًا فارغًا لا وصفًا مخترعًا.

الخطأ الرابع: بطء يبدأ من التصميم

أغلب البطء لا يأتي من الاستضافة بل من قرارات بصرية: صورة خلفية بحجم ثلاثة ميجابايت، وأربع عائلات خطوط، ومكتبة حركة كاملة من أجل تأثير واحد. كل عنصر من هذه يُدفَع ثمنه في كل زيارة.

القرار	كلفته	البديل
صور بصيغة قديمة وأحجام ضخمة	الأثقل عادةً	صيغ حديثة وأبعاد مناسبة
تحميل الصور كلّها فورًا	يؤخّر أوّل رسم	تحميل كسول لما تحت الطيّة
أربع عائلات خطوط أو أكثر	حجب عرض النصّ	عائلتان بأوزان محدودة
مكتبة حركة كاملة	جافاسكربت ثقيل	حركة بسيطة بأنماط أصلية
فيديو خلفي في الترويسة	الأسوأ على الجوال	صورة ثابتة أو فيديو بطلب

الصفّ الأخير يستحقّ صراحة: الفيديو الخلفي يبدو مبهرًا على شاشة المصمّم ويكلّف زائر الجوال ثوانيَ وبيانات. إن أصررت عليه فاجعله يُحمَّل بعد تفاعل لا مع الصفحة.

الخطأ الخامس: محتوى يقفز أثناء التحميل

الإزاحة البصرية تقع حين يظهر عنصر فيدفع ما تحته: صورة بلا أبعاد محدّدة، أو إعلان يُحجَز مكانه متأخّرًا، أو خطّ بديل يُستبدَل بآخر مختلف المقاس. الزائر يفقد سطره، وأحيانًا ينقر ما لم يُرِد.

العلاج كلّه في حجز المساحة مقدّمًا: أبعاد صريحة لكل صورة وإطار، وحاوية بارتفاع ثابت لكل إعلان، وخطّ احتياطي قريب في المقاس من الخطّ النهائي.

الخطأ السادس: بنية بلا عناوين

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

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

الخطأ السابع: تباين ضعيف وأزرار صغيرة

نصّ رمادي فاتح على خلفية بيضاء يبدو أنيقًا على شاشة المصمّم في غرفة مضاءة جيّدًا، ويصير غير مقروء على هاتف في الشارع. والأزرار الصغيرة المتلاصقة تُنتج نقرات خاطئة ثم مغادرة.

العنصر	الحدّ الأدنى العملي
حجم نصّ المتن	ستّ عشرة بكسل فأكثر
تباين النصّ العادي	نسبة ٤٫٥ إلى ١
مساحة الزرّ القابلة للنقر	أربع وعشرون بكسلًا فأكثر
المسافة بين عنصرين قابلين للنقر	ثماني بكسلات على الأقلّ
عرض سطر النصّ	من ستّين إلى ثمانين حرفًا

هذه الأرقام تخدم السيو بطريق غير مباشر: صفحة يسهل استعمالها تُبقي الزائر، والزائر الذي لا يعود إلى نتائج البحث إشارة رضا حقيقية. شرحت الفرق بين نوعي الارتداد في مقال معدّل الارتداد.

كيف تمنع هذه الأخطاء قبل وقوعها؟

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

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

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

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

ماذا تطلب من المصمّم في التسليم؟

اطلب نسختي التصميم للحاسوب والجوال لكل صفحة لا للرئيسية وحدها، وحالات العناصر كلّها: الزرّ عند التمرير وعند التركيز، والحقل عند الخطأ، والقائمة وهي مفتوحة. غياب هذه الحالات يجعل المبرمج يخترعها، وهناك تقع أخطاء الوصول عادةً.

أخطاء أصغر تتكرّر كثيرًا

هذه لا تُسقِط موقعًا وحدها، لكن اجتماع ثلاثة منها في موقع واحد يصنع فارقًا ملموسًا. كلّها تُصلَح في ساعة عمل أو أقلّ.

الخطأ	أثره	العلاج
شعار بلا رابط للرئيسية	يقطع طريق عودة متوقّعًا	اجعله رابطًا دائمًا
صفحة خطأ ٤٠٤ بلا تنقّل	يغادر بدل أن يبحث	أضف بحثًا وروابط أقسام
تمرير لا نهائي بلا روابط صفحات	يحجب المحتوى القديم عن الزحف	أضف ترقيمًا حقيقيًا معه
نافذة منبثقة فور الدخول	تطرد الزائر قبل القراءة	أجّلها حتى نصف الصفحة
روابط بنصّ «اضغط هنا»	يضيّع إشارة عن وجهة الرابط	اكتب وصف الوجهة في النصّ
دوّار صور في الترويسة	يثقل ولا أحد يراه كاملًا	رسالة واحدة ثابتة وواضحة
فهرس محتويات غائب في المقال الطويل	يفقد التنقّل الداخلي	أضفه فوق أوّل عنوان

الصفّ الأخير يقدّم مكسبًا مزدوجًا: يخدم القارئ ويمنح المحرّك خريطة لأقسام صفحتك.

من أين تبدأ إن كان موقعك قائمًا؟

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

الترتيب	ما تصلحه	الجهد
١	روابط التنقّل والتذييل	منخفض
٢	إظهار المحتوى المخفي في الجوال	منخفض
٣	أبعاد الصور وتحميلها الكسول	منخفض
٤	تقليل الخطوط والمكتبات	متوسّط
٥	بنية العناوين في الصفحات المهمّة	متوسّط
٦	تباين الألوان ومقاسات الأزرار	متوسّط
٧	استبدال النصوص داخل الصور	مرتفع

أول ثلاث خطوات تُنجَز غالبًا في يوم واحد، وأثرها يظهر في تقرير الفهرسة خلال أسبوعين. ابدأ بها قبل أن تفتح ملفّ التصميم.

الأسئلة الشائعة

هل القالب الجاهز يضرّ بالسيو؟

لا يضرّ بذاته، والمشكلة في القوالب المحمّلة بعشرات الميزات التي لا تستعملها. قالب خفيف مبنيّ جيّدًا أفضل من تصميم مخصّص مكتوب بإهمال. افحص القالب بالفحوص الأربعة قبل الشراء لا بعده.

هل يحتاج كل موقع نسخة جوال منفصلة؟

لا يحتاجها، والتصميم المتجاوب على عنوان واحد هو التوصية القائمة. النسخ المنفصلة تضاعف عملك في الصيانة وتفتح بابًا لاختلاف المحتوى بين النسختين، وهو بالضبط ما يضرّك في الفهرسة.

هل تؤثّر الحركة والتأثيرات في الترتيب؟

تؤثّر بقدر ما تبطّئ الصفحة أو تؤخّر ظهور المحتوى. حركة خفيفة على عنصر أو عنصرين لا أثر لها، ومكتبة كاملة تُحمَّل في كل صفحة من أجل تأثير واحد تكلفة حقيقية تدفعها في كل زيارة.

ما أسرع فحص أبدأ به اليوم؟

افتح صفحتك الأهمّ على هاتفك بشبكة بيانات لا واي فاي. ما يزعجك في أوّل عشر ثوانٍ هو قائمة عملك، وغالبًا ستجد فيها صورة ثقيلة أو نافذة منبثقة أو نصًّا صغيرًا.

هل النصّ البديل عامل ترتيب؟

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

هل أصلح التصميم أم أكتب محتوى جديدًا؟

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