Để cải thiện Tối ưu hóa Công cụ Tìm kiếm (SEO), bạn có thể cần thêm sơ đồ trang web hoặc tệp robots.txt
vào trang Next.js của mình.
** Sitemap ** xác định mối quan hệ giữa các trang trong trang web của bạn. Công cụ tìm kiếm (Google,Bing,Yandex...) sử dụng
tệp này để lập chỉ mục chính xác hơn trang web của bạn. Bạn cũng có thể cung cấp thêm thông tin
chẳng hạn như thời gian cập nhật lần cuối <lastmod>
, tần suất thay đổi của trang <changefreq>
và hơn thế nữa.
Tệp ** robots.txt ** cho công cụ tìm kiếm biết những trang hoặc tệp nào mà trình thu thập thông tin (Bots) có thể hoặc không thể yêu cầu từ trang web của bạn.
Sơ đồ trang web tĩnh (Static Sitemap)
Nếu trang web của bạn không cập nhật thường xuyên, bạn có thể sử dụng sơ đồ trang web tĩnh.
Đây là tệp .xml
cơ bản xác định nội dung trang web của bạn. Ví dụ đơn giản:
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
<url>
<loc>https://callmetony.com</loc>
</url>
<url>
<loc>https://callmetony.com/blog</loc>
</url>
</urlset>
Khi trang web của bạn mở rộng quy mô, bạn nên tạo sơ đồ trang web động.
Sơ đồ trang web động (Dynamic Sitemap)
Nếu trang web của bạn thường xuyên thay đổi, bạn nên tạo một sơ đồ trang web động.
Trước tiên, hãy xem xét một ví dụ trong đó nội dung trang web của bạn dựa trên tệp (ví dụ: trong thư mục /pages
).
Đầu tiên, hãy thêm globby
để chúng ta có thể tìm nạp danh sách routes.
$ yarn add --dev globby
Tiếp theo, chúng ta có thể tạo một tập lệnh Node tại scripts/generate-sitemap.js
.
Tệp này sẽ tự động tạo sơ đồ trang dựa trên thư mục /pages
của bạn.
const fs = require('fs');
const globby = require('globby');
const prettier = require('prettier');
(async () => {
const prettierConfig = await prettier.resolveConfig('./.prettierrc.js');
// Ignore Next.js specific files (e.g., _app.js) and API routes.
const pages = await globby([
'pages/**/*{.js,.mdx}',
'!pages/_*.js',
'!pages/api'
]);
const sitemap = `
<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
${pages
.map((page) => {
const path = page
.replace('pages', '')
.replace('.js', '')
.replace('.mdx', '');
const route = path === '/index' ? '' : path;
return `
<url>
<loc>${`https://webcuaban.com${route}`}</loc>
</url>
`;
})
.join('')}
</urlset>
`;
// If you're not using Prettier, you can remove this.
const formatted = prettier.format(sitemap, {
...prettierConfig,
parser: 'html'
});
fs.writeFileSync('public/sitemap.xml', formatted);
})();
Cuối cùng, ghi đè next.config.js
của bạn để chạy tập lệnh này trong quá trình build.
Tệp của bạn được tạo tại public/sitemap.xml
, sau đó được chuyển đến
Root trang web của bạn (yêu cầu Next v9.0 +).
module.exports = {
webpack: (config, { isServer }) => {
if (isServer) {
require('./scripts/generate-sitemap');
}
return config;
}
};
Nội dung bổ sung
Nếu bạn có dữ liệu được lưu trữ bên ngoài (ví dụ: CMS), bạn sẽ cần thực hiện yêu cầu API trước khi bạn có thể tạo sơ đồ trang web của mình. Việc triển khai này sẽ khác nhau tùy thuộc vào nguồn dữ liệu của bạn, nhưng ý tưởng giống nhau. Để chứng minh, tôi đã tạo một ví dụ bằng cách sử dụng dữ liệu trình giữ chỗ (placeholder data).
Đầu tiên, tạo một tệp mới tại pages/sitemap.xml.js
:
import React from 'react';
class Sitemap extends React.Component {
static async getInitialProps({ res }) {
const request = await fetch(EXTERNAL_DATA_URL);
const posts = await request.json();
res.setHeader('Content-Type', 'text/xml');
res.write(createSitemap(posts));
res.end();
}
}
export default Sitemap;
Khi route /sitemap.xml
được tải ban đầu, chúng ta sẽ tìm nạp các bài đăng từ nguồn dữ liệu bên ngoài
và sau đó ghi một tệp XML dưới dạng phản hồi.
import React from 'react';
const EXTERNAL_DATA_URL = 'https://jsonplaceholder.typicode.com/posts';
const createSitemap = (posts) => `<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
${posts
.map(({ id }) => {
return `
<url>
<loc>${`${EXTERNAL_DATA_URL}/${id}`}</loc>
</url>
`;
})
.join('')}
</urlset>
`;
class Sitemap extends React.Component {
static async getInitialProps({ res }) {
const request = await fetch(EXTERNAL_DATA_URL);
const posts = await request.json();
res.setHeader('Content-Type', 'text/xml');
res.write(createSitemap(posts));
res.end();
}
}
export default Sitemap;
Đây là ví dụ về kết quả đầu ra.
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
<url>
<loc>https://jsonplaceholder.typicode.com/posts/1</loc>
</url>
<url>
<loc>https://jsonplaceholder.typicode.com/posts/2</loc>
</url>
</urlset>
robots.txt
Cuối cùng, chúng ta có thể tạo một tệp tĩnh tại public/robots.txt
để xác định tệp nào
có thể được thu thập thông tin và vị trí của sơ đồ trang web.
User-agent: *
Sitemap: https://callmetony.com/sitemap.xml