Silverlight 4+RIA Services–搜索引擎优化(SEO)

Kevin Yang — Mon, 03 May 2010 16:37:42 +0000

作者：Brad Abrams

译者：Kevin Yang

英文链接：Silverlight 4 + RIA Services - Ready for Business: Search Engine Optimization (SEO)

继续我们的系列文章，接着来看一下Silverlight和SEO。互联网上大部分流量都是搜索驱动的。搜索引擎通常是很多用户在公共互联网上的第一站，企业环境上的情况也在朝这个趋势发展。搜索也是很多广告获得收益的关键因素。所以无须多讲，SEO非常重要。但对于Silverlight程序来说，很多有意思的内容都是动态生成的，怎么做SEO呢？接下来我会给大家展示一个只需耗费最小工作的应用模式来实现Silverlight应用程序的SEO优化。

要实现Silverlight应用程序的SEO优化，需要按照以下三个有趣而又简单的步骤来实施：

步骤1：做好重要的页面的深层链接
步骤2：使用网站地图(Sitemap)让搜索引擎知道你网站的所有深层链接
步骤3：对于重要内容，提供一个备选版本

下面我会用例子来讲解以上这三个步骤的具体含义。我会继续沿用我在PDC209上的“美食浏览器”的演示。你可能需要看一下我之前的演示(PDC09 Talk: Building Amazing Business Applications with Silverlight 4, RIA Services and Visual Studio 2010)，这样可以在正式开始下面的讲解之前，能够熟悉一些背景。

下载完整的示例。

步骤1: 做好重要的页面的深层链接

对于你网站上的任何内容，如果你想让搜索引擎能够爬取到，那么必须给这份内容起一个独特的Url。例如如果我想在Bing（或者Google，或者其他搜索引擎）上搜索“乡村炸牛排（Country Fried Steak）”，能看到我网站上这个列举了很多乡村炸牛排图片的页面，那么我需要为这个页面提供一个Url，从而引导你来到这个页面。http://foo.com/foodieExplorer.aspx这个Url还不够好，我需要提供一个类似于http://foo.com/foodieExplorer.aspx?food=CountryFriedsteak这样的Url。注意，使用这种格式的Url还有很多其他的好处，例如用户可以在Twitter上传播，通过电子邮件或者即时通讯软件去讨论这些内容。

幸运的是，Silverlight的导航特性使到实现内容的深层链接变得非常简单。我们来看看具体是怎么做的。

我们首先需要做的就是提供一个Url来唯一标识一个特定的餐馆，或者一个特定的餐馆加特定的美食。出于SEO或者用户友好的角度考虑，我们希望Url的格式类似于http://www.hanselman.com/abrams/restaurant/25/plate/4，这表示餐馆编号=25，美食编号=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中添加餐馆编号（restaurantId）和美食编号（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的导航框架中是通过锚点“#/Plates”来实现的。但由于锚点只是一个客户端特性，而搜索引擎并不能很好的处理锚点，因此我们需要在客户端动态添加锚点。我发现用一点点Javascript脚本就可以很好的完成这个工作。我在服务端的Default.aspx页面上加入了这段脚本：

protected void Page_Init(object sender, EventArgs e)
{
    string resId = Page.RouteData.Values["restaurant"] as string;
    if (resId != null) { Response.Write("

简单生活 -- Kevin Yang的博客 » RIA

Silverlight 4+RIA Services–搜索引擎优化(SEO)

步骤1: 做好重要的页面的深层链接