文章内容
2017/7/21 17:09:37,作 者: 黄兵
开发人员可以知道的SEO
SEO是啥就不啰嗦了，
需要补充下搜索引擎的概念：它是通过发送Get请求抓取HTML静态页面内容的技术，就如日常生活中通过Google、百度等搜索网页的技术
搜索引擎特性：
1.只发送Get请求
2.不执行页面中的任何Js代码（所以js动态产生的页面内容以及js方法内部内容都是不会被搜索引擎抓取的）
以下代码就为你剖析哪些内容可以被搜索引擎抓取哪些不能
<% @ Page Language="C#" AutoEventWireup="true" CodeBehind="Demo1.aspx.cs" Inherits ="SEODemo.Demo1" %> <! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns ="http://www.w3.org/1999/xhtml"> <head runat ="server"> <title ></ title> <script type="text/javascript"> window.onload = function () { var names = document.getElementById("divJs"); divJs.innerHTML = "<a href='pizi.html'>5.蜘蛛只分析静态的HTML内容 不会执行JS</a>"; } </script> </head> <body> <form id="form1" runat="server"> <div> <a href ="pizi.html">1.静态a链接 </ a> <!--1.pizi.html内容页 可以被搜索引擎抓取--> <a href ="javascript:window.location.href='yimao.html'"> 2.Js跳转链接</a ><!--2.yimao.html内容页 不可以被抓取--> <asp: Button ID ="Button1" runat ="server" Text ="3.后台Redirect链接" OnClick ="Button1_Click" /> <!--3.后台跳转内容页 不可以被抓取--> <asp:LinkButton LinkButton ID ="LinkButton1" runat ="server"> 4.LinkButton会被解释为 执行Js脚本的a标签 向服务端发送跳转请求 不会被抓取 </asp:LinkButton> <!--LinkButton控件生成的页面Html代码：<a id="LinkButton1" href="javascript:__doPostBack('LinkButton1','')">--> </div > <div id="divJs"> 5.Js操作Dom树 添加的a链接是不会出现在页面源代码中 所以是不会被引擎抓取的 </div> <asp:Label ID ="Label1" runat ="server" Text ="Label"></asp:Label> body内静态文本可以被搜索引擎抓取 </form> </body> </html>
后台
using System; namespace SEODemo { public partial class Demo1 : System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) { Label1.Text = "7.页面加载时label被解释为 span标签 成为body内静态文本 是可以被搜索引擎抓取的"; } protected void Button1_Click(object sender, EventArgs e) { Response.Redirect("piziyimao.html");//3.动态跳转的链接 搜索引擎抓取不到 } } }
归纳：
静态a链接href指定页面的内容、后台Write到前台的内容、Load时指定服务端控件Text的内容 是可以被蜘蛛引擎抓取的
Js脚本动态产生的a链接、a链接中href指定为js脚本、LinkButton链接的内容页、服务端Redirect的内容页都不会被搜索引擎抓取
如果以上归纳比较混乱，你可以记住一点：搜索引擎就是禁用了JS且只发送Get请求的WebClient。获得的静态页面除去所有Js脚本就是搜索引擎抓到的内容
综合以上认知，以下通过对比的方式为您展示SEO的运用
普通不利于搜索引擎抓取的页面代码示例 SeoBefore.html
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <script src="jquery-1.4.2.js" type="text/javascript"></script> <script type="text/javascript"> var loaded = function(data) { $("#divContent").text(data); }; var ShowMsg = function(id) { $.get("Test.ashx", { "id": id }, loaded); }; </script> </head> <body> <div id="divContent"> </div> <a href="javascript:void(0)" onclick="ShowMsg(1);">1</a> <a href="javascript:void(0)" onclick="ShowMsg(2);">2</a> <a href="javascript:void(0)" onclick="ShowMsg(3);">3</a> </body> </html>
页面放置三个连接实现Ajax请求 但是页面存在狠大的缺点
1、如果浏览器禁用js脚本那三个a连接事件无法触发(虽然禁用js很多网站几乎不能访问)
2、a标签中使用Js脚本导致搜索引擎不会抓取test.ashx页面内容
Test.ashx代码如下内容只为演示无任何意义
using System; using System.Web; namespace SEODemo { public class Test : IHttpHandler { public void ProcessRequest(HttpContext context) { context.Response.ContentType = "text/plain"; int id = Convert.ToInt32(context.Request.QueryString["id"]); switch(id) { case 1: context.Response.Write("1"); break; case 2: context.Response.Write("2"); break; case 3: context.Response.Write("3"); break; default: break; } } public bool IsReusable { get { return false; } } } }
以下针对SeoBefore.html页面进行Seo的优化代码如下：
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <script src="jquery-1.4.2.js" type="text/javascript"></script> <script type="text/javascript"> var loaded = function(data) { $("#divContent").text(data); }; var ShowMsg = function(id) { $.get("Test.ashx", { "id": id }, loaded); }; </script> </head> <body> <div id="divContent"> </div> <a href="Test.ashx?id=1" onclick="ShowMsg(1); return false;">1</a> <a href="Test.ashx?id=2" onclick="ShowMsg(2); return false;">2</a> <a href="Test.ashx?id=3" onclick="ShowMsg(3); return false;">3</a> </body> </html>
上述代码即避免了客户端禁用Js的情况，同时搜索引擎可以抓取Test.ashx页面内容
本文转载自：痞子一毛 - 开发人员可以知道的SEO
评论列表