كن داعيا للخير

نعم محتواك جيد 😌، ولكن قد تتعجب من أن بعض المواقع المنافسة تسبقك إلى الصفحة الأولى من نتائج البحث بالرغم من أن محتواها ضعيف 😩 !!

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

ولكن إذا كان هناك قالب مناسب لموقعك ولكنه قد يحتاج بعض التعديلات لكى يكون صديق لمحركات البحث ، فتابع هذا المقال الذى يناقش جزئية العناوين وأهميتها وكيفية إستغلالها فى تصدر موضوعات موقعك إلى الصفحات الأولى من نتائج جوجل وسأعرض فى مقالى:

1. أهمية إضافة H1,H2,H3 إلى تدويناتك
2. مبادئ أساسية عن استخدام الترويسة 1،2،3
3. تنسيق العناوين بمدونات بلوجر
4. اختبر موقعك من ناحية Seo
5. اصلاح الأكواد فى موقعك
6. تنسيق العناوين بعد إصلاح الأكواد

إقرأ أيضًا: كيفية تنسيق عنوان صفحات مدونتك على محركات البحث

 أهمية إضافة عناوين 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
وهذه صورة توضح الترتيب الصحيح لوسوم العناوين بالصفحة الرئيسية للمدونة  :

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

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

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

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

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

1.  أداة   seositecheckup  فمن خلال إختبار رابط موقعك سيتبين لك كم عدد الوسوم H1,H2,H3,.......... والعناوين التى تحتوى عليها.
2. تحميل وتثبيت شريط أدوات Web Developer لمتصفح فايرفوكس  أو جوجل كروم 

<header itemscope='itemscope' itemtype='http://schema.org/Organization'>

<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>

<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>

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

#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;}

تنبيه : المرجو عدم نسخ الموضوع بدون ذكر مصدره المرفق بالرابط المباشر للموضوع الأصلي وإسم المدونة وشكرا

تابع:  أسرع الطرق لإنشاء صور متحركة بدون برامج

</head>

<!--www.condaianllkhir.com-->
<script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
<link href="https://cdn.rawgit.com/DrRO/jqGifPreview/46d8d1dd/jqGifPreview/jqGifPreview.css" rel="stylesheet"></link>
<script src="https://cdn.rawgit.com/DrRO/jqGifPreview/46d8d1dd/jqGifPreview/jqGifPreview.js"></script>

<img class="myImg" src="sample_first_frame.png" data-gif="sample_giphy.gif" />
<script>
 $(function() {
  $(".myImg").jqGifPreview();
 });
</script>

• إذا كان لديك مكتبة JQuery بالقالب ، فلا داعى لإضافة السطر الأزرق بالكود .
• قم بإستبدال الجزء الملون باللون الأصفر بالكود برابط الصورة الثابتة بصيغة PNG
• قم بإستبدال الجزء الملون باللون الأخضر بالكود برابط الصورة المتحركة بصيغة Gif
• إذا كنت تريد إستخدام هذه الخاصية فى موضوع معين فقط يمكنك إضافة جميع الأكواد داخل تبويب HTML للتدوينة.

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

معاينة الإضافة

كيفية تضمين أزرار المراسلة فيس بوك ماسنجر بوت إلى موقعك

1. فى البداية قم بإنشاء روبوت على الفيس بوك ماسنجر الخاص بصفحتك على الفيسبوك عبر منصة Chatfuel
2. ثم من لوحة التحكم فى حسابك فى Chatfuel توجه إلى تبويب Grow
3. ثم إضغط على Send to messengr Plugin

كيف تضيف أهم منشورات الفيس بوك وتويتر إلى موقعك 

تنبيه : المرجو عدم نسخ الموضوع بدون ذكر مصدره المرفق بالرابط المباشر للموضوع الأصلي وإسم المدونة وشكرا 

