《前端与SEO》—— 第二章：站点地图（sitemap）-Toy模板网

这篇具有很好参考价值的文章主要介绍了《前端与SEO》—— 第二章：站点地图（sitemap）。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

什么是sitemap

顾名思义，sitemap就是网站的地图。这张“地图”描述的是网站中各个网页、图片、视频或其他文件的有关信息,甚至还可以说明这些内容之间的关系。sitemap以文件的形式存放在域名根路径下。需要注意的是，这张“地图”并不是给用户看的，而是专为搜索引擎抓取工具¹: 设计的。搜索引擎会让抓取工具爬取sitemap文件，以便更高效的收录网站的网址。

为什么需要sitemap？

搜索引擎的工作原理：

当搜索引擎获取的一个 URL，就会尝试去访问并解析该URL的网页。在解析的过程中，如果遇到新的URL同样会去访问解析。

搜索引擎的工作机制是由点及面。只要搜索引擎获取到网站的任意一个网页地址，它就有可能收录网站全部的页面。但是！这是在理想条件下能达到的效果。所以上面写的是”可能“，而不是”一定“。理想条件有主要两点：

必须保证：无论搜索引擎从那个页面进入网站，都能有一条路径可以访问到网站的任意页面。（这个路径可以通过多次跳转来实现）
路径的嵌套层次不能太深，即入口网页到目标网页中间跳转次数不能太多。因为搜索引擎的深度遍历访问的深度是有限制的。嵌套太深，搜索引擎就可能访问不到了。

除开上面两点，还有非常重要的一点是：必须保证每个网页都允许浏览器抓取。

之所以没有在上面列举出来，是因为如果网页不允许搜索引擎抓取，做什么优化都没用。

如果我们能保证理想条件的成立，网站可以不需要sitemap。

其实，许多网站都会在footer 部分把网站的全部页面列举出来，这其实算是一种sitemap。不过这个方法对于规模较大的网站就不太友好了。因为大量的列举网页必定会导致 footer 部分篇幅过大大，会影响页面整体的效果。所以这个做法外，部分网站还会创建一个单独的网页，用来专门把全部的网页列举出来。这样就避免了对页面展示效果的影响。

这时可能人就觉得：“在 footer 部分放用户用不到的链接会不会不太好“。

确实会有这个弊端！

那通过 CSS 隐藏起来，不让用户看的是不是可以呢？理论来说可以。但是会违反部分搜索引擎的“质量指南”。

“这也不行，那也不行“，就没有一劳永逸的方法吗？

上面的方法比较简陋且存在影响页面效果，维护成本较高，不灵活的弊端。

因此人们就设计出了”sitemap“这一利器。sitemap是专门为搜索引擎设计的，它是一个文本文件，存放在域名根路径。正常情况下，用户不会去主动访问。搜索引擎抓取工具在访问一个域名时会优先抓取sitemap。此外，sitemap列举项不仅仅局限于网页地址，还可以列举多媒体资源。

相较于【在页面上罗列地址】的方法，sitemap有诸如以下的优点：

独立于页面，不影响页面效果
涵盖信息更加全面，如优先级、更新时间、抓取频率、网址
种类更加丰富，出了列举网址，还可以列举多媒体资源
维护更加简单，可随时更新，无需担心影响用户体验
……

注意：

sitemap仅仅是一个辅助手段。一般来说，在sitemap列举的网址，抓取工具都会去访问。但那些未在sitemap列举出来的网址，并不意味着其不会被收录。如果你不想要搜索引擎收录某个网址，不应该通过sitemap来限制，它并不能实现你的目的。你应该使用 robots.txt。

sitemap的文件格式

上面有提及到sitemap除了可以列举网页地址外，还可以列举网站中的多媒体资源。因此sitemap的文件格式也是多样的。

以 Google 为例，支出的格式有：

TXT
XML
RSS、mRSS 和 Atom 1.0

TXT

TXT 格式的sitemap是最简单的一种形式，如果你的sitemap只包含网页网址完全可以采用 TXT 格式。例如：

http://www.example.com/file1.html
http://www.example.com/file2.html

