7
章节7
XML 网站地图
网站地图是与 Google 沟通最简单的方式。它们指示属于您网站的 URL 以及何时更新，以便 Google 可以轻松检测新内容并更高效地抓取您的网站。
尽管 XML 网站地图是众所周知且最常用的，但它们也可以通过 RSS 或 Atom 创建，甚至如果您喜欢最大程度的简单性，也可以通过 文本 文件创建。
网站地图是一个文件，您在其中提供有关您网站上的页面、视频和其他文件以及它们之间关系的信息。像 Google 这样的搜索引擎会读取此文件以更智能地抓取您的网站。
根据 Google
如果出现以下情况，您可能需要网站地图
- 您的网站非常庞大。因此，Google 网页抓取工具更有可能忽略抓取您的某些新页面或最近更新的页面。
- 您的网站包含大量相互隔离或链接不佳的内容页面存档。如果您的网站页面没有自然地相互引用，您可以在网站地图中列出它们，以确保 Google 不会忽略您的某些页面。
- 您的网站是新网站，并且很少有外部链接。Googlebot 和其他网页抓取工具通过跟踪从一个页面到另一个页面的链接来浏览网络。因此，如果没有其他网站链接到您的页面，Google 可能无法发现您的页面。
- 您的网站包含大量富媒体内容（视频、图片）或显示在 Google 新闻中。如果提供，Google 可以在适当的情况下将网站地图中的额外信息考虑在内用于搜索。
虽然网站地图对于出色的搜索引擎性能并非强制要求，但它们可以促进机器人的抓取和索引，从而使您的内容更快地被收录并相应地排名。
强烈建议使用网站地图，并随着您网站上新内容的填充使它们动态化。静态网站地图也有效，但它们可能对 Google 的用处较小，因为它不适用于持续发现目的。
如何将网站地图添加到 Next.js 项目中
有两种选择
手动：如果您的网站相对简单且静态，您可以在项目的 public 目录中手动创建 sitemap.xml
<!-- public/sitemap.xml -->
<xml version="1.0" encoding="UTF-8">
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
<url>
<loc>http://www.example.com/foo</loc>
<lastmod>2021-06-01</lastmod>
</url>
</urlset>
</xml>动态：如果您的网站是动态的，您可以利用 getServerSideProps 按需生成 XML 网站地图。
我们可以在 pages 目录中创建一个新页面，例如 pages/sitemap.xml.js。此页面的目标是访问我们的 API 以获取数据，这些数据将使我们能够了解动态页面的 URL。然后我们将编写一个 XML 文件作为 /sitemap.xml 的响应
这是一个您可以自己尝试的示例
//pages/sitemap.xml.js
const EXTERNAL_DATA_URL = 'https://jsonplaceholder.typicode.com/posts';
function generateSiteMap(posts) {
return `<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
<!--We manually set the two URLs we know already-->
<url>
<loc>https://jsonplaceholder.typicode.com</loc>
</url>
<url>
<loc>https://jsonplaceholder.typicode.com/guide</loc>
</url>
${posts
.map(({ id }) => {
return `
<url>
<loc>${`${EXTERNAL_DATA_URL}/${id}`}</loc>
</url>
`;
})
.join('')}
</urlset>
`;
}
function SiteMap() {
// getServerSideProps will do the heavy lifting
}
export async function getServerSideProps({ res }) {
// We make an API call to gather the URLs for our site
const request = await fetch(EXTERNAL_DATA_URL);
const posts = await request.json();
// We generate the XML sitemap with the posts data
const sitemap = generateSiteMap(posts);
res.setHeader('Content-Type', 'text/xml');
// we send the XML to the browser
res.write(sitemap);
res.end();
return {
props: {},
};
}
export default SiteMap;延伸阅读
这有帮助吗？