• أن معظم المستخدمين يمتلكون حسابات على الفيس بوك لذلك عند وجود صندوق تعليقات الفيس بوك أسفل تدويناتك يشجع الزائرين على ترك تعليق
• أصبح صندوق تعليقات الفيس بوك يدعم إرفاق الصور داخل التعليق بعكس نظام بلوجر الإفتراضى.
• يمكن لمحرك البحث جوجل الزحف لتعليقات الفيس بوك ، لذلك يمكن أن يكون من إحدى الأدوات التى تؤدى إلى فهرسة موقعك وظهورها بمحركات البحث.
• كما أنه يساعد على نشر مواضيع المدونة على صفحة المعلق وذلك عند تفعيل النشر على صفحته على الفيس بوك. 

 خطوات تركيب تعليقات الفيس بوك:

1. شق خاص بإنشاء تطبيق على الفيس بوك .
2. شق خاص بتركيب الأكواد بقالب مدونتك على بلوجر
3. كيفية إدارة تعليقات الفيس بوك وتفعيل الإشعارات
4. إخفاء صندوق تعليقات بلوجر 

أولًا: إنشاء تطبيق على الفيس بوك

 

 

ثانيًا: تركيب صندوق التعليقات إلى قالب بلوجر

xmlns:fb=’http://www.facebook.com/2008/fbml’

<div id='fb-root'/>
<script>
window.fbAsyncInit = function() {
    FB.init({xfbml: true, appId: معرف التطبيق });
  };
  (function() {
    var e = document.createElement('script'); e.async = true;
    e.src = document.location.protocol +
      '//connect.facebook.net/ar_AR/all.js'
    document.getElementById('fb-root').appendChild(e);
  }());
</script>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<meta   expr:content='data:blog.pageTitle' property='og:title'/>
<meta   expr:content='data:blog.url' property='og:url'/>
<b:else/>
<meta   expr:content='data:blog.title' property='og:title'/>
<meta   expr:content='data:blog.homepageUrl' property='og:url'/>
</b:if>
<meta   content='عنوان المدونة' property='og:site_name'/>
<meta   content='رابط صورة شعار للموقع'   property='og:image'/>
<meta content='معرف التطبيق ID'   property='fb:app_id'/>
<meta content='معرف حسابك على فيسبوك ID'   property='fb:admins'/>
<meta content='article'   property='og:type'/>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div><script src='http://connect.facebook.net/ar_AR/all.js#xfbml=1'/>
<fb:comments width='600' expr:href='data:post.url' expr:title='data:post.title' expr:xid='data:post.id' migrated='1'/>
</div>
</b:if>

1. فتح الروابط الخارجية وروابط التحميل داخل صندوق الضوء
2. أداة إظهار المحتوى المخفى بعد مشاركة الموضوع على المواقع الإجتماعية
3. وأخيرًا أداة اليوم والتى تأخر خروج الزائر من موقعك عبر الروابط الخارجية والتى سأشرح إضافتها بطريقتين:

• الطريقة الأولى:عرض عداد تنازلى قبل ظهور الرابط مع رسالة "إنتظر قليلا قبل ظهور الرابط"
• الطريقة الثانية:وهى ظهور العداد الزمنى بعد الضغط على الرابط  وقبل التوجه إلى الصفحة الخارجية مع ظهور رسالة "إنتظر قليلا قبل التوجه إلى الصفحة"

كيفية تركيب عداد تنازلى يؤخر الخروج من الموقع لمدونات بلوجر

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" type="text/javascript"></script>

<script>
$(function () {
    $("#condaianllkhir").click(function () {
        var seconds = 5;
        $("#CountDown").show();
  $("#condaianllkhir").hide();
        $("#DrRO").html(seconds);
        setInterval(function () {
            seconds--;
            $("#DrRO").html(seconds);
            if (seconds == 0) {
                $("#CountDown").hide();
                window.location = "http://www.Youradress.com/";
            }
        }, 1000);
    });
});
</script>
<center>
<br/>
<br/>
 <input type="button" id="condaianllkhir" value="إضغط هنا للتحميل" />
