Suppose you need to move from one page to another. There are many ways below. How do you choose? Can you clearly explain why?
<%--Representation form of link--%>
<asp:HyperLink ID="HyperLink1" runat="server" NavigateUrl="~/Default2.aspx">HyperLink</asp:HyperLink>
<asp:LinkButton ID="LinkButton1" runat="server" PostBackUrl="~/Default2.aspx">LinkButton</asp:LinkButton>
<%--For aesthetic reasons, many websites will use buttons to replace links--%>
<asp:Button ID="Button1" runat="server" Text="Button" PostBackUrl="~/Default2.aspx" />
<%--Using pictures as links, there are two options--%>
<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>
If you are still a little confused, I suggest you check the source code after they generate html.
<a id="HyperLink1" href="Default2.aspx">HyperLink</a>
<%--After HyperLink is parsed into Html, it corresponds to a simple hyperlink, and href points to the page to be jumped--%>
<a id="LinkButton1" href="javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions("LinkButton1", "", false, "", "Default2.aspx", false, true))">LinkButton< /a>
<%--Although LinkButton1 is also an anchor tag, it actually uses JavaScript to jump--%>
<input type="submit" name="Button1" value="Button" onclick="javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions("Button1", "", false, "", "Default2.aspx" , false, false))" id="Button1" />
<%--button is parsed into an input element of type="submit", and the page is also jumped through JavaScript--%>
<input type="image" name="ImageButton1" id="ImageButton1" src="upup.gif" onclick="javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions("ImageButton1", "", false, "" , "Default2.aspx", false, false))" style="border-width:0px;" />
<%--ImageButton is parsed into an input element of type="image", and the page is also jumped through JavaScript--%>
<a id="HyperLink2" href="Default2.aspx"><img src="upup.gif" style="border-width:0px;" /></a>
<%--After assigning a value to the ImageUrl attribute of HyperLink, after parsing it into Html, it corresponds to an img "clipped" in a hyperlink, but the href still points to the page to be jumped--%>
What's the use of knowing this?
It has many uses, but we are only talking about SEO today.
With the current search engine technology, JavaScript (including AJAX, of course), form elements (such as input), Flash and Image cannot (or are difficult to) read. "Spiders" tend to read simple html formatted text. So, from an SEO perspective:
1. Do not use JavaScript or forms for page jump links. An ordinary <a></a> can also accomplish the same function. Generally speaking, any navigation that is not accessible via the standard anchor identifier <a></a> will not be retrieved by spiders. If we are originally using client-side elements, it should be easier for us to notice this; but when using encapsulated server-side controls, we may be careless.
2. Note that there is no text content in the UpdatePanel. We can do a simple test:
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:Label runat="server" ID="lbl" ></asp:Label>
<asp:Button ID="Button1" runat="server" Text="Button" onclick="Button1_Click" />
</ContentTemplate>
</asp:UpdatePanel>
protected void Button1_Click(object sender, EventArgs e)
{
this.lbl.Text = "I was generated by UpdatePanel, so you can't see me!";
}
The source code part after parsing into Html:
<div id="UpdatePanel1">
<span id="lbl"></span>
<input type="submit" name="Button1" value="Button" id="Submit1" />
</div>
This is easy to understand, because UpdatePanel also generates page content through the JavaScript function of the page. Looking at the source code, we can see the relevant JavaScript functions, but not the content generated by the functions. As for search engine spiders, they only look at the source code.
3. When we need to use a pop-up page, the usual approach is:
<a href="#" onclick="window.open('popup.html','common','height=600,weight=800');">common popup</a>
According to what we explained above, this way of writing is undoubtedly detrimental to SEO. So we should use the following code, which ensures the effect of the pop-up window and is SEO friendly. And even if the customer's browser does not support or disables JavaScript, the page can still jump smoothly.
<a href="popup.html" onclick="window.open(this.href,'seo','height=600,weight=800');return false;" target="_blank">seo popup</a >
<%--Note: The return false statement here cannot be omitted. --%>
4. When we want to use a special font (often column titles and the like), we often use a Chinese character picture instead. This is also a troublesome thing, because as a title, its content is often a very important keyword. If you use an image, the spider cannot read it. One possible solution is sIFR, but I'm not very familiar with this; after searching online, it doesn't seem to be applicable to Chinese characters.
For pictures, our commonly used SEO method is to indicate title and alt, such as
<img alt="ASP.NET Search Engine Optimization" title="Some SEO techniques that should be noted when developing websites using ASP.NET technology" src="seo.gif" />
However, this is also an "invisible page element", and the specific effect is difficult to accurately measure. But something is better than nothing!
5. Some other notes:
5.1 Combine the semantics of html tags with css. Different from "span" and "div", "h1" means title, "b" means emphasis, "ul" and "li" mean list... These semantic tags Can give search engines clearer instructions;
5.3 Place important content at the top of the html page (referring to the source code, not the results displayed by the browser)
5.5 Place large sections of JavaScript at the bottom of the page or in separate js files;
5.2 It is best not to use frame layout;
5.3 A large number of VIEWSTATE may cause interference to the "Spider";
5.5 Keep in mind: With the current search engine technology, JavaScript (including AJAX, of course), form elements (such as input), Flash and Image cannot (or are difficult to) read.