جعل محفظة Next.js ظاهرة على Google: الـ SEO الذي يهمّ فعلاً

المشكلة: حسن الترتيب لا يعني حسن العرض

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

يفصّل هذا المقال الإعدادات التي تصنع الفرق بين نتيجة نمطية ونتيجة تبعث على الثقة.

الأيقونة المفضّلة: قيد لا يحترمه أحد تقريباً

يعرض Google أيقونة على يسار كل نتيجة. ولكي تكون أيقونتك لا بديلاً عاماً، ثلاثة شروط:

• يجب تقديم الأيقونة على رابط ثابت وإعلانها عبر <link rel="icon">.
• يجب أن يكون حجمها مضاعفاً لـ 48 بكسل (48، 96، 144…). أما 64×64، رغم شيوعه، فيتجاهله Google ببساطة.
• يجب أن تبقى مقروءة بحجم صغير جداً: حرف مركّب (مونوغرام) أو رمز، لا شعاراً مفصّلاً أبداً.

في Next.js، يولّد ملفّ بسيط app/icon.tsx الأيقونة ويحقن وسم <link> تلقائياً. يختبئ الفخّ في الحجم المُصدَّر.

أيقونة مثالية لكن بحجم 64×64 لن تظهر أبداً في نتائج Google. إنه التفصيل الذي يكلّف أسابيع من الشك.

«اسم الموقع»: استعادة زمام ما يعرضه Google

افتراضياً، يعرض Google في الغالب النطاق (monsite.com) بدل الاسم الحقيقي. ولفرض اسم خاصّ، عليك محاذاة ثلاث إشارات يجب أن تكون متطابقة تماماً:

• حقل name في البيانات المنظَّمة WebSite (JSON-LD).
• وسم og:site_name (Open Graph).
• الوسم الوصفي application-name.

إذا تباينت هذه القيم الثلاث — ولو كانت «Jean Portfolio» من جهة و«Jean — Portfolio» من أخرى — يستسلم Google ويعود إلى النطاق. الاتساق هو القاعدة الوحيدة.

البيانات المنظَّمة: شرح من أنت

بيانات Person بصيغة JSON-LD هي ما يتيح لـ Google أن يفهم أن الموقع يتحدّث عن فرد بعينه، له مهنة وموقع وحسابات اجتماعية. أكثر الحقول وزناً:

• name وjobTitle وdescription — الهوية الأساسية.
• sameAs — قائمة حساباتك (GitHub، LinkedIn). هي ما يربط موقعك بحضورك على الإنترنت ويغذّي لوحة المعرفة.
• image — صورة، مفيدة للنتائج الغنية.

ربط كل كيان بمعرّف @id (#person، #website) يتجنّب التكرار ويمنح Google رسماً بيانياً نظيفاً بدل مجموعة بطاقات معزولة.

خريطة الموقع متعدّدة اللغات: ألّا تبتلعك الـ hreflang

على الموقع متعدّد اللغات أن يُخبر Google أيّ نسخة يعرض لمن. من دون ذلك، تتقاتل اللغات المختلفة في الفهرس. القاعدة: كل رابط يُعلن جميع متغايراته اللغوية عبر alternates.languages، إضافةً إلى x-default.

يولّد Next.js sitemap.ts أصلياً يحمل فيه كل مُدخَل hreflang الخاص به. وهو أكثر موثوقية من الإضافات الخارجية التي غالباً ما تُفوّت المسارات الديناميكية من نوع [locale].

ما يهمّ فعلاً، بالترتيب

لو كان عليّ ترتيب الأولويات لمشروع جديد:

1. Google Search Console — من دونه، أنت أعمى. أرسِل خريطة الموقع، واطلب الفهرسة.
2. اتساق إشارات الهوية — أيقونة مطابقة، واسم موقع متوائم، وJSON-LD نظيف.
3. محتوى حقيقي — موقع من صفحة واحدة يبلغ سقفه بسرعة. مقالات تقنية كهذه تجعلك موجوداً على استعلامات حقيقية.
4. مؤشّرات Core Web Vitals — الموقع السريع موقع أفضل ترتيباً. قِس، ثم حسِّن.

الـ SEO التقني ليس سحراً: إنه سلسلة من الإشارات الواضحة، تُرسَل بنظافة، ثم تُترَك للوقت الذي يستغرقه Google لإعادة الزحف. والصبر يفعل الباقي.