<br />
<br />
<div id="CountDown" style="display: none">
<b>إنتظر قليلا قبل التوجه إلى صفحة التحميل <br/> <br/> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDaahbl_dPzmhzwOjW2HFLEVTkOO0KJ43pAEXq_unqZHokHz7FKnvAwuCeDVVtVok72mjP5GCUdb6pFtbGCrkaEEj_0PIRkg2Xcr1obu7j7vH1qUzaN5VZpBuf1kvZdmhrwQ-9c_nLUdxp/s1600/circular_loader_282_red.gif" /> <br/><br/> <span id="DrRO"></span>&nbsp;seconds.
</div>
</center>

• لا تنسى إستبدال الرابط http://www.Youradress.com/  برابط التحميل أو الرابط الخارجى الخاص بك
• إذا أردت تغيير العداد التنازلى قم بتغيير رقم 5 الموجود بالكود

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

1. إذهب إلى لوحة تحكم بلوجر ثم اختر تبويب "قالب"
2. قم بتحرير قالب بعد الاحتفاظ بنسخة احتياطية منه.
3. قم بالبحث عن الوسوم <head> ثم اضف الكود التالى بعده مباشرة

<!-- twitter card details -->
<meta expr:content='data:blog.title' name='twitter:site'/>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<meta expr:content='data:blog.title' name='twitter:title'/>
<b:if cond='data:blog.metaDescription'>
<meta expr:content='data:blog.metaDescription' property='og:description'/>
<b:else/>
<meta expr:content='&quot;إقرأ المزيد &quot; + data:blog.pageTitle + &quot; &quot;' property='og:description'/>
</b:if>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<meta expr:content='data:blog.pageName' name='twitter:title'/>
<b:if cond='data:blog.metaDescription'>
<meta expr:content='data:blog.metaDescription' name='twitter:description'/>
<b:else/>
<meta expr:content='&quot;إقرأ المزيد &quot; + data:blog.pageName + &quot; كن داعيا للخير &quot; + data:blog.title + &quot;&quot;' name='twitter:description'/>
</b:if>
</b:if>
<b:if cond='data:blog.postImageUrl'>
<meta expr:content='data:blog.postImageUrl' name='twitter:image:src'/>
<b:else/>
<b:if cond='data:blog.postImageThumbnailUrl'>
<meta expr:content='data:blog.postThumbnailUrl' name='twitter:image:src'/>
<b:else/>
<meta content='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSGdCX37zt9OpiA4hes3ZDokKpPosAydqyKngxJPOyxoGHBcztcPXCeTr2_sPMcson0qhOrk0c7vA_STc6GZJPZt1mGqjlgAmJQzbcDGBeIErtHowYGgWvwn-S1YRuJUOS9YjnoQvJTXno/s1600/new-logo.png' name='twitter:image:src'/>
</b:if>
</b:if>
<meta content='summary_large_image' name='twitter:card'/>
<meta content='@DrRo2' name='twitter:creator'/>

<!-- end twitter card details -->

تنبيه : المرجو عدم نسخ الموضوع بدون ذكر مصدره المرفق بالرابط المباشر للموضوع الأصلي وإسم المدونة وشكرًا

<style type="text/css">
.video-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px; height: 0; overflow: hidden;
}
.video-container iframe,
.video-container object,
.video-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
</style>
<br />
<div class="video-container">
<iframe width="560" height="315" src="https://www.youtube.com/embed/i2Yh_oBJ8Ds?list=PLdGltxXkthDTbIywOdmDPQ7oOJ6PK95dE" frameborder="0" allowfullscreen></iframe>
 

تنبيه : المرجو عدم نسخ الموضوع بدون ذكر مصدره المرفق بالرابط المباشر للموضوع الأصلي وإسم المدونة وشكرا

• تحديد المهام الرئيسية لإدارة المدونة.
• إستخدام بعض الأدوات لتنظيم الوقت.
• بعض التوصيات لزيادة الإنتاجية فى أقل وقت.
• بعض الحلول  لمشكلة ضيق وقت.

أولا: تحديد المهام الرئيسية لإدارة المدونة

1 - إنشاء محتوى جيد :

2- القراءة والبحث:

