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

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

ما هو رابط الارتباط؟

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

مثال على ذلك:

<h2 id="section1">القسم 1: ما هو رابط الربط؟</h2>

<a href="#section1">انتقل إلى القسم 1</a>

في هذا المثال، عندما ينقر المستخدمون على "الانتقال إلى القسم 1"، يتم نقلهم مباشرةً إلى جزء الصفحة حيث العنوان "القسم 1: ما هو رابط الارتباط؟" يقع.

فوائد استخدام الروابط المرساة:

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

هيكلية الروابط المرساة

يتألف رابط الارتباط من جزأين أساسيين: رابط الارتباط المعرف (المعرف) و الرابط.

1. المعرّف (المعرّف)

المعرف هو معرّف فريد تضيفه إلى عنصر HTML الذي تريد الارتباط به (مثل العنوان أو فقرة). على سبيل المثال

<h2 <mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-vivid-cyan-blue-color">معرف = "القسم 1"</mark>&gt;القسم 1: تحسين محركات البحث التقني</h2>

المعرف= "القسم 1" يجعل هذا العنوان قابلاً للتعريف على أنه نقطة الارتكاز.

2. الرابط

الجزء القابل للنقر الذي يوجه المستخدم إلى المعرف. يتم إنشاؤه باستخدام الوسم # متبوعًا ب بطاقة الهوية. على سبيل المثال:

انتقل إلى القسم 1

إن href=" #section1″ يخبر المتصفح بالتمرير لأسفل إلى العنصر الذي يحمل المعرف section1.

مثال في العمل:

إذا كنت تكتب مقالاً مفصلاً عن تحسين محركات البحث، يمكنك إضافة روابط ربط لكل قسم رئيسي:

<h2 id="on-page-seo">تحسين محركات البحث على الصفحة</h2>
<h2 id="off-page-seo">تحسين محركات البحث خارج الصفحة</h2>
<h2 id="technical-seo">تحسين محركات البحث التقني</h2>

في الجزء العلوي من مقالتك، يمكنك بعد ذلك إضافة جدول محتويات يرتبط بهذه الأقسام:

<ul>
   <li><a href="#on-page-seo">تحسين محركات البحث على الصفحة</a></li>
   <li><a href="#off-page-seo">تحسين محركات البحث خارج الصفحة</a></li>
   <li><a href="#technical-seo">تحسين محركات البحث التقني</a></li>
</ul>

المستخدمون الذين ينقرون على "تحسين محركات البحث على الصفحة" ستنتقل مباشرةً إلى ذلك القسم.

لماذا تستخدم الروابط المرساة؟

1. تجربة المستخدم المحسّنة

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

2. تنقل أفضل على المواقع الإلكترونية ذات الصفحة الواحدة

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

3. تحسين تحسين محركات البحث

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

4. زيادة تفاعل المستخدمين

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

5. إمكانية الوصول

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

كيفية إنشاء روابط الارتباط في ووردبريس

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

إنشاء روابط الارتباط في المحرر الكلاسيكي

إذا كنت تستخدم محرر كلاسيكي， يجب أن تقوم بتحرير HTML لإضافة روابط الربط. إليك الطريقة:

الخطوة 1: أضف معرّفًا فريدًا إلى العنصر المستهدف

1. افتح المقالة أو الصفحة التي تريد تحريرها في المحرِّر التقليدي.
2. قم بالتبديل إلى "النص" لتحرير HTML.

3. ابحث عن العنصر (مثل عنوان أو فقرة) الذي تريد الارتباط به وأضف معرّفًا فريدًا. على سبيل المثال:

<h2 معرف = "القسم 1">القسم 1: ما هو رابط الارتباط؟ 

الخطوة 2: إنشاء رابط الارتباط

1. قم بالتبديل مرة أخرى إلى "مرئي" الوضع.

2. في الجزء العلوي من مشاركتك (أو أينما تريد الرابط)، قم بتمييز النص الذي تريد جعله قابلاً للنقر.

3. انقر على "رابط الإدراج/التحرير" في شريط الأدوات.
4. في حقل عنوان URL، أدخل # القسم 1 (المعرف الذي قمت بتعيينه مسبقاً).

<a href="#section1">انتقل إلى القسم 1</a>

الخطوة 3: الحفظ والمعاينة

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

إنشاء روابط الارتباط في محرر Gutenberg

Gutenberg هو محرِّر المكوِّنات في ووردبريس، ويقدِّم طريقة أكثر انسيابية لإنشاء روابط الربط.

الخطوة 1: إضافة معرّف إلى مكوِّن

1. افتح المقالة أو الصفحة التي تريد تحريرها في Gutenberg.
2. حدِّد المكوِّن الذي تريد إضافة الرابط إليه (مثل مكوِّن العنوان).
3. في الشريط الجانبي الأيمن، تحت "متقدم"،" ابحث عن "HTML ANCHOR" الحقل.

