如何对 Sveltekit 网站进行简单的 SEO 优化
原创如何对 Sveltekit 网站进行简单的 SEO 优化
原创
使用robots.txt和sitemap.xml提升博客网站的SEO效果
最近，我花了很多时间为我的博客的SEO进行优化，但随后我意识到一个大问题，我的大部分页面甚至还没有在百度上索引。这确实是一个非常严重的问题。
后来我意识到我的网站需要sitemap.xml，这样百度才能更快地对其进行索引，还需要一个robots.txt。这可以使发现和索引过程更快、更有效。
我首先想到的是在Sveltekit中不能将TXT文件或XML文件作为路由，结果我想错了，解决方案要简单得多。
我觉得将这种方法分享给其他像我一样的人会很酷，以提升你的SEO水平。
所以，我们首先要解决的问题是robots.txt文件，这个文件告诉搜索引擎爬虫应该爬取你网站的哪些部分，哪些部分不应该爬取。robots.txt文件主要用于管理到你网站的爬虫流量，通常用于将文件从百度中删除。
我们将为我们的Sveltekit网站创建robots.txt文件的方法是使用端点。这将允许我们在路由被请求时返回一个文本响应。
在你的路由中创建一个robots.txt文件夹，并将+server.js放置在其中，所以它看起来像这样 - routes/robots.txt/+server.js
/** @type {import('./$types').RequestHandler} */
export async function GET({ url }) {
return new Response(
`User-agent: *
Allow: /
# Google adsbot ignores robots.txt unless specifically named!
User-agent: AdsBot-Google
Allow: /
User-agent: GPTBot
Disallow: /
`.trim()
);
}您可以按照这里的步骤提交您的robots.txt文件。尽管这不会产生任何差异，因为搜索引擎会自动获取它。
仅仅拥有robots.txt文件并不意味着搜索引擎爬虫了解您的网站，相反，它更像是一个信号，允许或禁止搜索引擎爬虫爬取我们网站的部分。此外，当我们创建sitemap时，我们还必须更新我们的robots.txt。
正如你在robots.txt中看到的，我们阻止了GPTBot爬取我们的网站，这可能没有太大的效果，但是有这个也是好的。
站点地图;
站点地图使搜索引擎爬虫能够找到您网站中存在的页面，以及它们的更改时间，以便相应地对您的网站进行索引。
站点地图以XML格式结构化，并且定义了或者仅仅是提供了您网站的地图，允许搜索引擎爬虫更快、更有效地找到页面。
在你的路由中创建一个sitemap.xml文件夹，并将+server.js放置在其中，所以它看起来像这样 - routes/sitemap.xml/+server.js
export async function GET() {
const xml = `
<?xml version="1.0" encoding="UTF-8" ?>
<urlset
xmlns="https://www.sitemaps.org/schemas/sitemap/0.9"
xmlns:xhtml="https://www.w3.org/1999/xhtml"
xmlns:mobile="https://www.google.com/schemas/sitemap-mobile/1.0"
xmlns:news="https://www.google.com/schemas/sitemap-news/0.9"
xmlns:image="https://www.google.com/schemas/sitemap-image/1.1"
xmlns:video="https://www.google.com/schemas/sitemap-video/1.1"
>
<url>
<loc>https://yaqeen.me</loc>
</url>
<url>
<loc>https://yaqeen.me/about</loc>
<lastmod>2024-01-17</lastmod>
</url>
<url>
<loc>https://yaqeen.me/blog</loc>
</url>
<url>
<loc>https://yaqeen.me/projects</loc>
<lastmod>2024-01-17</lastmod>
</url>
<url>
<loc>https://yaqeen.me/wallpapers</loc>
<lastmod>2024-01-17</lastmod>
</url>
</urlset>`.trim();
return new Response(xml, {
headers: {
'Content-Type': 'application/xml'
}
});
}这就是一个简单的站点地图的样子，基本上是您网站的URL。
注意我们返回了一个Content-Type为application/xml的响应。这一点非常重要，这样你的响应就不会返回纯文本。
然后我们最终可以更新我们的robots.txt文件来指向我们的sitemap。
/** @type {import('./$types').RequestHandler} */
export async function GET({ url }) {
return new Response(
`User-agent: *
Allow: /
# Google adsbot ignores robots.txt unless specifically named!
User-agent: AdsBot-Google
Allow: /
User-agent: GPTBot
Disallow: /
Sitemap: ${url.origin}/sitemap.xml
`.trim()
);
}注意我们使用了url.origin，这只是为了当我们更新域名或者我们处于开发模式时更容易一些，我们不必管理那些。
技巧;
在我的网站中，我有一个博客，我需要能够动态更新站点地图。我想大多数人都会同意，手动为所有页面这样做并不容易。
我在这里使用的一个技巧是，在我的站点地图中：
获取所有博客文章。
使用map函数自动将博客URL添加到XML中。
例如;
export async function GET({ fetch, url }) {
const response = await fetch('blog/get/posts/all');
const posts = await response.json();
const xml = `
<!-- 其他站点地图 -->
<url>
<loc>https://yaqeen.me</loc>
</
url>
<!-- 其他站点地图 -->
${posts
.map(
(post) => `
<url>
<loc>${url.origin}/blog/${post.slug}</loc>
<lastmod>${post?.lastmod}</lastmod>
</url>
`
)
.join('')}
</urlset>`.trim();
return new Response(xml, {
headers: {
'Content-Type': 'application/xml'
}
});
}我在这个博客中使用了这个方法，它就像魔法一样起作用。你也可以为你的网站使用类似的方法。
我正在参与2024腾讯技术创作特训营第五期有奖征文，快来和我瓜分大奖！
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。