3- تحسين السيو:

4- التسويق عبر الشبكات الإجتماعية:

5- الرد على التعليقات وإستفسارات القراء:

6- تجديد المحتوى القديم:

7- صيانة المدونة:

8- متابعة إحصائيات المدونة:

أدوات تنظيم وقت المدون

جدول لتنظيم وقت المدون

 تقويم جوجل Google Calendar

توصيات ونصائح لتوفير وقت المدون وزيادة إنتاجيته:

1. يفضل إختيار أكثر الأوقات التى نكون بها على درجة كبيرة من التركيز والنشاط الذهنى للإبداع وترتيب أفكار صياغة المحتوى.
2. على العكس يمكننا إختيار الأوقات التى نكون بها على درجة أقل من التركيز للمهام التى لا تحتاج منا مجهود مثل مشاهدة الكورسات والفيديوهات المجمعة فى مفضلتك.
3. إستخدام المفكرة الورقية أو الموجودة على الهاتف لتسجيل أى فكرة تخطر ببالنا ربما نحتاجها مرة أخرى.
4. الإبتعاد عن مضيعات الوقت أثناء ساعات العمل التى نحددها مثل التلفاز ، النوم ، الفيس بوك،.....
5. الإعتماد على بعض تطبيقات الهواتف الذكية التى توفر الوقت مثل :

• تطبيق Pocket لحفظ الموضوعات لقراءتها لاحقًا فى أى مكان حتى بدون إنترنت.
• تطبيق Feedly : لمتابعة جديد المواقع المنافسة أو التى لها نفس إهتماماتك.
• تطبيق Blogger: للتدوين من خلال الهاتف فى أى وقت.

بعض الحلول لمشكلة ضيق الوقت

جدولة المشاركات:

السماح لكتاب آخرين بالكتابة بالموقع Guest Posts: 

غلق التعليقات:

تنبيه : المرجو عدم نسخ الموضوع بدون ذكر مصدره المرفق بالرابط المباشر للموضوع الأصلي وإسم المدونة وشكرا

1. شرح موقع Github

يمكن من خلال هذا الموقع إستضافة أكواد المشاريع مفتوحة المصدر وإدارتها ، وضمان الإحتفاظ بها فهو مفيد جدًا لأصحاب مدونات بلوجر التى ليس لديها ميزة الإستضافة حيث يمكن إستخدام موقع Github لرفع ملفات القوالب وأكواد الإضافات المستخدمة سواء كانت javascript or css or Html ، كما إنه يعتبر مكان جيد لمطورى تطبيقات الهواتف للإحتفاظ بمصادر برمجياتهم .

شرح الإستضافة على موقع Github

 

 

مع العلم أن الرابط المباشر بهذه الطريقة يعرض محتويات الصفحة من أكواد أما إذا أردت رابط مباشر لعرض الويب مثلا فعليك باستخدام هذه الخدمة https://rawgit.com/

بالرغم من المميزات الهائلة التى يقدمها موقع GitHub إلا أنه لا يدعم ميزة الحفاظ على الخصوصية بشكل مجانى و بالتالى عدم حجب المشروعات مغلقة المصدر، فتكون المشاريع مفتوحة المصدر متاحة للجميع ، أما إذا أردت الإستفادة من الموقع بشكل شخصى وتحافظ على خصوصية مشروعاتك فعليك بترقية حسابك إلى حساب مدفوع...... أو الإعتماد على بدائل أخرى.
إقرأ أيضًا:

الطريقة الصحيحة لكتابة أكواد CSS داخل مدونات بلوجر

 2. موقع bitbucket

3. بدائل أخرى

• SourceForge : يستخدمه الكثير من المبرمجين لإستضافة مشاريعهم
• Dropbox: يمكنه أيضًا إستضافة المواقع و المشاريع الخاصة ولكن من عيوبه أنه محدود limited bandwidth
• Gitlab : يشبه إلى حد كبير موقع Github تستخدمه العديد من الشركات الكبرى ولكنه مجانى لفترة تجريبية