4. أدخل المعرف الفريد الخاص بك (على سبيل المثال، القسم2).

الخطوة 2: إضافة رابط الربط

1. ارجع إلى أعلى مشاركتك أو أينما تريد إضافة الرابط.
2. قم بتمييز النص الذي تريد جعله قابلاً للنقر وانقر على أيقونة الرابط في شريط الأدوات.

3. في حقل عنوان URL، اكتب #section2.

4. اضغط على "Enter" لإنشاء الرابط.

الخطوة 3: الحفظ والاختبار

احفظ مشاركتك وقم بمعاينتها. عند النقر عليه، يجب أن ينتقل الرابط إلى القسم الذي يحتوي على معرّف الارتساء.

إنشاء روابط ارتباط في WPBakery منشئ الصفحات

مخبز WPBakery هي أداة إنشاء صفحات السحب والإفلات الشهيرة لـ WordPress. يمكنك إنشاء روابط ربط بسهولة باستخدام هذه الأداة.

الخطوة 1: إضافة معرّف فريد إلى العنصر

1. افتح الصفحة أو المقالة في WPBakery Page Builder.
2. انقر على العنصر الذي تريد الارتباط به وانتقل إلى إعداداته.

3. في الإعدادات، ابحث عن "معرّف العنصر" وأدخل معرّفًا فريدًا (على سبيل المثال، القسم 1).

الخطوة 2: إنشاء رابط الارتباط

1. حدد النص أو الزر الذي تريد الربط منه.
2. افتح إعدادات الرابط وأدخل #القسم1 كعنوان URL.

2. احفظ التغييرات.

الخطوة 3: الحفظ والمعاينة

بعد حفظ عملك، قم بمعاينة الصفحة لاختبار الرابط.

أفضل الممارسات لاستخدام الروابط المرساة

لتحقيق أقصى استفادة من روابط الربط، اتبع أفضل الممارسات التالية:

1. ضمان المعرفات الفريدة

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

2. تجنب الأحرف الخاصة

يجب ألا تحتوي المعرفات على مسافات أو علامات ترقيم أو أحرف خاصة. التزم بالأحرف والأرقام والواصلات. على سبيل المثال، لا بأس بالقسم 1، لكن القسم 1 أو القسم #1 قد يسبب مشاكل.

3. استخدام نص ارتباط واضح

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

4. اختبر روابطك

اختبر دائمًا روابط الربط الخاصة بك قبل النشر. تأكد من تمرير كل رابط إلى القسم الصحيح. يمكن لأدوات مطور المتصفح الخاص بك المساعدة في تشخيص أي مشاكل.

5. تجنب عناوين URL العارية

تجنب عرض عناوين URL للرابط الخام في النص الخاص بك (مثل https://example.com/#section1). بدلاً من ذلك، استخدم نص رابط واضح ووصفي يوفر السياق للمستخدم.

حالات استخدام الروابط المرساة

روابط التثبيت مفيدة في العديد من السيناريوهات. إليك بعض الأمثلة الشائعة:

1. جدول المحتويات

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

2. مواقع الويب ذات الصفحة الواحدة

تعد روابط الارتباط طريقة رائعة لإنشاء قوائم تنقل على المواقع الإلكترونية ذات الصفحة الواحدة. سيؤدي النقر على عناصر القائمة مثل "نبذة عنا" أو "الخدمات" إلى تمرير المستخدم إلى تلك الأقسام في نفس الصفحة.

3. أزرار الحث على اتخاذ إجراء (CTA)

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

4. أزرار التمرير إلى الأعلى

تتيح إضافة زر "التمرير إلى الأعلى" للمستخدمين العودة بسرعة إلى أعلى الصفحة الطويلة دون التمرير يدويًا.

الأسئلة المتداولة

1. كيف تختلف روابط الربط عن الروابط العادية؟

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

2. هل تساعد روابط الربط في تحسين محركات البحث؟

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

3. كيف يمكنني اختبار روابط الارتباط؟

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

4. هل هناك أي إضافات لإنشاء روابط الارتساء؟

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

الخاتمة

تعد روابط الارتباط ضرورية لتحسين تنقل المستخدم، خاصة في المحتوى الطويل والمواقع الإلكترونية ذات الصفحة الواحدة. إن السماح للمستخدمين بالانتقال مباشرةً إلى أقسام محددة يعزز من سهولة القراءة، ويعزز المشاركة، ويساهم بشكل إيجابي في تحسين محركات البحث. سواء كنتَ تستخدم المحرِّر الكلاسيكي أو Gutenberg أو WPBakery Page Builder، فإن إضافة روابط الربط عملية بسيطة يمكنها تحسين تجربة المستخدم على موقعك بشكل كبير. من خلال اتباع أفضل الممارسات - مثل استخدام معرّفات فريدة، ونصوص ربط واضحة، واختبار روابطك - يمكنك ضمان التنقل السلس وسهولة الاستخدام بشكل أفضل لزوار موقعك.