注意：每一行只能包含一个网址。

XML

相对于 TXT，XML 除了可以列举网页网址外，还可以对网页补充一些描述信息。例如：

<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
   <url>
      <loc>http://www.example.com/</loc>
      <lastmod>2005-01-01</lastmod>
      <changefreq>monthly</changefreq>
      <priority>0.8</priority>
   </url>
</urlset>

字段说明：

属性描述

<urlset> 必填封装文件并引用当前协议标准。

<url> 必填每个 URL 条目的父标记。其余标记是此标记的子项。

<loc> 必填页面的网址。此 URL 必须以协议（如 http）开头，并以尾部斜杠结尾（如果您的 Web 服务器需要）。此值必须小于 2048 个字符。

<lastmod> 自选上次修改页面的日期。此日期应采用 W3C 日期时间格式。如果需要，此格式允许您省略时间部分，并使用 YYYY-MM-DD。请注意，必须将日期设置为上次修改链接网页的日期，而不是生成sitemap的日期。另请注意，此标记与服务器可以返回的 If-Modified-Since （304）标头是分开的，并且搜索引擎可能会以不同的方式使用来自这两个源的信息。

<changefreq> 自选页面可能更改的频率。请注意，此标记的值被视为提示，而不是命令。

<priority> 自选此网址相对于您网站上其他网址的优先级。有效值范围为 0.0 到 1.0。此值不会影响您的网页与其他网站上的网页的比较方式，它只会让搜索引擎知道您认为哪些网页对抓取工具最重要。页面的默认优先级为 0.5。由于优先级是相对的，因此它仅用于在网站上的URL之间进行选择。

上面的只是简单的示例。建议访问 sitemaps.org 做详细的了解。

属性		描述
`<urlset>`	必填	封装文件并引用当前协议标准。
`<url>`	必填	每个 URL 条目的父标记。其余标记是此标记的子项。
`<loc>`	必填	页面的网址。此 URL 必须以协议（如 http）开头，并以尾部斜杠结尾（如果您的 Web 服务器需要）。此值必须小于 2048 个字符。
`<lastmod>`	自选	上次修改页面的日期。此日期应采用 W3C 日期时间格式。如果需要，此格式允许您省略时间部分，并使用 YYYY-MM-DD。请注意，必须将日期设置为上次修改链接网页的日期，而不是生成sitemap的日期。另请注意，此标记与服务器可以返回的 If-Modified-Since （304）标头是分开的，并且搜索引擎可能会以不同的方式使用来自这两个源的信息。
`<changefreq>`	自选	页面可能更改的频率。请注意，此标记的值被视为提示，而不是命令。
`<priority>`	自选	此网址相对于您网站上其他网址的优先级。有效值范围为 0.0 到 1.0。此值不会影响您的网页与其他网站上的网页的比较方式，它只会让搜索引擎知道您认为哪些网页对抓取工具最重要。页面的默认优先级为 0.5。由于优先级是相对的，因此它仅用于在网站上的URL之间进行选择。

RSS、mRSS 和 Atom 1.0

此外，google 还支持 RRS、mRSS、Atom 1.0 来充当sitemap。

Google 说明如下：

如果您的博客有 RSS 或 Atom Feed，那么您可以将该 Feed 的网址作为sitemap提交。大多数博客软件都能为您创建 Feed，但请注意，此类 Feed 只会提供关于近期网址的信息。

Google 支持 RSS 2.0 Feed 和 Atom 1.0 Feed。

您可以使用 mRSS（媒体 RSS）Feed 向 Google 提供有关您网站上视频内容的详情。

看个例子 mRSS 例子：

