【孟子E章】

对Silverlight应用程序进行搜索引擎优化（SEO）收藏

今年10月份，微软发布了针对Silverlight应用程序进行搜索引擎优化的指导文档，该文档描述了对Silverlight应用程序进行搜索引擎优化一些最佳实践。这些实践知识可以帮助开发人员将他们开发的基于Silverlight的内容能够出现在搜索引擎的页面上，并对那些没有启用或者没有安装Silverlight插件的用户也能够提供一种让人接受的访问体验。

搜索引擎识别的是HTML内容，并不能识别Silverlight内容，这与不能识别HTML中的其他对象，如脚本块、CSS块、多媒体文件以及ActiveX控件类似。要想让Silverlight的内容被搜索引擎索引到，就必须使用一些搜索引擎可以搜索到的方法，比如将Silverlight内容与HTML元数据结合在一起。

搜索引擎优化的目的是增加你的页面出现在搜索引擎页面重要部位（注意不是指付费或者赞助商位置）的机会。搜索引擎在网络上爬行，抓取内容，按照一定的算法对页面内容进行加权，最终的结果用来创建索引，然后根据查询的关键字产生结果页面。网页在搜索结果中靠前的主要原因是页面中的文字与搜索的关键字匹配。所以，动态和不标准的元素，如脚本、样式表、object和embed标签就很难被搜索引擎搜索到，搜索引擎通常会采用下面的方法进行处理：

下载链接的内容，将它与原页面关联起来；
解析、转换、执行或者展现这些元素，得到与用户在浏览器中查看相同的效果。

对于Silverlight程序来说，要被搜索引擎搜索到，可以采取下面的方法设计你的Silverlight：

1，将Silverlight内容与HTML混合在一起：

这种方法的做法就是在同一页面中将Silverlight内容与HTML文字混合字在一起，这样，就能实现丰富的客户端功能和被搜索引起使用的HTML内容。使用这种方法，就需要将SIlverlight内容放在文字块的内部或者周围。

2，使用HTML桥动态产生Silverlight内容

这种方法实现起来稍微困难一些，并且也会对Silverlight的感受有所限制。XHML内容被定义成object标签嵌套的替代内容，Silverlight的内容是通过这些替代内容呈现的。换句话说，Silverlight程序使用DOM Bridge通过object标签得到嵌套的替代内容，然后用它来构建Silverlight的UI界面。

Silverlight应用程序的搜索引擎优化技术

1，使用描述性的页面标题

给页面设置一个好的标题。Visual Studio 和 Expression Blend工程模板产生的页面标题需要网页设计人员进行更改，填上一个切合网页内容的标题。

2，添加描述性的元数据

页面中meta标签中的keywords对搜索引擎来说并不是十分有用，而页面标题和名为description的meta标签对搜索者在搜索结果中查看与他们要找的内容是很有用的。如果你的Silveight程序占据了整个浏览器，那就需要一个meta标签：

<meta name="description" content="【孟宪会之精彩世界】，学习.NET技术的乐园。" >

如果你的页面有很多文字内容，并且包含了相应的关键字，你就可以省去这个description的meta标签搜索引擎将会搜索结果中显示部分页面内容，保留description的meta标签有时候会起反作用。

3，使用有意义的程序名

给你的程序起个有意义的名称有助于搜索引擎发现你的页面。

4，使用object标签

HTML中的object标签，如果主要内容不能加载显示出内容，则浏览器就会查找object标签内的替代内容。Sliverlight内容必须通过object标签（不能是embed）来进行实例化。下面的代码显示出可以添加的object标签：

<object type="application/x-silverlight-2" 
        data="data:application/x-silverlight," 
        width="..." height="...">
  <param name="source" value="SeattleTrafficMaps.xap" />
  <!-- 其他参数 -->
  ...
  <!-- “下载 Silverlight 插件提示信息”  -->
  <p>This content requires Microsoft Silverlight. 
    <a href="http://go.microsoft.com/fwlink/?LinkID=124807" 
       style="text-decoration: none;">

      <img src="http://go.microsoft.com/fwlink/?LinkId=108181" 
           alt="Get Microsoft Silverlight" 
           style="border-style: none"/>
    </a>
  </p>
</object>

5，指定替代内容

Sliverlight程序使用的object标签必须使用嵌套的替代内容进行补充，也就是内部的HTML。例如：

<object type="application/x-silverlight-2"
        data="data:application/x-silverlight,"  
        width="..." height="...">
  <param name="source" value="SeattleTrafficMaps.xap" />
  <!-- 其他参数 -->
  ...
  <!-- 嵌套的供搜索用的替代HTML内容 -->
  <h3>交通导航</h3>
  <p>交通导航由<a href="http://maps.live.com">Live Maps</a> 提供技术支持。 </p>
  <!-- 预先制作的Silverlight程序内容图片 -->
  <img src="SeattleTraffic_RushHour.jpg" 
       alt="Seattle traffic at 5:30pm (evening rush-hour)" />
  <!-- 插件下载提示 -->
  <p>This content requires Microsoft Silverlight. 
    <a href="http://go.microsoft.com/fwlink/?LinkID=124807" 
       style="text-decoration: none;">
      <img src="http://go.microsoft.com/fwlink/?LinkId=108181" 
           alt="Get Microsoft Silverlight" 
           style="border-style: none"/>
    </a>
  </p>
</object>

6，当使用Silverlight.js时，请用createObject方法

Silverlight.js是提供一种跨浏览器、跨平台构建正确的标记显示Silverlight内容的方法。一般在外面需要一个带有id的div或者span标记，Silverlight的object标记作为子元素存放，例如：

if (slParentElement != null) {
    slParentElement.innerHTML = slPluginHTML;
}

假如页面标记如下：

<div id="divWithinWhichSLObjectExists">
  <script type="text/javascript">
    Silverlight.createObject("slObjectId", 
                             "divWithinWhichSLObjectExists", 
                             ...);
  </script>
</div>

浏览器执行后，实际产生的DOM结果将会是下面的样子：

<div id="divWithinWhichSLObjectExists">
<object type="application/x-silverlight-2" 
        data="data:application/x-silverlight," 
        width="..." height="...">
  <param name="source" value="SeattleTrafficMaps.xap" />
  <!-- 其他参数 -->
  ...
  <!-- 插件下载信息 -->
  <p>This content requires Microsoft Silverlight. 
    <a href="http://go.microsoft.com/fwlink/?LinkID=124807" 
       style="text-decoration: none;">
      <img src="http://go.microsoft.com/fwlink/?LinkId=108181" 
           alt="Get Microsoft Silverlight" 
           style="border-style: none"/>
    </a>
  </p>
</object>
</div>

当然，也可以使用父div元素里面添加详细的替代内容，这些替代内容浏览器是不显示的：

<div id="divWithinWhichSLObjectExists">
  <!-- 嵌套的供搜索用的替代HTML内容 -->
  <div>
    <h3>交通导航图</h3>
    <p>交通导航由<a href="http://maps.live.com">Live Maps</a> 提供技术支持。 </p>
    <!-- 预先制作的Silverlight程序内容图片 -->
    <img src="SeattleTraffic_RushHour.jpg" 
         alt="Seattle traffic at 5:30pm (evening rush-hour)" />
  </div>
  <!-- Silverlight.js 中 createObject  函数的调用 -->
  <script type="text/javascript">
    Silverlight.createObject("slObjectId", //SL plug-in id
                             "divWithinWhichSLObjectExists", //parent id
                             ...);
  </script>
</div>