搜索引擎优化高级编程(我会步骤的具体含义-我会用例子来讲解以上这三个)

　　搜索引擎优化高级编程(我会步骤的具体含义-我会用例子来讲解以上这三个)

　　下面我将通过一个例子来解释上述三个步骤的具体含义。我将在 PDC209 继续我的“食物浏览器”演示。您可能想看看我之前的演示（PDC09 演讲：使用 Silverlight 4、RIA 服务和 Visual Studio 2010) 构建惊人的业务应用程序）以了解一些背景知识，然后再开始以下内容。

　　下载完整的示例。

　　第 1 步：建立指向重要页面的深层链接

　　对于您 网站 上的任何内容，如果您希望搜索引擎抓取它，您必须为该内容提供一个唯一的 URL。例如，如果我想在 Bing（或 Google，或其他）上搜索“Country Fried Steak”，并看到我的 网站 页面上有很多 Country Fried steaks 的图片，那么我需要为此提供一个 Url页面将您带到此页面。这个 Url 不够好，我需要提供一个类似 /foodieExplorer.aspx?food=CountryFriedsteak 的 Url。请注意，使用这种格式的 URL 还有许多其他好处，例如用户可以在 Twitter 上传播信息、通过电子邮件或即时通讯程序讨论内容。

　　幸运的是，Silverlight 的导航功能使实现内容的深层链接变得非常容易。让我们看看它是如何完成的。

　　

　　我们需要做的第一件事是提供一个 Url 来唯一标识一个特定的餐厅，或者一个特定的餐厅加上一个特定的美食。出于 SEO 或用户友好的目的，我们希望 Url 的格式是这样的，这意味着餐厅 ID=25，食物 ID=4。为此，我们需要在 web 项目的 global.aspx 文件中定义导航路径（Routes）。

