مساحة اعلانية

آخر المواضيع

The titles in templates blogger h1, h2, h3


إذا كان هناك قالب مناسب لموقعك ولكنه قد يحتاج بعض التعديلات لكى يكون صديق لمحركات البحث ، فتابع هذا المقال الذى يناقش جزئية العناوين وأهميتها وكيفية إستغلالها فى تصدر موضوعات موقعك إلى الصفحات الأولى من نتائج جوجل وسأعرض فى مقالى:
  • أهمية إضافة H1,H2,H3 إلى تدويناتك
  • مبادئ أساسية عن استخدام الترويسة 1،2،3
  • تنسيق العناوين بمدونات بلوجر
  • اختبر موقعك من ناحية Seo
  • اصلاح الأكواد فى موقعك
  • تنسيق العناوين بعد إصلاح الأكواد

 أهمية إضافة عناوين H1,H2,H3 إلى تدويناتك

العناوين أو "الترويسات" Heading tags واحدة من أهم آليات السيو فهى لا تقل أهمية عن الميتاتاج أو الكلمات المفتاحية، .........و غير ذلك من الآليات التى يجب أن تستخدمها لزيادة عدد الزوار القادمون من محرك البحث.
تنقسم وسوم العناوين إلى : H1,H2,H3,H4
بحيث تحاط هذه الوسوم العناوين على حسب أهميتها :
فلنفرض أن عنوان الموضوع هو الأهم بالنسبة للزائر >>> فيجب أن يحاط بالوسوم H1
،هناك عناوين فرعية داخل الموضوع >>> يجب أن تحاط بالوسوم H2
وعلى ذلك تعطى إشارة لمحرك البحث بأن يعطى الأولوية للعنوان المحاط بالوسوم H1 ويتقدم عن العناوين المحاطة بالوسوم H2 للظهور فى نتائج البحث.

مبادئ أساسية عن استخدام الترويسة 1،2،3

  1.  أهم عنوان فى الصفحة يجب أن يحاط بالوسوم H1  ، لذلك يمكن أن يستخدم لعنوان المدونة أو عنوان التدوينة.
  2. يفضل أن يستخدم الوسوم H1 مرة واحدة فى صفحة الويب.
  3. يستخدم الوسوم H2 فى العناوين الفرعية ، H3,H4 للعناوين الثانوية الأقل أهمية.
  4. تستخدم الكلمات المفتاحية فى العناوين حسب أهميتها.

تنسيق العناوين بقوالب بلوجر:

معظم قولب بلوجر تجد بها مشكلة فى هذه العناوين ، فقد تجد عناوين التدوينات تأخذ الكود h3 ، و هو ما يقلل من أهميتها مع إنها الأهم وهى الأولى بأن تحاط بالوسوم H1
وهذه صورة توضح الترتيب الصحيح لوسوم العناوين بالصفحة الرئيسية للمدونة  :

heading tags
يجب أن يكون ترتيب وسوم العناوين فى صفحات التدوينات كما بالصورة:

heading tags
لاحظ تبديل الوسوم بين h1,h2 فى الصفحة الرئيسية للمدونة و صفحات التدوينات.

كيفية إستخدام العناوين داخل التدوينات على بلوجر:

يمكنك إضافة وسوم العناوين من خلال شريط أدوات المشاركة ، وذلك عن طريق تحديد النص الذى تريد ثم إختيار التنسيق المناسب (عادى أو عنوان أو عنوان فرعى أو ثانوى) حسب أهمية النص
heading tags
هذا بالنسبة للعناوين داخل الموضوعات ، فهل بتطبيق ما سبق ستحتوى هذه وسوم  هذه العناوين على الترتيب الصحيح ؟؟

اختبر موقعك من ناحية Seo

يمكنك إستخدام بعض الأدوات لتتعرف على توافق عناوين موقعك مع محركات البحث مثل :
  1.  أداة   seositecheckup  فمن خلال إختبار رابط موقعك سيتبين لك كم عدد الوسوم H1,H2,H3,.......... والعناوين التى تحتوى عليها.
  2. تحميل وتثبيت شريط أدوات Web Developer لمتصفح فايرفوكس  أو جوجل كروم 
