أفضل أكواد ميتا تاج لمدونة بلوجر

شرح Meta Tags وكيفية استخدامها لتحسين SEO في بلوجر

مرحبًا بكم متابعي مدونة مبروك تك في شرح جديد، حيث سنتطرق اليوم إلى أكواد Meta Tags أو العلامات الوصفية، والتي تعتبر عاملًا أساسيًا لتعريف المدونة وكسب ثقة محركات البحث (مثل: Google، Bing، وغيرها). هذه العلامات تساعد في تحسين ظهور مدونتك في نتائج البحث الأولى.

ما هي Meta Tags؟

Meta Tags هي أكواد HTML توفر معلومات مهمة ومفصلة عن مدونتك لمحركات البحث. تساعد هذه العلامات محركات البحث على فهم محتوى الموقع ونوعه. إذا تمت إضافتها بشكل صحيح ومنظم، فإنها تساهم في:

• تحسين الأرشفة السريعة للموقع والمواضيع.
• تصدر نتائج البحث (SEO).
• حماية رابط الموقع من الحظر على مواقع التواصل الاجتماعي.

كيفية إضافة Meta Tags في بلوجر

لإضافة أكواد Meta Tags إلى مدونتك، اتبع الخطوات التالية:

1. قم بالتوجه إلى لوحة تحكم بلوجر.
2. انتقل إلى القالب ثم انقر على تحرير HTML.
3. استخدم CTRL + F للبحث عن وسم الإغلاق </head>.
4. ألصق أكواد Meta Tags التالية مباشرة فوق وسم </head>:

<!-- Meta Tags ~ -->
<meta content='IE = EmulateIE9' http-equiv='X-UA-Compatible' />
<b:include data='blog' name='all-head-content' />
<b:include data='blog' name='google-analytics' />

<meta expr:content='data:blog.locale' http-equiv='content-language' />
<meta expr:content='data:blog.title' name='copyright' />
<link expr:href='data:blog.canonicalUrl.https' itemprop='url' rel='canonical' />
<link expr:href='data:blog.blogspotFaviconUrl' rel='icon' type='image/x-icon' />

<!-- device Mobile -->
<meta content='width=device-width, initial-scale=1' name='viewport' />

<!-- adult Content -->
<b:if cond='data:blog.adultContent'>
  <meta content='adult' name='rating' />
</b:if>

<!-- skin color -->
<meta expr:content='data:skin.vars.keycolor' name='theme-color' />
<meta expr:content='data:skin.vars.keycolor' name='msapplication-navbutton-color' />

<!-- hreflang URL -->
<link expr:href='data:blog.canonicalUrl.https + "?hl=en"' hreflang='en' rel='alternate' />
<link expr:href='data:blog.canonicalUrl.https + "?hl=ar"' hreflang='ar' rel='alternate' />
<link expr:href='data:blog.canonicalUrl.https + "?hl=fr"' hreflang='fr' rel='alternate' />
<link expr:href='data:blog.canonicalUrl.https + "?hl=de"' hreflang='de' rel='alternate' />

<!-- SEO Title -->
<title>
  <b:if cond='data:view.isPost or data:view.isPage or data:view.isHomepage'>
    <data:view.title.escaped/>
  <b:elseif cond='data:view.isSearch' />
    <b:if cond='data:view.search.label'>
      <b:eval expr='data:view.search.label' /> - <data:blog.title/>
    <b:elseif cond='data:view.search.query' />
      <b:eval expr='data:view.search.query' /> - <data:blog.title/>
    </b:if>
  <b:elseif cond='data:view.isArchive' />
    أرشيف <data:blog.pageName/> - <data:blog.title/>
  <b:else/>
    Page 404 - <data:blog.title/>
  </b:if>
</title>

<!-- facebook open graph -->
<meta expr:content='data:blog.title' property='og:site_name' />
<meta content='ar_AR' property='og:locale' />
<meta content='en_AR' property='og:locale:alternate' />
<meta content='id_ID' property='og:locale:alternate' />

<!-- OpenGraph for Home -->
<meta content='article' property='og:type' />
<b:if cond='data:blog.url == data:blog.homepageUrl'>
  <meta expr:content='data:blog.title' property='og:title' />
  <b:if cond='data:blog.postImageThumbnailUrl'>
    <meta expr:content='data:blog.postImageThumbnailUrl' property='og:image' />
  </b:if>
</b:if>

<!-- OpenGraph for Posts -->
<b:if cond='data:blog.pageType == "item"'>
  <meta expr:content='data:blog.pageName' property='og:title' />
  <meta expr:content='data:blog.postImageUrl' property='og:image' />
<b:else/>
  <b:if cond='data:blog.postImageThumbnailUrl'>
    <meta expr:content='data:blog.postImageThumbnailUrl' property='og:image' />
  </b:if>
</b:if>

<!-- OpenGraph description -->
<b:if cond='data:blog.metaDescription'>
  <meta expr:content='data:blog.metaDescription' property='og:description' />
</b:if>