<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:media="http://search.yahoo.com/mrss/" xmlns:dcterms="http://purl.org/dc/terms/">
<channel>
<title>Example MRSS</title>
<link>http://www.example.com/examples/mrss/</link>
<description>MRSS Example</description>
  <item xmlns:media="http://search.yahoo.com/mrss/" xmlns:dcterms="http://purl.org/dc/terms/">
    <link>http://www.example.com/examples/mrss/example.html</link>
    <media:content url="http://www.example.com/examples/mrss/example.flv" fileSize="405321"
      type="video/x-flv" height="240" width="320" duration="120" medium="video" isDefault="true">
      <media:player url="http://www.example.com/shows/example/video.swf?flash_params" />
      <media:title>Grilling Steaks for Summer</media:title>
      <media:description>Get perfectly done steaks every time</media:description>
      <media:thumbnail url="http://www.example.com/examples/mrss/example.png" height="120" width="160"/>
      <media:price price="19.99" currency="EUR" />
      <media:price type="subscription" />
    </media:content>
    <media:restriction relationship="allow" type="country">us ca</media:restriction>
    <dcterms:valid xmlns:dcterms="http://purl.org/dc/terms/">end=2020-10-15T00:00+01:00; scheme=W3C-DTF</dcterms:valid>
    <dcterms:type>live-video</dcterms:type>
  </item>
</channel>
</rss>

可以看到，有点像 XML。其实，RSS、mRSS、Atom 1.0 都是基于 XML 扩展出来的 Web 网络数据交互规范。

RSS、mRSS、Atom 1.0 的异同:

相同点：用于发布站点更新的 XML 文档格式

不同点：

格式不一样

RSS 用于经常更新资料的网站，例如博客、新闻的网摘;

mRSS 是用于整合多媒体文件的 RSS 扩展项。它对内容的描述比 RSS 标准要详细得多;

Atom 是一个相对较新的规范，比RSS更强大，功能更丰富。

多媒体的sitemap

部分搜索引擎还支持为网站中的多媒体资源设置sitemap，有助于搜索引擎收录抓取工具可能无法爬取到的多媒体资源。（例如，通过 JavaScript 添加的图片）

图片sitemap

图片sitemap使用的是 XML 格式。如下：

<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"
        xmlns:image="http://www.google.com/schemas/sitemap-image/1.1">
  <url>
    <loc>http://example.com/sample1.html</loc>
    <image:image>
      <image:loc>http://example.com/image.jpg</image:loc>
    </image:image>
    <image:image>
      <image:loc>http://example.com/photo.jpg</image:loc>
    </image:image>
  </url>
  <url>
    <loc>http://example.com/sample2.html</loc>
    <image:image>
      <image:loc>http://example.com/picture.jpg</image:loc>
    </image:image>
  </url>
</urlset>

视频sitemap

视频sitemap支持 XML 格式以及 mRSS。

XML 示例如下：

<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"
        xmlns:video="http://www.google.com/schemas/sitemap-video/1.1">
   <url>
     <loc>http://www.example.com/videos/some_video_landing_page.html</loc>
     <video:video>
       <video:thumbnail_loc>http://www.example.com/thumbs/123.jpg</video:thumbnail_loc>
       <video:title>Grilling steaks for summer</video:title>
       <video:description>Alkis shows you how to get perfectly done steaks every
         time</video:description>
       <video:content_loc>
          http://streamserver.example.com/video123.mp4</video:content_loc>
       <video:player_loc>
         http://www.example.com/videoplayer.php?video=123</video:player_loc>
       <video:duration>600</video:duration>
       <video:expiration_date>2021-11-05T19:20:30+08:00</video:expiration_date>
       <video:rating>4.2</video:rating>
       <video:view_count>12345</video:view_count>
       <video:publication_date>2007-11-05T19:20:30+08:00</video:publication_date>
       <video:family_friendly>yes</video:family_friendly>
       <video:restriction relationship="allow">IE GB US CA</video:restriction>
       <video:price currency="EUR">1.99</video:price>
       <video:requires_subscription>yes</video:requires_subscription>
       <video:uploader
         info="http://www.example.com/users/grillymcgrillerson">GrillyMcGrillerson
       </video:uploader>
       <video:live>no</video:live>
     </video:video>
   </url>
</urlset>

mRSS 示例：

