لو أنت مطور مواقع.. لازم تعرف أساسيات الـ SEO

بصراحة، لو أنت Web Developer، حتى لو شغلك Backend فقط، أنصحك تتعلم أساسيات الـ SEO.

مش لازم تبقى SEO Specialist، ومش مطلوب منك تعرف كل تفاصيل تحسين محركات البحث.

لكن على الأقل، كمطور، لازم تعرف:

إيه الحاجات الأساسية اللي المفروض تكون موجودة في أي موقع بتبنيه علشان يكون صديق لمحركات البحث من البداية؟

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

تجربتي الأولى مع الـ SEO

أول موقع عملته كان من حوالي 9 سنين.

كان موقع بسيط جدًا معمول باستخدام:

• HTML
• CSS
• JavaScript

وكان Static Website أقل من 10 صفحات تقريبًا.

قبل ما أعمل الموقع، كنت خلصت كورس مجاني عن الـ SEO من Google، وبدأت أطبق أغلب الحاجات اللي اتعلمتها على الموقع.

والنتيجة كانت مفاجأة بالنسبة لي وقتها.

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

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

الاهتمام بالتفاصيل الصغيرة من بداية بناء الموقع بيفرق.

ومن وقتها بقيت أحاول أراعي أساسيات الـ SEO في أي مشروع أشتغل عليه.

ودي أربع حاجات بسيطة شايف إن أي Web Developer المفروض يكون عارفها.

1. Meta Title وMeta Description

كل صفحة في الموقع لازم يكون لها Title مناسب وواضح يعبر عن محتواها.

وكذلك الـ Meta Description لازم يقدم وصف مختصر ومفيد للصفحة.

مثلًا، لو عندك صفحة منتج، بدل ما يكون العنوان:

Product | My Store

ممكن يكون:

Joyroom JR-FT1 Pro Smart Watch | My Store

الفكرة إن عنوان الصفحة يكون محدد ومعبر عن المحتوى، مش مجرد عنوان عام بيتكرر في عشرات الصفحات.

والـ Description كذلك يكون مرتبط بالصفحة نفسها بدل استخدام نفس الوصف في الموقع كله.

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

2. اهتم بصور الموقع

متسيبش أسماء الصور بالشكل ده:

IMG_1234.jpg

أو:

DSC_8392.png

الأفضل استخدام اسم ملف واضح ومعبر عن الصورة، مثلًا:

joyroom-jr-ft1-pro-smartwatch.webp

لكن الأهم كمان هو الـ alt attribute.

مثلًا:

<img
    src="joyroom-jr-ft1-pro-smartwatch.webp"
    alt="Joyroom JR-FT1 Pro Smart Watch"
/>