1. هندسة ملف XML والتحكم في الموارد
أكبر كذبة يصدقها المطورون هي "بلوجر بطيء ولا يمكن التحكم فيه". الحقيقة هي أن بلوجر يحمل الكثير من ملفات CSS و JS الافتراضية ("Blogger bundles") التي لا تحتاجها. الخطوة الأولى في السيو المتقدم هي التخلص من هذا الوزن الزائد.
1.1 تعطيل حزم CSS و JS الافتراضية
لتحقيق سرعة تحميل عالية (95+ في PageSpeed)، يجب منع بلوجر من حقن ملفاته الافتراضية. هذا يتطلب تعديل وسم <html> في بداية القالب.
XML Theme Code
<!-- الكود المعدل لمنع تحميل ملفات بلوجر الافتراضية -->
<html b:css='false' b:defaultwidgetversion='2' b:layoutsVersion='3' b:responsive='true' b:templateUrl='...' expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
بإضافة b:css='false'، أنت تخبر المحرك: "أنا سأتكفل بالتصميم، لا تتدخل". لكن احذر، هذا سيحذف تنسيقات الأدوات الافتراضية.
1.2 التحميل الشرطي للموارد (Conditional Asset Loading)
لماذا تقوم بتحميل مكتبة "Prism.js" في الصفحة الرئيسية؟ أو تحميل سكريبت التعليقات في صفحات الأرشيف؟ هذا إهدار لموارد المتصفح.
Conditional Loading Optimization
<!-- تحميل مكتبة تلوين الأكواد فقط داخل المقالات -->
<b:if cond='data:view.isPost'>
<link href='https://cdnjs.cloudflare.com/ajax/libs/prism/1.24.1/themes/prism.min.css' rel='stylesheet'/>
<script src='https://cdnjs.cloudflare.com/ajax/libs/prism/1.24.1/prism.min.js' defer='defer'></script>
</b:if>
<!-- منع تحميل أدوات بلوجر الثقيلة في الصفحة الرئيسية -->
<b:if cond='!data:view.isHomepage'>
<!-- أكواد خاصة بالصفحات الداخلية فقط -->
</b:if>
2. بناء DOM دلالي (Semantic HTML5)
محركات البحث لا "تقرأ" الصفحة، بل "تحلل" بنيتها (Parse). استخدام div لكل شيء هو ممارسة سيئة. في بلوجر، يجب تحويل "الأقسام" (Sections) إلى عناصر HTML5 ذات معنى.
الفرق بين الهيكلة العشوائية والهيكلة الدلالية.
مفهوم ARIA Roles في بلوجر:
لا تكتفِ بالوسوم الدلالية، بل ادعمها بـ ARIA Roles لتعزيز إمكانية الوصول (Accessibility).
HTML5 Structure
<!-- الهيكل المثالي لقالب بلوجر -->
<header role='banner'>...</header>
<main role='main'>
<article itemscope='itemscope' itemtype='http://schema.org/BlogPosting'>
<header>
<h1 itemprop='headline'><data:post.title/></h1>
<div class='meta'>نشر بواسطة <span itemprop='author'><data:post.author/></span></div>
</header>
<div class='post-body' itemprop='articleBody'>
<data:post.body/>
</div>
</article>
</main>
<aside role='complementary'>...</aside>
<footer role='contentinfo'>...</footer>
3. منظومة البيانات المنظمة المعقدة (Schema)
سنقوم ببناء BreadcrumbList (مسار التنقل) ديناميكي يعتمد على التسميات (Labels) كأقسام.
3.1 إنشاء Breadcrumb JSON-LD ديناميكي
هذا الكود يتعامل مع مصفوفة التسميات (Labels Array) في بلوجر.
Advanced JSON-LD
<b:if cond='data:view.isPost'>
<script type='application/ld+json'>
{
"@context": "https://schema.org",
"@type": "BreadcrumbList",
"itemListElement": [{
"@type": "ListItem",
"position": 1,
"name": "الرئيسية",
"item": "<data:blog.homepageUrl/>"
}
<b:loop values='data:post.labels' var='label' index='i'>
<b:if cond='data:i == 0'>
,{
"@type": "ListItem",
"position": 2,
"name": "<data:label.name/>",
"item": "<data:label.url.canonical/>"
}
</b:if>
</b:loop>
,{
"@type": "ListItem",
"position": 3,
"name": "<data:post.title.escaped/>",
"item": "<data:blog.url.canonical/>"
}]
}
</script>
</b:if>
4. إدارة ميزانية الزحف و Link Equity
يجب تقليل الصفحات غير المفيدة (مثل أرشيف التاريخ والبحث) لتوفير ميزانية الزحف.
4.1 التحكم في رؤوس الروبوتات
سنقوم بمنع فهرسة صفحات البحث وصفحات الأرشيف برمجياً:
Meta Robots Logic
<b:if cond='data:view.isArchive or data:view.isSearch'>
<meta content='noindex, follow' name='robots'/>
<b:else/>
<b:if cond='data:view.isPost or data:view.isPage or data:view.isHomepage'>
<meta content='index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1' name='robots'/>
</b:if>
</b:if>
5. مسار العرض الحرج (Critical Rendering Path)
الحل في بلوجر هو تقنية Inline CSS للجزء العلوي من الصفحة (Above the Fold) وتأخير الباقي.
الفرق الهائل في تجربة المستخدم.
استخدم هذا الكود لتحميل CSS بشكل غير متزامن:
Asynchronous CSS Loading
<link rel="preload" href="style.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="style.css"></noscript>
6. السيو الدولي (Multi-language)
يمكن ربط مدونتين (عربية وإنجليزية) باستخدام وسوم hreflang يدوياً.
Manual Hreflang
<link rel="alternate" hreflang="ar" href="RABIT_AL_MAQAL_ARABIC" />
<link rel="alternate" hreflang="en" href="RABIT_AL_MAQAL_ENGLISH" />
7. الأسئلة التقنية الشائعة (Developer Edition)
كيف أتعامل مع خاصية CLS الناتجة عن تحميل الخطوط؟
استخدم خاصية font-display: swap; في تعريفات CSS، واعمل Preload لملف الخط الرئيسي.
هل يمكن استخدام صور WebP في خلفيات CSS؟
نعم، ولكن يجب تغيير الامتداد يدوياً في رابط الصورة المستضافة على بلوجر من .jpg إلى -rw.
ما حل مشكلة "Remove unused JavaScript" لأدسنس؟
الحل هو Lazy Loading للإعلانات، أي تحميل السكربت عند التمرير (Scroll) فقط.
كلمة أخيرة للمطور
تحويل بلوجر من منصة بسيطة إلى وحش سيو يتطلب التلاعب بالأكواد (Template Code). الأكواد هنا هي مجرد بداية. جربها دائماً في مدونة تجريبية أولاً.
