Cách lưu trữ Blog trên thư mục con (Subdirectory) thay vì Subdomain để tối ưu SEO

Trong hướng dẫn này, bạn sẽ học cách lưu trữ blog của mình trên một thư mục con (ví dụ: example.com/blog) thay vì một tên miền con (ví dụ: blog.example.com). Mọi bước thực hiện đều đã được kiểm tra và xác minh là hoạt động tốt.

Tối ưu hóa cấu trúc website

Tại sao nên lưu trữ trên thư mục con?

Lưu trữ blog trên thư mục con có thể cải thiện SEO và nâng cao trải nghiệm người dùng. Mặc dù có nhiều bài viết đề cao lợi ích của việc sử dụng thư mục con so với tên miền con, nhưng rất ít tài liệu cung cấp hướng dẫn từng bước để thực hiện việc này.

Lợi ích chính của việc lưu trữ trên thư mục con là cải thiện SEO. Nhiều bài viết chỉ ra rằng lưu trữ blog trên thư mục con tốt hơn cho SEO vì nó củng cố quyền hạn và sức mạnh xếp hạng của trang web. Dù Google đã tuyên bố họ không coi tên miền con là một thực thể riêng biệt, nhưng dữ liệu thực tế cho thấy thư mục con thường hoạt động tốt hơn trong bảng xếp hạng tìm kiếm.

Cấu hình DNS và Cloudflare

Kinh nghiệm cá nhân của tôi cũng tương tự. Khi chuyển một blog từ tên miền con sang thư mục con, tôi đã thấy sự gia tăng rõ rệt về lưu lượng truy cập tự nhiên và thứ hạng tìm kiếm sau vài tuần, mà không cần đăng bài mới hay quảng bá thêm.

Tại sao KHÔNG nên lưu trữ trên thư mục con?

Việc cài đặt phức tạp hơn. Nhiều nền tảng blog và CMS được thiết kế để hoạt động trên tên miền con, và việc cấu hình chúng để hoạt động trên thư mục con có thể khá khó khăn. Quy trình thiết lập tốn nhiều thời gian và bạn phải làm theo hướng dẫn rất cẩn thận.

Nếu bạn vẫn thấy nó đáng giá, hãy tiếp tục đọc.

Các bước để lưu trữ Blog trên thư mục con

Giả sử bạn hiện có hai trang web: example.com và blog.example.com. Bạn muốn lưu trữ blog tại example.com/blog thay vì blog.example.com. Giả sử blog của bạn là ứng dụng Next.js được lưu trữ trên Vercel và trang chính là trang tĩnh trên Render. Các bước này gần như giống nhau cho các nhà cung cấp dịch vụ lưu trữ khác. Mọi thứ đều có thể thực hiện từ Cloudflare Dashboard và trình soạn thảo văn bản của bạn.

Bước 1: Thiết lập bản ghi DNS cho trang chính

Đầu tiên, thiết lập bản ghi DNS cho trang chính của bạn (example.com).

1. Vào Cloudflare Dashboard, chọn tên miền của bạn, rồi vào SSL/TLS > Overview. Nhấp vào Configure.
2. Chọn Custom SSL/TLS, sau đó chọn Full.
3. Vào DNS > DNS Records. Nhấp vào Add Record.
4. Thêm các bản ghi DNS sau (thay thế my-site.onrender.com bằng URL dịch vụ của bạn). Quan trọng: Đặt trạng thái "Proxy status" thành Proxied. Đừng thêm bản ghi wildcard (ví dụ: *.example.com).

Type	Name	Target	Proxy status	TTL
CNAME	@	my-site.onrender.com	Proxied	Auto
CNAME	www	my-site.onrender.com	Proxied	Auto
CNAME	api	my-api.onrender.com	Proxied	Auto

Bước 2: Thiết lập bản ghi DNS cho Blog

Đảm bảo blog của bạn đã có thể truy cập được trên một tên miền con (ví dụ: blog.example.com).

Thêm một bản ghi DNS khác cho blog (thay thế cname.vercel-dns.com bằng mục tiêu CNAME từ nhà cung cấp lưu trữ blog của bạn):