　　public class Global : HttpApplication { void Application_Start(object sender, EventArgs e) { RegisterRoutes(RouteTable.Routes); } void RegisterRoutes(RouteCollection routes) { routes.MapPageRoute( "deepLinkRouteFull", "restaurant/{restaurantId}/plate/{plateId}", "~/default.aspx", false, new RouteValueDictionary { { "restaurant", "-1" }, { "plate", "-1" } }); routes.MapPageRoute( "deepLinkRoute", "restaurant/{restaurantId}", "~/default.aspx", false, new RouteValueDictionary { { "restaurant", "-1" } });

　　在上面的代码中，我们定义了深度链接的Url模板，它支持在Url中添加餐厅ID（restaurantId）和食物ID（plateId）的参数。我们定义导航路径的顺序是从最复杂到不太复杂。如果 Url 中缺少这两个数字，将使用上面设置的默认值。

　　现在，让我们看看 Silverlight 客户端如何解析这个 URL。在 Plates.xaml.cs 文件中：

　　// Executes when the user navigates to this page. protected override void OnNavigatedTo(NavigationEventArgs e) { int plateID = -1; int restaurantId =-1; var s = HtmlPage.Document.DocumentUri.ToString().Split(new char[] {'/','#'}); int i = Find(s, "plate"); if (i != -1) { plateID = Convert.ToInt32(s[i + 1]); plateDomainDataSource.FilterDescriptors.Add( new FilterDescriptor("ID", FilterOperator.IsEqualTo, plateID)); } i = Find(s, "restaurant"); if (i != -1) restaurantId = Convert.ToInt32(s[i + 1]); else restaurantId = Convert.ToInt32(NavigationContext.QueryString["restaurantId"]); plateDomainDataSource.QueryParameters.Add( new Parameter() { ParameterName = "resId", Value = restaurantId } ); }

　　基本上，上面的代码所做的就是获取完整的 Url，对其进行结构化，然后提取其中的餐厅编号和食物编号。在第 18-23 行中，我们将餐厅编号作为参数传递给了查询方法，但是在第 11-14 行中我们并没有这样做，而是应用了一个过滤器，这相当于最终的 LINQ 发送给服务器的查询有一个额外的“where”子句。这样，我们就不需要在服务端修改代码了。

　　我们还需要做一些工作，即确保客户端最终导航到食物（盘子）页面。这是通过锚点“#/Plates”在 Silverlight 的导航框架中实现的。但是由于锚点只是客户端的特性，搜索引擎不能很好地处理锚点，所以我们需要在客户端动态添加锚点。我发现使用一点 Javascript 脚本就可以很好地完成这项工作。我将此脚本添加到服务器端的 Default.aspx 页面：

　　protected void Page_Init(object sender, EventArgs e) { string resId = Page.RouteData.Values["restaurant"] as string; if (resId != null) { Response.Write("window.location.hash='#/Plates';"); } }

　　还有一点需要注意。由于我们开启了路径导航的功能，我们现在可以通过不同的Url访问default.aspx页面了。因此，如果我们使用相对路径来引用 Silverlight.js 和 MyApp.xap 包，就会出现问题。例如，我们会看到浏览器转到请求，这将导致以下错误：

　　

　　行数：56

　　错误：Silverlight 应用程序中未处理的错误

　　异常代码：2104

　　类别：初始化错误

　　消息：无法下载 Silverlight 程序，请检查 Web 服务器设置

　　为了解决这个问题，我们需要修改脚本的 src 属性：

　　现在我们可以访问收录食物编号的Url：30045/restaurant/48/plate/119#/Plates，我们可以直接进入对应的食物页面：

　　

　　第 2 步：使用 网站 地图让搜索引擎知道您的所有 网站 深层链接

　　现在我们有一个已经深度链接的应用程序，并且每个有趣的内容都有一个唯一的 URL。但是搜索引擎是如何知道这些 URL 的呢？当然，我们希望人们在社交网络上更多地交谈（通常在他们交谈时留下链接），然后搜索引擎可以找到一些 URL，但我们希望能够做到这一切。我们希望为搜索引擎提供应用内所有深层链接 URL 的列表。这可以使用 网站站点地图来完成。

　　网站地图的格式被各大搜索引擎识别。您可以在 网站 找到相关信息。

　　为了更好地理解它是如何工作的，让我们来看看亚马逊这个数据驱动的网站是如何被搜索引擎索引的。搜索引擎第一次来到这个网站时，会读取网站根目录下的robots.txt文件。在本例中，robots.txt 文件的绝对地址为 .

　　

　　在这个例子中，我们可以看到文件的上半部分列出了一些不允许被搜索引擎抓取的目录，而文件下半部分列出的sitemap列表是供搜索引擎抓取这些网站 内容。

　　请注意，严格来说，您不必使用 Robots 文件来声明您的 网站 映射。您可以使用各大搜索引擎提供的网站管理工具直接注册网站地图地址。

　　如果我们导航到上述 URL 之一，我们将看到一个 网站map 文件，如下所示：

　　

　　在此示例中，由于 Amazon网站 很大，因此链接被分组为多个 网站 映射（上面的文件称为 网站 映射索引文件）。当我们深入 sub网站 映射文件时，我们可以看到实际产品的链接。

　　

　　格式如您所见：

　　 http://www.amazon.com/GAITHER-COMMITTEE-EISENHOWER-COLD-WAR/dp/081425005X http://www.amazon.com/CONTROLLING-VICE-REGULATING-PROSTITUTION-CRIMINAL/dp/0814250076

　　有趣的是，随着商品从亚马逊产品目录中添加或删除，此处的链接会经常更改。

　　让我们继续看看如何为我们的 网站 构建一个 网站 映射。在 web 项目中，打开 VS 的 Add Item 对话框，将“Search sitemap”添加到我们的项目中。

　　

　　确保您的机器上安装了 RIA Services Toolkit，否则没有条目模板。

　　添加成功后，我们会得到一个robots.txt文件：

　　# 此文件为搜索引擎爬虫提供提示和说明。

　　# 有关详细信息，请参阅

　　＃ 允许全部

　　用户代理： *

　　# 防止爬虫索引静态资源（图像、XAP 等）

　　禁止：/ClientBin/

　　# 在此处注册您的站点地图。

　　站点地图：/Sitemap.aspx

　　还有一个 sitemap.aspx 文件。

　　有关更多信息，请参阅：使用站点地图发现基于 Web 的宝藏。

　　但是sitemap.aspx 文件仍然是空的，要创建实际可用的网站 地图，我们需要基于PlateViewDomainService 创建另一个视图。在这个例子中，这个视图的使用者是一个 Asp.Net 页面。这里我们使用asp:DomainDataSource。将Repeater控件拖放到设计器中的窗体上，如下所示：

　　

　　右键单击Repeater控件以配置数据源：

　　

　　选择数据源

　　

　　

　　

　　最后，我们的 网站map 文件中有两组链接。

　　在第 3 行和第 20 行，我们直接调用了 DomainService 中定义的 GetRestaurant 和 GetPlates 方法。

　　现在，对于一个有大量数据的网站，这个页面需要很长时间才能执行。它需要扫描数据库中的每一行。这当然可以确保数据始终是最新的，但我们希望平衡服务器上的负载。一个简单的方法是将输出缓存设置一个小时。具体操作请参考 ASP.NET 缓存：技术与最佳实践。

　　处理如此大的数据集的另一种策略是将数据拆分为多个 网站 映射，就像我们在上面看到的 Amazon网站 示例一样。

　　

　　获取这些 URL 中的任何一个，导航到该 URL，好的，现在我们有了正确的页面。

　　

　　第 3 步：对于重要内容，提供备用版本

　　太好了，既然我们有了深层链接，我们还可以让所有这些链接对搜索引擎可见，但是当涉及到这个页面时，搜索引擎会看到什么？大多数搜索引擎只解析HTML，所以通过菜单“页面>查看源代码”，我们可以看到我们的页面在搜索引擎眼中的样子：

　　

　　或者，如果我们在禁用 Silverlight 插件（工具 > 管理加载项）后转到此页面，我们会看到：

　　

　　我们将看到一个巨大的白色屏幕！

　　Silverlight 生成的动态内容根本不显示。事实上，要显示这些动态内容，必须执行 Silverlight 代码。但我很确定，搜索引擎绝不会在他们的数据中心执行我们的 Silverlight（或 Flash 或 Ajax）代码。所以我们需要的是一些替代的内容。

　　幸运的是，这很简单。让所有备选方案首先显示。需要注意的是，这些内容不仅适用于搜索引擎。仅为搜索引擎制作内容是“欺骗搜索引擎”或垃圾邮件。此内容通常用于混淆搜索引擎并掩盖 网站 的真实内容（页面级网络垃圾邮件的有害背信弃义）。此处的替代内容适用于未安装 Silverlight 插件的用户。它可能不具备 Silverlight 的所有功能，但会降低用户体验。当搜索引擎蜘蛛没有安装 Silverlight 插件时也是如此，这确保它们可以索引有意义和准确的信息。

　　将以下 HTML 代码添加到 default.aspx 页。

　　 Hi, this is my alternative content

　　请注意，我们在此处编写 display:none，这意味着我们不希望浏览器呈现此内容……除非 Silverlight 插件不可用。为了达到这个效果，在页面中添加如下一小段 JS 代码：

　　 if (!isSilverlightInstalled()) { var obj = document.getElementById('AlternativeContent'); obj.style.display = ""; }

　　请注意，这个方便的 isSilverlightInsalled 函数可以在 Petr 关于主题文章 的旧但不错的帖子中找到。我刚刚将此函数添加到我的 Silverlight.js 文件中。

　　function isSilverlightInstalled() { var isSilverlightInstalled = false; try { //check on IE try { var slControl = new ActiveXObject('AgControl.AgControl'); isSilverlightInstalled = true; } catch (e) { //either not installed or not IE. Check Firefox if (navigator.plugins["Silverlight Plug-In"]) { isSilverlightInstalled = true; } } } catch (e) { //we don't want to leak exceptions. However, you may //to add exception tracking code here } return isSilverlightInstalled; }

　　当我们在未启用 Silverlight 插件的浏览器中浏览此页面时，我们会看到替代内容：

　　

　　但是如果安装了 Silverlight，我们会看到很好的 Silverlight 应用程序内容：

　　

　　这很好，但是我们如何让页面显示正确的内容呢？我们希望在不编写太多代码的情况下显示与 Silverlight 应用程序完全相同的数据。我们也真的不想维护太多的页面。因此，让我们在页面的 AlternativeContent DIV 中添加一些基本代码。此 ListView 用于显示餐厅详细信息。

　　现在我们需要将它绑定到我们的数据源...我发现在 VS 的设计视图中很容易做到这一点。请注意，要在设计器中编辑此 DIV，您需要将 DIV 更改为可见模式。

　　

　　然后让我们配置数据源：

　　

　　接下来，我们需要根据我们之前定义的导航路径来绑定查询参数。

　　

　　然后，我们对食物的ListView控件重复同样的操作……

　　现在我们得到的代码非常简单：

　　接下来，我们需要让这些控件根据数据动态生成 UI。

　　protected void Page_Init(object sender, EventArgs e) { RestaurnatDetails.EnableDynamicData(typeof(MyApp.Web.Restaurant)); PlateDetails.EnableDynamicData(typeof(MyApp.Web.Plate)); string resId = Page.RouteData.Values["restaurant"] as string; if (resId != null) { Response.Write("window.location.hash='#/Plates';"); } }

　　请注意，我们在第 4-5 行为这两个 ListView 控件启用了动态数据。

　　在最后一步，我们需要添加 DynamicData 需要使用的模板集。您可以从任何 DynamicData 项目中获取相应的文件。将其复制到 Web 项目根目录。

　　

　　您可以通过编辑这些模板来控制数据的显示。

　　在 EntityTemplates 目录中，我们需要为每个实体（在本例中为两个实体 Food 和 Restaurant）创建一个实体模板。这将决定它们的显示方式。

　　 () ,

　　这里我们只是做一些简单的格式化，然后在替代内容中挑选出我们需要显示的字段。对 Gourmet 实体重复相同的操作...

　　现在我们准备好运行了。

　　访问根目录，在不添加任何 Url 参数的情况下，我们将看到一个餐馆列表，当然都是 HTML。

　　

　　然后我们可以添加一个导航来定位特定餐厅的所有食物。

　　

　　但是让我们在真实的浏览器中浏览这个页面，并确保我们看到的和搜索引擎看到的一样。

　　猞猁还活着！Lynx 是我在 92 年在北卡罗来纳州 Leazar 实验室的 DEC2100 机器上使用的第一个浏览器……它可以工作！

　　

　　和细节：

　　

　　这个经典的文本浏览器向我们展示了纯文本模式下的页面外观，这正是搜索引擎蜘蛛所看到的。

　　现在，进入真正的测试。

　　我们使用 Bing 搜索“我的美食浏览器 - 与乔一起烹饪”，显然，这个页面就在那里。

　　

　　点击这个链接？

　　浏览器导航到的页面正是我们所期望的。

　　

　　当然，另一个也是一样的......如果你碰巧是另一个搜索引擎的用户:-)

　　总结

　　在上面的示例中，我们了解了如何创建 SEO 优化、数据驱动的 Silverlight 应用程序的基础知识。总共分为三个步骤：

　　希望你喜欢~

　　有关更多信息，请参阅：使用 Silverlight 照亮通往 SEO 的道路。