<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:media="http://search.yahoo.com/mrss/" xmlns:dcterms="http://purl.org/dc/terms/">
<channel>
<title>Example MRSS</title>
<link>http://www.example.com/examples/mrss/</link>
<description>MRSS Example</description>
  <item xmlns:media="http://search.yahoo.com/mrss/" xmlns:dcterms="http://purl.org/dc/terms/">
    <link>http://www.example.com/examples/mrss/example.html</link>
    <media:content url="http://www.example.com/examples/mrss/example.flv" fileSize="405321"
      type="video/x-flv" height="240" width="320" duration="120" medium="video" isDefault="true">
      <media:player url="http://www.example.com/shows/example/video.swf?flash_params" />
      <media:title>Grilling Steaks for Summer</media:title>
      <media:description>Get perfectly done steaks every time</media:description>
      <media:thumbnail url="http://www.example.com/examples/mrss/example.png" height="120" width="160"/>
      <media:price price="19.99" currency="EUR" />
      <media:price type="subscription" />
    </media:content>
    <media:restriction relationship="allow" type="country">us ca</media:restriction>
    <dcterms:valid xmlns:dcterms="http://purl.org/dc/terms/">end=2020-10-15T00:00+01:00; scheme=W3C-DTF</dcterms:valid>
    <dcterms:type>live-video</dcterms:type>
  </item>
</channel>
</rss>

此外，Google 也支持创建新闻sitemap，可通过以下链接做详细了解：

图片sitemap

视频sitemap和替代方案

Google 新闻sitemap

sitemap的创建

sitemap的创建有三种常用方式：

手动创建sitemap
通过 CMS 平台创建sitemap
通过工具自动生成sitemap

手动创建sitemap

手动创建是最直接的的方式，如果要创建的站点地地图规模比较小，可以选择这种方式。只需要在文本编辑器按所要求的格式编写站点即可。

通过 CMS 平台创建sitemap

如果网站是通过 CMS 平台创建的，那 CMS 平台可能提供sitemap的创建功能，或者已经自动生成了。

CMS 平台：

CMS 平台（content management system，即内容管理系统平台）是一款可以让我们轻松管理内容和创建网站的软件。CMS 平台允许我们在不编写代码的情况下制作网站。

常用的 CMS 平台有：WordPress、Wix 或 Blogger

关于 CMS 更多知识，推荐阅读：2021 年 15 个最佳和最受欢迎的 CMS 平台（比较）

通过工具自动生成sitemap

对于规模比较大的网站，建议通过工具来自动生成。不过需要注意的是，自动生成工具也是通过链接爬取的形式来生成sitemap的。所以，那些抓取工具无法访问到的网址，照样是不会出现在生成的sitemap中。这就需要我们手动对生成的sitemap进行二次编辑了。

拆分较大的sitemap

如果sitemap文件过大（如大于 50M），那就需要对sitemap做拆分，然后创建一个sitemap索引文件来引导搜索引擎。

sitemap索引文件是一个 XML 文件，使用以下 XML 标记：

sitemapindex - 文件头尾的父标记
sitemap - 文件中列出的每个sitemap的父标记（sitemapindex 标记的子级）
loc - sitemap的位置（sitemap 标记的子级）

例如：

<?xml version="1.0" encoding="UTF-8"?>
<sitemapindex xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
  <sitemap>
    <loc>http://www.example.com/sitemap1.xml.gz</loc>
  </sitemap>
  <sitemap>
    <loc>http://www.example.com/sitemap2.xml.gz</loc>
  </sitemap>
</sitemapindex>

sitemap的注意事项

最后，列举一下sitemap的一些注意事项：

以下注意事项参考了 Google 文档，对其做了一些删减，抽取出比较通用的部分。

Google 文档地址：sitemap一般指南

使用一致且完全限定的网址。 例如，如果网站位于 https://www.example.com/，请勿将网址指定为 https://example.com/（缺少 www）或 ./mypage.html（相对网址）。
sitemap可以发布在网站上的任何位置，但是sitemap只影响父级目录中的下级目录。
请勿在sitemap中包含网址的会话 ID。这样可以减少对这些网址的重复抓取。
采用 UTF-8 编码
将较大的sitemap拆分成数个较小的sitemap
仅列出规范网址。
请注意，sitemap用于向 Google 建议您认为重要的网页，Google 不承诺会抓取sitemap中的每个网址。