قم بفتح موقعك وإختباره بهذه الأداة من خلال تبويب "Outline" وتنشيط outline headings , show element name 
كما بالصورة

    لاحظ ظهور الوسوم بجانب العناوين بالشكل الصحيح

    كن داعيا للخير
     أما إذا ظهرت الوسوم بشكل آخر مثل أن تجد عنوان التدوينة يحاط بـ H3 مثلا فهذا يضر بموقعك ويحتاج إلى التعديل بالقالب.

    اصلاح الأكواد فى موقعك

    من أفضل طرق إصلاح ترتيب وسوم العناوين بموقعك هو ما قدمه موقع MBT فهو يسمح بإضافة صورة كشعار بديل لعنوان المدونة و فى نفس الوقت تأخذ وسوم h1 فى الصفحة الرئيسية ، ووسوم h2 فى صفحات الموضوعات ، بينما يأخذ عنوان التدوينة h1 فى صفحة التدوينة ، h2 فى الصفحة الرئيسية وهذه هى الخطوات:
    إذهب إلى تحرير قالب ، ثم إبحث عن هذا الكود  <header>
    ثم قم بإستبداله بالسطر التالى:

    <header itemscope='itemscope' itemtype='http://schema.org/Organization'>
    ثم إبحث عن هذا الكود : <!--Show the image only--> سوف تجد تحته هذا الكود
    <a expr:href='data:blog.homepageUrl' style='display: block'> 
              <img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + &quot;_headerimg&quot;' expr:src='data:sourceUrl' expr:width='data:width' style='display: block'/> 
            </a>
    قم بإستبداله بالكود التالى:
    <!--Header Tags Optimized Code by MBT-->
    
    <b:if cond='data:blog.pageType == &quot;index&quot;'> 
                              <h1 itemprop='name'><a expr:href='data:blog.homepageUrl' itemprop='url' style='display: block'> 
                                <img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + &quot;_headerimg&quot;' expr:src='data:sourceUrl' expr:width='data:width' itemprop='logo' style='display: block'/><span>your Blog title</span></a> 
                                </h1>
    
    <b:elseif cond='data:blog.pageType == &quot;archive&quot;'/>
    
    <h1 itemprop='name'><a expr:href='data:blog.homepageUrl' itemprop='url' style='display: block'> 
    <img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + &quot;_headerimg&quot;' expr:src='data:sourceUrl' expr:width='data:width' itemprop='logo' style='display: block'/><span>My Blogger Tricks</span></a> 
    </h1>
    
    <b:else/> 
                                       <h2 itemprop='name'><a expr:href='data:blog.homepageUrl' style='display: block'> 
                                <img itemprop='logo' expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + &quot;_headerimg&quot;' expr:src='data:sourceUrl' expr:width='data:width' style='display: block'/><span>My Blogger Tricks</span></a></h2>            </b:if>
    إستبدال  your Blog title بعنوان مدونتك
    ثم إبحث عن هذا الكود :   <!--No header image -->  سوف تجد تحته هذا الكود

    <div class='titlewrapper'> 
                              <h1 class='title'> 
                                <b:include name='title'/> 
                              </h1> 
                            </div>
    إستبدله بالكود التالى:
    <!--Header Tags Optimized Code by MBT-->
    
    <div class='titlewrapper'> 
    <b:if cond='data:blog.pageType == &quot;index&quot;'> 
                              <h1 class='title'> 
                                <b:include name='title'/> 
                              </h1>
    
    <b:elseif cond='data:blog.pageType == &quot;archive&quot;'/>
    
    <b:if cond='data:blog.pageType == &quot;index&quot;'> 
    <h1 class='title'> 
    <b:include name='title'/> 
    </h1>
    
    <b:else/> 
      <h2 class='title'> <b:include name='title'/></h2> 
    </b:if> </b:if> 
                            </div>

    تنسيق العناوين فى قالب بلوجر :

    بعد ضبط العناوين ستحتاج  إلى بعض التنسيق:
    إبحث عن هذا الكود :  ]]></b:skin> أضف فوقه مباشرة الكود التالى:
    #header h1 a,#header h2 a, #header h1 a:visited, #header h2 a:visited{color:#fff; font-size:10px;text-decoration:none;margin:0;padding:0} 
    .header h1 span, #header h2 span{text-indent:-999em; display:block;}

    ثم قم بحفظ القالب.

    الكــاتــب

      • مشاركة

    ليست هناك تعليقات:

    لا تذهب دون أن تترك تعليقك على الموضوع

    ملحوظة: يمكن لأعضاء المدونة فقط إرسال تعليق.

    جميع الحقوق محفوظة لــ مدونة كل العرب 2020 © DMCA.com Protection Status