<!-- twitter meta card -->
<meta expr:content='data:blog.homepageUrl' name='twitter:domain' />
<meta expr:content='data:blog.pageName' name='twitter:title' />
<b:if cond='data:blog.postImageUrl'>
  <meta content='summary_large_image' name='twitter:card' />
  <meta expr:content='data:blog.postImageUrl' name='twitter:image' />
<b:else/>
  <meta content='summary' name='twitter:card' />
  <b:if cond='data:blog.postImageThumbnailUrl'>
    <meta expr:content='data:blog.postImageThumbnailUrl' name='twitter:image' />
  </b:if>
</b:if>

<!-- author Blogger -->
<meta content='GOOGLE-WEBMASTER-CODE' name='google-site-verification' />

<!-- Facebook card username meta -->
<meta content='FACEBOOK-APP-ID' property='fb:app_id' />
<meta content='FACEBOOK-ADMIN-ID' property='fb:admins' />
<meta content='https://www.facebook.com/NAME-F-C' property='article:author' />
<meta content='https://www.facebook.com/NAME-F-P' property='article:publisher' />

<!-- twitter card username meta -->
<meta content='@NAME' name='twitter:site' />
<meta content='@NAME' name='twitter:creator' />
<!-- /Meta Tags ~ -->
    

شرح تفصيلي لأهم Meta Tags

• http-equiv='X-UA-Compatible': تساعد في عرض صفحات الويب بشكل صحيح في متصفحات IE القديمة.
• name='all-head-content': علامة قياسية في بلوجر لتوليد روابط التغذية والعناوين والوصف.
• name='google-analytics': خاصة بأداة Google Analytics لتحليل حركة الزوار.
• http-equiv='content-language': تحدد لغة المدونة (مثل: AR للعربية).
• name='copyright': تحفظ حقوق محتوى المدونة.
• rel='canonical': تمنع مشاكل المحتوى المكرر.
• type='image/x-icon': تحدد أيقونة الموقع (Favicon).
• name='viewport': تجعل الموقع متجاوبًا مع الأجهزة المحمولة.
• name='rating': تحدد تصنيف المحتوى (مثل: للبالغين).
• name='theme-color': تحدد لون شريط الأدوات في المتصفحات الحديثة.
• hreflang: تستهدف لغات مختلفة لعرض المحتوى.
• og:title و og:image: تستخدم لنشر المحتوى بشكل صحيح على Facebook.
• twitter:card و twitter:image: تستخدم لنشر المحتوى بشكل صحيح على Twitter.

نصائح إضافية

• تأكد من تعبئة جميع الحقول المطلوبة في إعدادات بلوجر (مثل: الوصف، الكلمات المفتاحية، إلخ).
• استخدم أدوات مثل Google Search Console لمراقبة أداء موقعك.
• قم بتحسين الصور باستخدام أدوات مثل TinyPNG لتحسين سرعة التحميل.

اكواد ميتا تاج اخري

(1) إضافة وصف Meta Description ديناميكي

الوصف الوصفي (Meta Description) هو نص قصير يظهر تحت عنوان الصفحة في نتائج البحث. يمكنك إضافة وصف ديناميكي لكل صفحة أو مقالة في بلوجر باستخدام الكود التالي:

<b:if cond='data:blog.metaDescription != ""'>
  <meta expr:content='data:blog.metaDescription' name='description'/>
<b:else/>
  <meta content='وصف افتراضي لمدونتك' name='description'/>
</b:if>
    

نصيحة: تأكد من أن الوصف يحتوي على الكلمات المفتاحية الرئيسية للمقالة ويجذب انتباه المستخدمين للنقر على الرابط.

(2) تحسين Open Graph Tags لعرض أفضل على وسائل التواصل الاجتماعي

عند مشاركة رابط مدونتك على Facebook أو Twitter، يمكنك تحسين طريقة عرض العنوان، الوصف، والصورة باستخدام Open Graph Tags. إليك بعض الإضافات:

<!-- Open Graph for Facebook -->
<meta expr:content='data:blog.pageTitle' property='og:title'/>
<meta expr:content='data:blog.canonicalUrl' property='og:url'/>
<meta expr:content='data:blog.metaDescription' property='og:description'/>
<meta expr:content='data:blog.postImageUrl' property='og:image'/>

<!-- Twitter Card -->
<meta name='twitter:card' content='summary_large_image'/>
<meta expr:content='data:blog.pageTitle' name='twitter:title'/>
<meta expr:content='data:blog.metaDescription' name='twitter:description'/>
<meta expr:content='data:blog.postImageUrl' name='twitter:image'/>
    

نصيحة: استخدم صورًا عالية الجودة وأبعاد مناسبة (1200x630 بكسل) لضمان ظهورها بشكل مثالي.

(3) إضافة علامات Schema Markup

علامات Schema Markup تساعد محركات البحث على فهم محتوى صفحتك بشكل أفضل. يمكنك إضافة Schema للمقالات باستخدام الكود التالي:

<script type='application/ld+json'>
{
  "@context": "https://schema.org",
  "@type": "BlogPosting",
  "headline": "<data:blog.pageName/>",
  "description": "<data:blog.metaDescription/>",
  "image": "<data:blog.postImageUrl/>",
  "author": {
    "@type": "Person",
    "name": "اسم الكاتب"
  },
  "publisher": {
    "@type": "Organization",
    "name": "اسم المدونة",
    "logo": {
      "@type": "ImageObject",
      "url": "رابط الشعار"
    }
  },
  "datePublished": "<data:blog.postDateISO8601/>",
  "dateModified": "<data:blog.postDateISO8601/>",
  "mainEntityOfPage": {
    "@type": "WebPage",
    "@id": "<data:blog.canonicalUrl/>"
  }
}
</script>
    

نصيحة: يمكنك استخدام أداة Google Structured Data Testing Tool للتحقق من صحة العلامات.

(4) تحسين سرعة تحميل الموقع

سرعة تحميل الموقع عامل مهم في SEO. إليك بعض النصائح:

• ضغط الصور: استخدم أدوات مثل TinyPNG لضغط الصور دون فقدان الجودة.
• تمكين التخزين المؤقت (Caching): يمكنك استخدام إضافة Cache في بلوجر أو إضافة أكواد HTTP Headers لتمكين التخزين المؤقت.
• تقليل استخدام JavaScript غير الضروري: قلل من الأكواد البرمجية التي تبطئ تحميل الصفحة.

(5) إضافة Breadcrumbs (مسار التنقل)

Breadcrumbs تساعد محركات البحث والمستخدمين على فهم هيكل موقعك. يمكنك إضافتها باستخدام Schema Markup:

<script type='application/ld+json'>
{
  "@context": "https://schema.org",
  "@type": "BreadcrumbList",
  "itemListElement": [
    {
      "@type": "ListItem",
      "position": 1,
      "name": "الصفحة الرئيسية",
      "item": "<data:blog.homepageUrl/>"
    },
    {
      "@type": "ListItem",
      "position": 2,
      "name": "<data:blog.pageName/>",
      "item": "<data:blog.canonicalUrl/>"
    }
  ]
}
</script>
    

(6) إضافة روابط hreflang للغات المتعددة

إذا كانت مدونتك تدعم عدة لغات، يمكنك استخدام hreflang لإخبار محركات البحث بالصفحات المترجمة:

<link expr:href='data:blog.canonicalUrl.https + "?hl=en"' hreflang='en' rel='alternate'/>
<link expr:href='data:blog.canonicalUrl.https + "?hl=ar"' hreflang='ar' rel='alternate'/>
<link expr:href='data:blog.canonicalUrl.https + "?hl=fr"' hreflang='fr' rel='alternate'/>
    

(7) مراقبة أداء الموقع باستخدام أدوات SEO

استخدم الأدوات التالية لتحسين أداء مدونتك:

• Google Search Console: لمراقبة ظهور موقعك في نتائج البحث وإصلاح الأخطاء.
• Google Analytics: لتحليل حركة الزوار وسلوكهم.
• PageSpeed Insights: لتحليل سرعة تحميل الموقع والحصول على نصائح لتحسينها.

(8) إضافة Meta Tags للصفحات الخاصة (404، الأرشيف، البحث)

يمكنك تحسين Meta Tags للصفحات الخاصة مثل صفحة 404 أو صفحات الأرشيف باستخدام الشروط التالية:

<b:if cond='data:view.isError'>
  <meta content='Page 404 - <data:blog.title/>' name='title'/>
  <meta content='عذرًا، الصفحة التي تبحث عنها غير موجودة.' name='description'/>
</b:if>

<b:if cond='data:view.isArchive'>
  <meta content='أرشيف <data:blog.pageName/> - <data:blog.title/>' name='title'/>
  <meta content='تصفح أرشيف <data:blog.pageName/> على مدونتنا.' name='description'/>
</b:if>
    

(9) إضافة Meta Tags للأمان (Security Tags)

لتعزيز أمان مدونتك، يمكنك إضافة العلامات التالية:

<!-- منع المتصفحات من تخمين نوع المحتوى -->
<meta http-equiv='X-Content-Type-Options' content='nosniff'/>

<!-- منع التصيد الاحتيالي -->
<meta http-equiv='X-XSS-Protection' content='1; mode=block'/>

<!-- سياسة أمان المحتوى (CSP) -->
<meta http-equiv='Content-Security-Policy' content='default-src https:'/>
    

(10) نصائح أخيرة

• تحديث المحتوى باستمرار: محركات البحث تحب المحتوى الطازج والمحدث.
• استخدام الكلمات المفتاحية بشكل طبيعي: تجنب حشو الكلمات المفتاحية في المحتوى.
• بناء روابط خلفية (Backlinks): احصل على روابط من مواقع موثوقة لتحسين ترتيب موقعك.

الخلاصة

Meta Tags هي أداة قوية لتحسين SEO وزيادة ظهور مدونتك في نتائج البحث. تأكد من إضافتها بشكل صحيح ومنظم لتحقيق أفضل النتائج. إذا كان لديك أي استفسار، فلا تتردد في طرحه في التعليقات.