شروحات: كيفية إنشاء روابط داخلية تلقائية في منشور بلوجر

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

هذا ليس حلمًا، بل ميزة يمكنك تفعيلها بخطوات بسيطة. مشكلة الربط الداخلي اليدوي تستهلك وقتًا طويلاً، وقد تنسى ربط موضوع مهم بآخر. 

شرحنا في كورس بلوجر كيفية إنشاء إيميل Gmail، ومدونة بلوجر، وكيف إضيف Meta Description، وإنشاء جدول، وكتابة مقالات حصرية، وحل مشكلة البيانات الغير المنظمة إلى أخ...

الحل يكمن في إنشاء روابط داخلية تلقائية توفر عليك الجهد وتحسن ترتيب مدونتك في محركات البحث.

ما هي الروابط الداخلية التلقائية؟

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

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

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

ما هو بلوجر؟

بلوجر هي منصة تدوين مجانية تقدمها جوجل، تتيح لأي شخص إنشاء مدونة دون الحاجة إلى خبرة تقنية عميقة. 

تتميز بسهولة الاستخدام، والتكامل المباشر مع خدمات جوجل مثل أدوات تحسين محركات البحث وإعلانات أدسنس. 

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

أهمية إنشاء روابط داخلية تلقائية في منشور بلوجر

الروابط الداخلية ليست مجرد إضافة جميلة، بل هي عنصر أساسي في تحسين ترتيب مدونتك. 

عندما تربط مقالًا بآخر، فإنك تساعد محركات البحث على فهم بنية موقعك، وتوزيع قوة الروابط بين الصفحات. 

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

خطوات عمل روابط داخلية تلقائية في منشور بلوجر

الطريقة الأولى: استخدام كود جافا سكريبت مخصص:

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

1. اذهب إلى لوحة تحكم بلوجر، ثم اختر القالب، ثم تحرير HTML.

2. ابحث عن الوسم </head> باستخدام Ctrl+F.

3. أضف الكود التالي قبل الوسم مباشرة:

<script type='text/javascript'>

// Keyword and Link List

var links = [

{ keyword: "SEO", url: "https://yourblog.com/seo-tips" },

{ keyword: "Making Money from Blogger", url: "https://yourblog.com/blogger-money" },

{ keyword: "Content Writing", url: "https://yourblog.com/content-writing" }

];

/ // Search and Replace Function

function addInternalLinks() {

var posts = document.querySelectorAll('.post-body');

posts.forEach(function(post) { 

links.forEach(function(link) { 

var regex = new RegExp('\\b' + link.keyword + '\\b', 'gi'); 

post.innerHTML = post.innerHTML.replace(regex, '<a href="' + link.url + '">' + link.keyword + '</a>'); 

}); 

});

}

window.onload = addInternalLinks;

</script>

4. عدّل الروابط والكلمات لتناسب محتوى مدونتك.

5. احفظ القالب واختبر النتيجة بفتح أي مقال.

روابط داخلية يدوية أوتوماتيكية VS

الآن السؤال هو الطريقة التي ستستخدمها لإعداد الروابط الداخلية على موقع Blogger ، آليًا أم يدويًا؟ أوصي بضبط الارتباط الداخلي تلقائيًا ، فهذا سيوفر لك الوقت.

كيفية إنشاء روابط داخلية تلقائية في Blogger Post؟

يمكنك أتمتة الروابط الداخلية في مدونتك بسهولة؛ فمن خلال تعديل مظهر الموقع مرة واحدة وإدراج رمزين برمجين، سيتم إنشاء الروابط تلقائياً في جميع منشوراتك الحالية والمستقبلية. اتبع الخطوتين التاليتين بعناية:

الخطوة الأولى:

1. حمّل الكود أعلاه وانسخ الرمز الأول.
2. انتقل إلى لوحة تحكم المدونة.
3. اختر "المظهر" (Theme).
4. اضغط على "تعديل HTML" ضمن خيارات التخصيص.
5. ابحث عن وسم `` وألصق الرمز الأول أسفله مباشرة.

الخطوة الثانية:

1. ابحث عن وسم ``.
2. انسخ الرمز الثاني وألصقه أسفل الوسم المذكور (يرجى قراءة الملاحظة أدناه).
3. احفظ التغييرات وقم بزيارة الموقع.

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

تركيب الإضافة:

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

<b:if cond='data:view.isPost'>

<script type='text/javascript'>

//<![CDATA[

// Multi Related Post

(function() {var jumlah = 2;let post = document['querySelectorAll']('.post-body br, .post-body p'),a = jumlah + 1,b = post['length'] / a;c = Array['from']({length: jumlah}, (redfx, blufx) => blufx + 1);

for (let d = 0; d < c['length']; d++) {let e = c[d],f = parseInt((b * e)),g = document['createElement']('div');g['className'] = 'arldzgnMultiRelated';if (post[f]['nodeName'] == 'P') {post[f]['parentNode']['insertBefore'](g, post[f])} else {post[f]['parentNode']['insertBefore'](g, post[f]['nextSibling'])}}})();

