التنقل واللغات والـ SEO

الانتقال الافتراضي سليم

رابط <a> بيعمل تحميل كامل. ده كويس لإمكانية الوصول ولمحركات البحث. لو عايز الحركة بين الصفحات تبقى أنعم (العنصر يفضل، والعنوان يتبدّل من غير وميض أبيض)، حط مكوّن الراوتر في الـ head.

---import { ClientRouter } from "astro:transitions";---<head>  <ClientRouter /></head>

الاسم القديم ViewTransitions اتبدّل. استخدم ClientRouter.

transition:name على عنصرين بنفس الاسم (صورة الطبق في القائمة وفي الصفحة) يخلّي المتصفح يحرّك من واحد للتاني. transition:persist يخلّي عنصر يكمل بحياته (مشغّل صوت) بعد ما الصفحة تتبدل. transition:animate يختار حركة جاهزة.

أحداث على document لو محتاج تتدخل: astro:before-preparation و astro:before-swap و astro:after-swap و astro:page-load. في Astro 7 الثوابت القديمة اللي كانت متصدّرة من astro:transitions (أسماء زي TRANSITION_AFTER_SWAP) اتشالت. اسمع اسم الحدث نفسه.

رابط عايز تحميل كامل من غير حركة: data-astro-reload.

Prefetch

الزائر واقف على رابط، المتصفح يجيب الصفحة قبل الضغطة. في الكونفج prefetch: true، أو استراتيجية أدق (hover أو viewport أو tap). على الرابط نفسه data-astro-prefetch.

متعملّش prefetch لكل روابط موقع ضخم على موبايل بياقة ضعيفة. خلّي الافتراضي عند المرور، واستثني الروابط الثقيلة.

أكتر من لغة

إعداد i18n في الكونفج: locales و defaultLocale، و routing.prefixDefaultLocale لو عايز /ar/... حتى للغة الأم ولا لأ.

الملفات تقدر تتعزل بمجلد src/pages/ar و src/pages/en، أو توجّه من الإعداد. المساعد getRelativeLocaleUrl من astro:i18n يبني رابط اللغة التانية من غير ما تلزق النصوص بإيد.

Astro.currentLocale اللغة اللي الصفحة اتعرضت بيها. حطها في lang على <html>. اتجاه rtl للعربية خلّيه في اللاياوت على حسب اللغة، مش ثابت لو الإنجليزي داخل نفس القالب.

سايت ماب و RSS

التكامل @astrojs/sitemap يكتب sitemap-index.xml وقت البناء من الصفحات الثابتة، بما فيها مسارات getStaticPaths. محتاج site في الكونفج. صفحات سيرفر مش دايمًا داخلة لوحدها، فتقدر تزود customPages.

RSS عادة endpoint src/pages/rss.xml.ts يقرأ المجموعة ويطلّع XML. فيه حزمة @astrojs/rss بتسهّل الشكل. حط رابط الملف في head.

عنوان المشاركة (og:title و og:image) وسمات في اللاياوت، مش التكامل. صورة OG لازم تكون رابط مطلق عشان منصات الشير تشوفها.

خلّصت الفصل لما

• تحط ClientRouter وتعرف الاسم القديم
• تستخدم transition:name لعنصر مشترك بين صفحتين
• تسمع أحداث astro:* من غير الثوابت المحذوفة
• تظبط i18n ولغة عنصر html
• تولّد سايت ماب بعد ما site يبقى مضبوط