Type	Name	Target	Proxy status	TTL
CNAME	blog	cname.vercel-dns.com	Proxied	Auto

Bước 3: Cấu hình Blog Next.js của bạn

Đảm bảo định tuyến chính xác cho tài sản tĩnh. Đảm bảo rằng bộ định tuyến (router) của blog Next.js trỏ đến / chứ không phải /blog. Bạn KHÔNG được có bất kỳ tuyến đường nào chứa /blog. Chỉnh sửa tệp next.config.js hoặc next.config.mjs và thêm basePath: "/blog" vào cấu hình.

/** @type {import('next').NextConfig} */
const nextConfig = {
  basePath: "/blog",  // Thêm dòng này
  images: {
    remotePatterns: [
      {
        protocol: "https",
        hostname: "imagedelivery.net",
      },
    ],
  },
  redirects: async () => {
    return [];
  },
};
export default nextConfig;

Cấu hình Next.js và Code

Bước 4: Thêm Cloudflare Worker

1. Vào Cloudflare Dashboard, chọn Workers & Pages. Nhấp vào Create > Create Worker.
2. Chọn Start with Hello World! và đặt tên là blog-worker, sau đó nhấp Deploy.
3. Thay thế mã bằng đoạn mã sau:

export default {
  async fetch(request, env, ctx) {
    async function MethodNotAllowed(request) {
      return new Response(`Method ${request.method} not allowed.`, {
        status: 405,
        headers: {
          Allow: "GET",
        },
      });
    }

    // Chỉ yêu cầu GET hoạt động với proxy này.
    if (request.method !== "GET") return MethodNotAllowed(request);

    // Lấy URL vừa được yêu cầu.
    const url = new URL(request.url);

    // Thay thế thư mục con bằng tên miền con để yêu cầu URL thực tế.
    const originUrl = url.toString().replace(
      'https://example.com/blog',
      'https://blog.example.com/blog'
    ).replace(
      'https://www.example.com/blog',
      'https://blog.example.com/blog'
    );

    // Lấy dữ liệu từ nguồn gốc.
    const originPage = await fetch(originUrl);

    // Trả về tên miền con dưới dạng thư mục con.
    const newResponse = new Response(originPage.body, originPage);
    return newResponse;
  },
};

Hãy thay đổi các URL theo nhu cầu của bạn. Lưu và Deploy lại Worker.

Bước 5: Kết nối trang Next.js với Cloudflare Worker

1. Vào Worker Routes trong thanh bên của Cloudflare Dashboard. Nhấp vào Add Route.
2. Thêm tuyến đường sau cho nội dung blog:
   • Route: example.com/blog*
   • Worker: blog-worker
3. Thêm tuyến đường khác cho tài sản tĩnh:
   • Route: example.com/blog/_next/static*
   • Worker: blog-worker

Bây giờ bạn có thể truy cập blog của mình tại example.com/blog.

Bước 6: Cấu hình Robots.txt cho công cụ tìm kiếm

Đảm bảo rằng các công cụ tìm kiếm không lập chỉ mục tên miền con (blog.example.com) để tránh nội dung trùng lặp. Cập nhật tệp next.config.js của bạn:

async headers() {
  return [
    {
      source: '/:path*',
      headers: [
        {
          key: 'X-Robots-Tag',
          value: 'noindex, nofollow',
        },
      ],
    },
  ];
},

Sau đó, cập nhật Cloudflare Worker để xóa header này khi phục vụ qua thư mục con:

// ... (phần fetch như cũ)
let newResponse = new Response(originPage.body, originPage);
// Xóa "noindex" khỏi tên miền gốc.
newResponse.headers.delete("x-robots-tag");
return newResponse;

Bước 7: Xác minh

Kiểm tra xem tên miền con có bị chặn lập chỉ mục không bằng cách kiểm tra header X-Robots-Tag. Sau đó, sử dụng Google URL Inspection Tool để xác nhận rằng thư mục con example.com/blog đang được lập chỉ mục.

Chúc mừng, bạn đã thành công trong việc lưu trữ blog trên thư mục con!