var relatedTitles = new Array();var relatedTitlesNum = 0;var relatedUrls = new Array();function related_results_labels(nerdfx) {for (var desfx = 0; desfx < nerdfx['feed']['entry']['length']; desfx++) {var nefx = nerdfx['feed']['entry'][desfx];relatedTitles[relatedTitlesNum] = nefx['title']['$t'];for (var ciafx = 0; ciafx < nefx['link']['length']; ciafx++) {if (nefx['link'][ciafx]['rel'] == 'alternate') {relatedUrls[relatedTitlesNum] = nefx['link'][ciafx]['href'];relatedTitlesNum++;break}}}}

function removeRelatedDuplicates() {var viefx = new Array(0);var labfx = new Array(0);for (var desfx = 0; desfx < relatedUrls['length']; desfx++) {if (!contains(viefx, relatedUrls[desfx])) {viefx['length'] += 1;viefx[viefx['length'] - 1] = relatedUrls[desfx];labfx['length'] += 1;labfx[labfx['length'] - 1] = relatedTitles[desfx]}};relatedTitles = labfx;relatedUrls = viefx}

function contains(yelfx, yufx) {for (var grefx = 0; grefx < yelfx['length']; grefx++) {if (yelfx[grefx] == yufx) {return true}};return false}

//]]>

</script>

  <b:if cond='data:post.labels'>

    <b:loop values='data:post.labels' var='label'>

      <b:if cond='data:view.isPost'>

        <script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=100&quot;'/>

      </b:if>

    </b:loop>

  </b:if>

<script type='text/javascript'>

//<![CDATA[

(function arldzgnMultiRelated() {var text = 'اقرأ ايضاً :';let r = Math['floor']((relatedTitles['length'] - 1) * Math['random']());let i = 0;let jumlah = document['querySelectorAll']('.arldzgnMultiRelated');while (i < relatedTitles['length'] && i < jumlah['length']) {for (let a = 0; a < jumlah['length']; a++) {jumlah[a]['innerHTML'] = '<span class="content"><span class="text">' + text + '</span><a href="' + relatedUrls[r] + '" title="' + relatedTitles[r] + '">' + relatedTitles[r] + '</a></span><span class="icon"></span>';if (r < relatedTitles['length'] - 1) {r++} else {r = 0};i++}}})();

//]]>

</script>

</b:if>

يُرجى تعديل القيمة "2" في المتغير "jumlah" لتحديد عدد المقالات المقترحة في قسم "اقرأ أيضاً" لكل موضوع. 

لقد اخترنا القيمة "2" لكونها مناسبة، ولكن يمكنك تعديلها حسب رغبتك.

2- تركيب شكل التصميم: 

كما ذكرنا سابقاً، توفر الإضافة أشكالاً متعددة، ويمكنك اختيار ما يناسب مدونتك.

1. للتركيب، انتقل إلى "المظهر".

2. ثم "تحرير HTML".

3. وابحث عن وسم ، وضع كود الشكل المختار فوقه مباشرة (يُسمح بوضع كود شكل واحد فقط).

الشكل الاول:

سكريبت الشكل الاول

<b:if cond='data:blog.pageType != &quot;index&quot;'>

<style type='text/css'>

/* Multi Related Post */

