يا مرحبا بكم متابعين مدونة مبروك تك في شرح جديد , حيث سنتطرق اليوم الى اكواد meta tags seo او العلامات الوصفية والتي تعبر عامل أساس لتعريف بالمدونة وكسب ثقة محرك البحث ( مثل : google - bing وغيرها من محركات البحث ) مما يساعد في التصدر على نتائج البحث الأولى .
مفهوم أكواد الميتا تاج - meta tags :
بمفهوم بسيط و قصير كود الميتا تاج هو عبارة عن مجموعة من اكواد
أهمية العلامات الوصفية - meta tags seo :
توفر اكواد الميتا التاج المعلومات المهمة والمفصلة عن مدونتك لـ محركات البحث بحيث تساعده على التعرف على محتوى الموقع ونوعه وإن تمت إضافتها بشكل صحيح ومنظم كانت مساعدة لك في الأرشفة السريعة للموقع والمواضيع و كذالك في تصدر نتائج البحث وضبط السيو , كما أن اكواد الميتا تاج تحمي رابط الموقع من الحظر على مواقع التواصل الإجتماعي التي لاغنى عنها .
كيف يمكنني إضافة أكواد ميتا تاج الى مدونتي ؟
في هذا المقال المفصل سنشرح الطريقة الصحيحة و الأكواد السليمة التي يتوجب عليك في مدونتك , وطبعا نستخدم طريقتنا المعتادة دائما في إرفاق أي كود داخل القالب :
<!-- Meta Tags ~ -->
<!-- maine Code -->
<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'/>
<!-- <meta content='width=device-width, initial-scale=1, maximum-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 -->
<!-- author -->
<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>
<b:if cond='data:blog.postImageThumbnailUrl == "" '>
<meta content='ضع هنا رابط صورة تخص شعار مدونة بقياس 800/420' property='og:image'/>
</b:if>
<!-- og:image dimension -->
<meta content='800' property='og:image:width'/>
<meta content='420' property='og:image:height'/>
<!-- 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>
<b:if cond='data:blog.metaDescription'>
<meta expr:content='data:blog.metaDescription' name='twitter:description'/>
</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 ~-->
الأن فـل نشرع في شرح كل سمة تحويها العلامة الوصفية بالتفصيل حتى تتمكن من فهم كل السمات و دورها في القالب .. تابعو معي ..
شرح الجزء الجزء الرئيسي من الكود <!-- maine Code -->
تساعد العلامة الوصفية http-equiv='X-UA-Compatible' في تقديم صفحات الويب في متصفحات IE القديمة وهنا للإستطاعة من سلوك Internet Explorer 9 مع العلم أن المتصفحات الحديثة تتجاهل ببساطة هذا السطر من الشفرة , لاحظ في نفس السطر القيمة EmulateIE9 إشارة إستهداف إلى النسخة EmulateIE9 .
العلامة الوصفية التي تتضمن السمة name='all-head-content' علامة قياسية على منصة البلوجر تعمل عمل مولد روابط التغذية والعناوين والوصف وقيم وسمات تدعم قالب المدونة .
العلامة التي تحوي السمة name='google-analytics' هي خاصة بأداة Google Analytics وقد قمت بإعدادها تلقائياَ فـ بمجرد إضافتك معرف موقع الويب في المكان المخصص له في قسم إعدادات Blogger .
العلامة التي تحتوي على السمة http-equiv='content-language' معدة تلقائيا ل تستخرج اللغة التي يتم عرضها على المدونة ( مثلا AR تعني عربي ) .
العلامة الوصفية التي تحتوي على السمة name='copyright' خاص بحفظ حقوق المحتوى بحيث يتم توليد إسم المدونة تلقائيا .
علامة المتا تاج التي تحوي على السمة rel='canonical' وتعني الصفحة المتعارف عليها على منع قضايا المحتوى المكرر .
العلامة التي تحتوي على السمة type='image/x-icon' خاص بـ رمز التفضيل للمدونة و بـ مجرد إضافة الأيقونة من اداة التخطيط سيتم تشغيلها في هذا الكود .
شرح الجزء <!-- device Mobile -->
العلامة الوصفية التي تحتوي على السمة name='viewport' خاصة بطريقة العرض على الشاشات الذكية بحيث يمكنك منح القالب قابلية الاستخدام على الجوال مع أمكانية تعطيلها .
شرح الجزء <!-- adult Content -->
تجده موجود داخل علامة شرطية b:if و تخص هذه تقييم الصفحة في حال كانت تحتوي على محتوى للبالغين ولن تعمل إلا إذا قمنا بتفعيل هذه الخاصية من خلال إعدادات Blogger .
شرح الجزء <!-- skin color -->
العلامة الوصفية التي تحوي على السمة المكررة content='data:skin.vars.keycolor' في العلامتين معد للأستخراج تلقائيا , اللون الرئيسي للقالب لغرض تعيين لون شريط الأدوات , بدءًا من الإصدار 39 من Chrome لنظام Android على Lollipop .
شرح الجزء <!-- hreflang URL -->
العلامات hreflang لعناوين URL للغات والأقاليم التي تنتهي بالسمات التالية :
هي لغرض إستهداف لغات العرض المختلفة مثلا : تصميم قالب يدعم اللغات الأجنبية .
شرح الجزء <!-- SEO Title -->
هذا الكود كاملاً يقوم بظبط العناوين على تبويب المتصفح , كما يقوم بتولد عناوين الصفحات ويعرضها على تبويب المتصفح (مثلا : يقوم بكاتبة إسم المدونة - إسم الصفحة كـ صفحة الأرشيف و الخطأ ) .
شرح الجزء <!-- facebook open graph -->
كل العلامات الوصفية المدرجة تحت هذا العنوان هي للنشر السليم على موقع فيسبوك - facebook لا تغيير أي شيء فيه , سوى رابط الصورة البديلة .
شرح الجزء المعنون <!-- twitter meta card -->
كل العلامات الوصفية المدرجة تحت هذا العنوان هي للنشر السليم على موقع تويتر - twitter لا تغيير أي شيء فيه فهو معد تلقائيا .
شرح الجزء <!-- author blogger -->
العلامة الوصفية التي تحوي القيمة GOOGLE-WEBMASTER هي خاصة بالتحقق من ملكية الموقع في أدوات مشرفي المواقع قم بإستبدالها بالرمز الخاص بـ موقعك .
العلامة الوصفية التي تحوي القيمة FACEBOOK-APP-ID خاصة بـ معرف id تطبيق الفيس بوك قم بإستبدالها بخاصتك
العلامة الوصفية التي تحتوي على القيمة FACEBOOK-ADMIN-ID خاصة بـ معرف id حساب مدير التطبيق قم بإستبدالها بخاصتك .
العلامة الوصفية التي تحوي القيمة NAME-AUTHOR خاصة بـ رابط حساب المؤلف على فيسبوك قم بإستبدالها بخاصتك ( يمكنك وضع رابط صفحة الموقع إذا كان الموقعبع عدة مؤلفين ) .
العلامة الوصفية التي تحتوي على القيمة NAME-PUBLISHER خاصة بـ رابط صفحة موقعك على فيسبوك قم بإستبدالها بخاصتك .
العلامة الوصفية التي تحوي القيمة @NAME خاصة بـ إسم المستخدم للحساب الشخصي على تويتر تجدها مكررة مرتين قم بإستبدالها بخاصتك .
الآن يبدو أننا أنهينا شرحنا لهذا اليوم الذي كان يدور حول ميتا تاج بلوجر كما أتمنى أن يكون هذا الشرح نافع للجميع المدونين , إن كان لديك أي إستفسار فلتطرحه في التعليقات ليتم الرد عليك من طرف فريق عمل مبروك تك .