لنفترض أنك بحاجة إلى الانتقال من صفحة إلى أخرى، هناك العديد من الطرق أدناه. كيف تختار؟ هل يمكنك شرح السبب بوضوح؟
<%--نموذج تمثيل الارتباط--%>
<asp:HyperLink ID="HyperLink1" runat="server" NavigateUrl="~/Default2.aspx">HyperLink</asp:HyperLink>
<asp:LinkButton ID="LinkButton1" runat="server" PostBackUrl="~/Default2.aspx">LinkButton</asp:LinkButton>
<%--لأسباب جمالية، تستخدم العديد من مواقع الويب أزرارًا لاستبدال الروابط--%>
<asp:Button ID = "Button1" runat = "server" Text = "Button" PostBackUrl = "~/Default2.aspx" />
<%--استخدام الصور كروابط، هناك خياران--%>
<asp:ImageButton ID = "ImageButton1" runat = "server" PostBackUrl = "~/Default2.aspx" ImageUrl = "~/upup.gif" />
<asp:HyperLink ID = "HyperLink2" runat = "server" NavigateUrl = "~/Default2.aspx" ImageUrl = "~/upup.gif"></asp:HyperLink>
إذا كنت لا تزال في حيرة من أمرك، أقترح عليك التحقق من الكود المصدري بعد إنشاء HTML.
<a id="HyperLink1" href="Default2.aspx">HyperLink</a>
<%--بعد تحليل الارتباط التشعبي إلى HTML، فإنه يتوافق مع ارتباط تشعبي بسيط، ويشير href إلى الصفحة التي سيتم الانتقال إليها--%>
<a id="LinkButton1" href="javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions("LinkButton1", "", false, "", "Default2.aspx", false, true))">LinkButton< /أ>
<%--على الرغم من أن LinkButton1 هو أيضًا علامة ربط، إلا أنه يستخدم JavaScript للانتقال --%>
<input type="submit" name="Button1" value="Button" onclick="javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions("Button1", "", false, "", "Default2.aspx" ، خطأ، خطأ))" id="Button1" />
يتم تحليل الزر <%--إلى عنصر إدخال من النوع = "إرسال"، ويتم أيضًا الانتقال إلى الصفحة عبر JavaScript--%>
<input type="image" name="ImageButton1" id="ImageButton1" src="upup.gif" onclick="javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions("ImageButton1", "", false, "" ، "Default2.aspx"، خطأ، خطأ))" style="border-width:0px;" />
<%--ImageButton يتم تحليله إلى عنصر إدخال من النوع = "image"، ويتم أيضًا الانتقال إلى الصفحة عبر JavaScript--%>
<a id="HyperLink2" href="Default2.aspx"><img src="upup.gif" style="border-width:0px;" /></a>
<%--بعد تعيين قيمة لسمة ImageUrl الخاصة بالارتباط التشعبي، وبعد تحليلها إلى Html، فإنها تتوافق مع صورة img "مقطوعة" في ارتباط تشعبي، ولكن لا يزال href يشير إلى الصفحة التي سيتم القفز إليها--%>
ما فائدة معرفة هذا؟
له العديد من الاستخدامات، لكننا نتحدث اليوم فقط عن تحسين محركات البحث (SEO).
مع تقنية محرك البحث الحالية، لا يمكن قراءة جافا سكريبت (بما في ذلك AJAX بالطبع)، وعناصر النموذج (مثل الإدخال)، والفلاش والصورة (أو يصعب قراءتها). تميل "العناكب" إلى قراءة نص بسيط بتنسيق html. لذلك، من منظور تحسين محركات البحث:
1. لا تستخدم جافا سكريبت أو النماذج لروابط الانتقال السريع للصفحة، حيث يمكن لـ <a></a> العادي أيضًا إنجاز نفس الوظيفة. بشكل عام، أي تنقل لا يمكن الوصول إليه عبر معرف المرساة القياسي <a></a> لن يتم استرجاعه بواسطة العناكب. إذا كنا في الأصل نستخدم عناصر من جانب العميل، فسيكون من الأسهل علينا ملاحظة ذلك، ولكن عند استخدام عناصر التحكم المغلفة من جانب الخادم، فقد نكون مهملين.
2. لاحظ أنه لا يوجد محتوى نصي في UpdatePanel. يمكننا إجراء اختبار بسيط:
<asp:ScriptManager ID = "ScriptManager1" runat = "الخادم">
</asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<قالب المحتوى>
<asp:Label runat="server" ID="lbl" </asp:Label>
<asp:Button ID = "Button1" runat = "server" Text = "Button" onclick = "Button1_Click" />
</ContentTemplate>
</asp:UpdatePanel>
باطلة محمية Button1_Click(مرسل الكائن، EventArgs e)
{
this.lbl.Text = "لقد تم إنشاؤه بواسطة UpdatePanel، لذا لا يمكنك رؤيتي!";
}
جزء الكود المصدري بعد التحليل إلى Html:
<div id="UpdatePanel1">
<span id="lbl"></span>
<نوع الإدخال = "إرسال" الاسم = "زر 1" القيمة = "زر" معرف = "إرسال 1" />
</div>
من السهل فهم ذلك، لأن UpdatePanel يقوم أيضًا بإنشاء محتوى الصفحة من خلال وظيفة JavaScript الخاصة بالصفحة. بالنظر إلى الكود المصدري، يمكننا رؤية وظائف JavaScript ذات الصلة، ولكن ليس المحتوى الذي تم إنشاؤه بواسطة الوظائف. أما عناكب محركات البحث فهي تنظر فقط إلى الكود المصدري.
3. عندما نحتاج إلى استخدام صفحة منبثقة، فإن النهج المعتاد هو:
<a href="#" onclick="window.open('popup.html','common','height=600,weight=800');">الإطار المنبثق الشائع</a>
وبحسب ما أوضحناه أعلاه، فإن طريقة الكتابة هذه بلا شك تضر بـ SEO. لذا يجب علينا استخدام الكود التالي، والذي يضمن تأثير النافذة المنبثقة ويكون صديقًا لمحركات البحث (SEO). وحتى إذا كان متصفح العميل لا يدعم JavaScript أو يعطله، فلا يزال بإمكان الصفحة التنقل بسلاسة.
<a href="popup.html" onclick="window.open(this.href,'seo','height=600,weight=800');return false;" target="_blank">نافذة تحسين محركات البحث</a >
<%--ملاحظة: لا يمكن حذف عبارة الإرجاع الخاطئة هنا. --%>
4. عندما نريد استخدام خط خاص (غالبًا عناوين الأعمدة وما شابه ذلك)، غالبًا ما نستخدم صورة ذات أحرف صينية بدلاً من ذلك. وهذا أيضًا أمر مزعج، لأنه كعنوان، غالبًا ما يكون محتواه كلمة رئيسية مهمة جدًا إذا كنت تستخدم صورة، فلن يتمكن العنكبوت من قراءتها. أحد الحلول الممكنة هو sIFR، لكني لست على دراية بهذا بعد البحث عبر الإنترنت، ولا يبدو أنه قابل للتطبيق على الأحرف الصينية.
بالنسبة للصور، فإن طريقة تحسين محركات البحث (SEO) شائعة الاستخدام لدينا هي الإشارة إلى العنوان والبديل، مثل
<img alt="ASP.NET Search Engine Optimization" title="بعض تقنيات تحسين محركات البحث التي يجب مراعاتها عند تطوير مواقع الويب باستخدام تقنية ASP.NET" src="seo.gif" />
ومع ذلك، يعد هذا أيضًا "عنصر صفحة غير مرئي"، ومن الصعب قياس التأثير المحدد بدقة. لكن شيء أفضل من لا شيء!
5. بعض الملاحظات الأخرى:
5.1 اجمع بين دلالات علامات html وcss. تختلف عن "span" و"div"، حيث تعني "h1" العنوان، و"b" تعني التركيز، و"ul" و"li" تعني القائمة... هذه العلامات الدلالية يمكن أن توفر البحث. تعليمات أوضح للمحركات؛
5.3 ضع المحتوى المهم في أعلى صفحة html (بالإشارة إلى كود المصدر، وليس النتائج التي يعرضها المتصفح)
5.5 ضع أقسامًا كبيرة من JavaScript في أسفل الصفحة أو في ملفات js منفصلة؛
5.2 من الأفضل عدم استخدام تخطيط الإطار؛
5.3 قد يتسبب عدد كبير من VIEWSTATE في حدوث تداخل مع "Spider"؛
5.5 تذكر: مع تقنية محرك البحث الحالية، لا يمكن قراءة JavaScript (بما في ذلك AJAX بالطبع) وعناصر النموذج (مثل الإدخال) وFlash وImage (أو يصعب قراءتها).