Post by Hossam Shokry

قبل فترة كنت بشتغل على مشكلة غريبة... كل حاجة كانت شغالة تمام، وكنت مستخدم useSeoMeta ومضيف كل الـ Open Graph و Twitter Meta Tags بشكل صحيح. لكن لما أشارك لينك المنتج على Facebook أو Twitter... كانت المعاينة بتطلع فاضية أو ببيانات غلط. 🤔 بعد شوية Debugging اكتشفت إن المشكلة مش في useSeoMeta، المشكلة في توقيت جلب البيانات. أنا كنت بجيب بيانات المنتج داخل: onMounted() وده معناه إن البيانات بتتوفر بعد ما JavaScript يشتغل في المتصفح. لكن Bots بتاعة: Facebook Twitter LinkedIn Discord WhatsApp في الغالب بتقرأ الـ HTML اللي السيرفر بيرجعه أول مرة، ومش بتستنى onMounted() يشتغل. فالنتيجة؟ useSeoMeta بيتنفذ قبل ما بيانات المنتج توصل، وبالتالي الـ Meta Tags بتكون فاضية أو بقيم افتراضية. الحل كان بسيط لكنه مهم جدًا: ✅ نقل جلب البيانات إلى useAsyncData() علشان يتم أثناء الـ SSR. بكده السيرفر بيرجع الـ HTML وفيه بيانات المنتج جاهزة، ووقتها useSeoMeta بيولد: og:title og:description og:image twitter:title twitter:image بالقيم الصحيحة قبل ما الصفحة توصل لأي Crawler. الدرس اللي اتعلمته useSeoMeta أداة قوية جدًا في Nuxt، لكن قوتها بتظهر لما البيانات تكون متاحة أثناء Server-Side Rendering. لو البيانات بتتجاب داخل onMounted()، فغالبًا الـ SEO هيشتغل للمستخدم، لكن منصات مشاركة الروابط ومحركات البحث ممكن تشوف صفحة مختلفة تمامًا. أوقات المشكلة مش في الـ SEO نفسه... المشكلة في إمتى البيانات بتوصل.