.arldzgnMultiRelated{background-color:#2a2a2a;color:#fff;margin:15px auto;display:-moz-box;display:-ms-flexbox;display:flex;flex-wrap:nowrap;justify-content:space-between;overflow:hidden;transition:all .3s}

.arldzgnMultiRelated:hover{background-color:#222}

.arldzgnMultiRelated .content{padding:12px 15px}

.arldzgnMultiRelated .content .text{margin-right:5px}

.arldzgnMultiRelated .content a{color:#fff;text-decoration:none;line-height:1.5em}

.arldzgnMultiRelated .content a:hover{text-decoration:underline}

.arldzgnMultiRelated .icon{height:auto;min-width:55px;background:#f44336 url(&quot;data:image/svg+xml,%3Csvg viewBox=&#39;0 0 24 24&#39; xmlns=&#39;http://www.w3.org/2000/svg&#39;%3E%3Cpath d=&#39;M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z&#39; fill=&#39;%23fff&#39;/%3E%3C/svg%3E&quot;) center / 40px no-repeat;transition:all .3s}

</style>

</b:if>

الشكل التاني:

سكريبت الشكل التاني:

<b:if cond='data:blog.pageType != &quot;index&quot;'>

<style type='text/css'>

/* Multi Related Post */

.arldzgnMultiRelated{color:#0984e3;margin:15px auto;display:-moz-box;display:-ms-flexbox;display:flex;flex-wrap:nowrap;justify-content:space-between;border:1px solid rgba(0,0,0,0.2);transition:all .3s}

.arldzgnMultiRelated .content{padding:12px 15px}

.arldzgnMultiRelated .content .text{margin-right:5px}

.arldzgnMultiRelated .content a{color:#000;text-decoration:none;line-height:1.5em}

.arldzgnMultiRelated .icon{height:auto;min-width:55px;background:transparent url(&quot;data:image/svg+xml,%3Csvg viewBox=&#39;0 0 24 24&#39; xmlns=&#39;http://www.w3.org/2000/svg&#39;%3E%3Cpath d=&#39;M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z&#39; fill=&#39;%23000&#39;/%3E%3C/svg%3E&quot;) center / 40px no-repeat;border-left:1px solid rgba(0,0,0,0.2);transition:all .3s}

.arldzgnMultiRelated:hover .icon,.arldzgnMultiRelated .content a:hover{color:#0984e3}

</style>

</b:if>

الشكل بالتالت:

سكريبت الشكل التالت:

<b:if cond='data:blog.pageType != &quot;index&quot;'>

<style type='text/css'>

/* Multi Related Post */

.arldzgnMultiRelated{background-color:#eaeaea;color:#000;margin:15px auto;display:-moz-box;display:-ms-flexbox;display:flex;flex-wrap:nowrap;justify-content:space-between;transition:all .3s}

.arldzgnMultiRelated:hover{background-color:#e3e3e3}

.arldzgnMultiRelated .content{padding:12px 15px}

.arldzgnMultiRelated .content .text{margin-right:5px}

.arldzgnMultiRelated .content a{color:#000;text-decoration:none;line-height:1.5em}

.arldzgnMultiRelated .icon{height:auto;min-width:55px;background:#f5f5f5 url(&quot;data:image/svg+xml,%3Csvg viewBox=&#39;0 0 24 24&#39; xmlns=&#39;http://www.w3.org/2000/svg&#39;%3E%3Cpath d=&#39;M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z&#39; fill=&#39;%23888&#39;/%3E%3C/svg%3E&quot;) center / 40px no-repeat;transition:all .3s}

.arldzgnMultiRelated:hover .icon{background-color:#f9f9f9}

</style>

الشكل الرابع:

سكريبت الشكل الرابع:

<b:if cond='data:blog.pageType != &quot;index&quot;'>

<style type='text/css'>

/* Multi Related Post */

.arldzgnMultiRelated{background-color:#c0392b;color:#fff;margin:15px auto;display:-moz-box;display:-ms-flexbox;display:flex;flex-wrap:nowrap;justify-content:space-between;transition:all .3s}

.arldzgnMultiRelated:hover{background-color:#e74c3c}

.arldzgnMultiRelated .content{padding:12px 15px}

.arldzgnMultiRelated .content .text{margin-right:5px}

.arldzgnMultiRelated .content a{color:#fff;text-decoration:none;line-height:1.5em}

.arldzgnMultiRelated .icon{height:auto;min-width:55px;background:rgba(255,255,255,.25) url(&quot;data:image/svg+xml,%3Csvg viewBox=&#39;0 0 24 24&#39; xmlns=&#39;http://www.w3.org/2000/svg&#39;%3E%3Cpath d=&#39;M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z&#39; fill=&#39;%23fff&#39;/%3E%3C/svg%3E&quot;) center / 40px no-repeat;transition:all .3s}

.arldzgnMultiRelated:hover .icon{background-color:rgba(255,255,255,.15)}

</style>

</b:if>

الشكل الخامس:

سكريبت الشكل الخامس:

<b:if cond='data:blog.pageType != &quot;index&quot;'>

<style type='text/css'>

/* Multi Related Post */

.arldzgnMultiRelated{background:#ffeaa7;color:#000;margin:15px auto;display:-moz-box;display:-ms-flexbox;display:flex;flex-wrap:nowrap;justify-content:space-between;border-left:4px solid #d63031;transition:all .3s}

.arldzgnMultiRelated .content .text{margin-right:5px}

.arldzgnMultiRelated .content{padding:10px 15px}

.arldzgnMultiRelated .content a{color:#000;text-decoration:none;line-height:1.5em}

.arldzgnMultiRelated .content a:hover{color:#111;text-decoration:underline}

</style>

</b:if>

هنا نكون قد انتهينا من تركيب الاضافة نتمنى منك متابعتنا والتعليق في المدونة  وفي حالت كان هناك مشكلة او لم تعمل لديك الاضافة يمكنك وضع تعليق مصحوب برابط مدونتك

فوائد الروابط الداخلية التلقائية

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

إيجابيات وسلبيات

بالنسبة إيجابيات: 

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

بالنسبة لسلبيات:

1. خطر إضافة روابط غير مناسبة إذا لم تُحدد الكلمات المفتاحية بدقة.
2. احتمالية ظهور روابط مكررة في نفس المقال مما يزعج القارئ.
3. بعض الطرق التلقائية قد تبطئ سرعة تحميل الصفحة إذا كان الكود غير محسّن.

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

› كورس حلقات : بلوجر
› رابط تسجيل: Blogger