Astro SEO: cách để website Astro xếp hạng trên Google và được AI trích dẫn

Bài trắc nghiệm nhanh

SEO có phù hợp với bạn không, và nên bắt đầu như thế nào?

Câu hỏi 1 trên 425%

Mọi người có tìm kiếm trên Google những gì bạn bán không?

Có, tôi nghĩ vậyKhông, đó là thứ mới hoặc rất ngáchTôi không biết

Astro SEO là công việc biến HTML sạch đó thành các trang có thể xếp hạng. Hướng dẫn cơ bản về SEO JavaScript của chính Google giải thích rằng Google xử lý website JavaScript qua ba giai đoạn (thu thập, render, lập chỉ mục) và khẳng định rằng “render phía máy chủ hoặc render trước vẫn là một ý tưởng tuyệt vời”, vì không phải bot nào cũng chạy được JavaScript. Astro xuất phát từ vị thế đó theo mặc định. Hướng dẫn này bao quát phần còn lại, từng thiết lập một, với mọi hành vi được đối chiếu với tài liệu chính thức của Astro. Để có bối cảnh, website sorank.com mà bạn đang đọc chạy trên Astro.

Astro có tốt cho SEO không?

Có, về mặt kỹ thuật. Astro render các component thành HTML tại thời điểm build và loại bỏ JavaScript mà các framework như React hay Vue thường gửi xuống trình duyệt. Kết quả tránh được các vấn đề kinh điển được mô tả trong hướng dẫn SEO JavaScript của chúng tôi: vỏ HTML rỗng, nội dung chỉ xuất hiện sau khi render, liên kết không phải thẻ anchor thật. Nó cũng tránh được các bẫy định tuyến của ứng dụng một trang, vì mỗi route của Astro là một URL thật với file HTML riêng.

Điều Astro không làm cũng quan trọng không kém. Không có plugin SEO tích hợp sẵn, không có mô tả meta tự động, không có thẻ canonical tự động và không có dữ liệu có cấu trúc. Bảng dưới đây tách những gì bạn có sẵn khỏi những gì bạn phải tự xây.

Render tĩnh hay render máy chủ: chế độ nào tốt nhất cho SEO?

Tài liệu Astro về render theo yêu cầu nói rõ: theo mặc định, các trang, route và endpoint API được render sẵn tại thời điểm build thành trang tĩnh. Với SEO, đầu ra tĩnh là lựa chọn mặc định an toàn nhất: mỗi URL là một file HTML hoàn chỉnh được phục vụ từ CDN, nhanh và giống hệt nhau với mọi khách truy cập và mọi bot.

Render theo yêu cầu (render máy chủ) cần một adapter cho máy chủ lưu trữ của bạn (ví dụ Node, Netlify, Vercel hoặc Cloudflare). Sau đó bạn có thể chọn riêng một route không render sẵn bằng export const prerender = false, hoặc chuyển cả dự án sang output: 'server' và bật lại render sẵn cho các trang tĩnh. Cả hai chế độ đều tạo ra HTML đầy đủ, nên Google thấy cùng một thứ. Khác biệt nằm ở những chỗ khác:

• Tốc độ: một file tĩnh được phục vụ tức thì; một trang render trên máy chủ phụ thuộc vào thời gian phản hồi của máy chủ, điều này ảnh hưởng đến Largest Contentful Paint.
• Độ mới: render máy chủ phù hợp với các trang thay đổi liên tục (tồn kho, giá, kết quả tìm kiếm), nơi build lại toàn bộ site sẽ quá chậm.
• Công cụ đi kèm: một số tích hợp, như sitemap, không nhìn thấy các route động ở chế độ máy chủ (xem bên dưới).

Quy tắc thực tế: giữ các trang tiếp thị, bài viết blog và tài liệu ở dạng tĩnh, và chỉ render theo yêu cầu những route cần dữ liệu trực tiếp. Tài liệu của Astro cũng khuyến nghị như vậy: giữ chế độ tĩnh mặc định cho đến khi phần lớn trang của bạn cần render theo yêu cầu.

Làm sao thiết lập thẻ meta và URL canonical trong Astro?

Tạo một component SEO (thường gọi là BaseHead hoặc Seo) và đưa nó vào phần head của mọi layout. Nó nhận một tiêu đề, một mô tả, một hình ảnh tùy chọn và một cờ noindex tùy chọn, rồi xuất ra:

1. thẻ tiêu đề, duy nhất cho từng trang, với từ khóa chính gần phần đầu;
2. thẻ mô tả meta, được viết tay cho từng trang (đây là đoạn trích tìm kiếm của bạn);
3. thẻ canonical, được tạo thành URL tuyệt đối từ Astro.url.pathname và giá trị site trong cấu hình;
4. thẻ Open Graph và mạng xã hội (tiêu đề, mô tả, hình ảnh, URL) để hiển thị xem trước liên kết;
5. thẻ meta robots khi một trang phải nằm ngoài chỉ mục.

Trước hết, hãy đặt tùy chọn site trong astro.config.mjs: canonical, sitemap và các thẻ mạng xã hội đều phụ thuộc vào nó. Sau đó chọn một chính sách trailingSlash ('always' hoặc 'never') và giữ nhất quán, để /blog/post và /blog/post/ không bao giờ cạnh tranh nhau như hai phiên bản của cùng một trang. Chuỗi truy vấn nên được loại khỏi canonical để các tham số theo dõi không tạo ra bản trùng lặp.

Làm sao tạo sitemap và robots.txt với Astro?

Dùng gói tích hợp chính thức được ghi trong trang @astrojs/sitemap. Chạy npx astro add sitemap sẽ cài đặt và thêm nó vào cấu hình. Gói này cần tùy chọn site và, khi build, ghi một file sitemap-index.xml trỏ đến các file đánh số (sitemap-0.xml, rồi nhiều file hơn với các site lớn). Mỗi file chứa tối đa 45,000 mục theo mặc định, do tùy chọn entryLimit quyết định. Nếu bạn mới làm quen với định dạng này, mục thuật ngữ của chúng tôi về sitemap XML giải thích Google xử lý nó thế nào.

Ba thiết lập quan trọng cho SEO:

• filter: một hàm nhận URL của từng trang; trả về false cho trang cảm ơn, tìm kiếm nội bộ, bản nháp hoặc bất cứ thứ gì có noindex, để sitemap chỉ liệt kê các URL có thể lập chỉ mục.
• i18n: ánh xạ các thư mục ngôn ngữ của bạn sang mã ngôn ngữ và thêm thẻ hreflang thay thế vào mọi mục.
• customPages: thêm các URL mà gói tích hợp không tự phát hiện được.

Với robots.txt, một file tĩnh trong thư mục public là đủ cho đa số website. Nếu nội dung khác nhau giữa staging và production, hãy tạo nó từ một endpoint (src/pages/robots.txt.ts). Trong cả hai trường hợp, thêm dòng Sitemap trỏ đến sitemap-index.xml, và kiểm tra kết quả bằng công cụ kiểm tra robots.txt trước khi ra mắt. Kỹ thuật endpoint đó cũng tạo ra file llms.txt; hướng dẫn của chúng tôi về cách cài đặt file llms.txt trình bày nội dung của nó.

Làm sao xử lý hreflang và website đa ngôn ngữ trong Astro?

Định tuyến i18n tích hợp sẵn của Astro lo phần URL. Trong cấu hình, bạn khai báo defaultLocale và danh sách locale, rồi chọn xem ngôn ngữ mặc định có thêm tiền tố hay không (prefixDefaultLocale). Các helper như getRelativeLocaleUrl tạo liên kết theo ngôn ngữ, còn Astro.currentLocale cho mỗi trang biết nó đang ở ngôn ngữ nào.

Hướng dẫn định tuyến không đề cập đến thẻ hreflang trong phần head, nên bạn cần tự viết chúng trong component SEO: với mỗi trang, một liên kết thay thế cho mỗi phiên bản ngôn ngữ, cộng thêm x-default, tất cả đều là URL tuyệt đối, và mọi phiên bản phải liệt kê tất cả các phiên bản khác (liên kết đối ứng). Sinh chúng từ cùng danh sách locale với định tuyến sẽ tránh được lỗi phổ biến nhất, một liên kết thay thế trỏ đến trang không tồn tại. Để kiểm tra logic trên vài URL, công cụ tạo hreflang của chúng tôi xuất ra bộ thẻ đầy đủ cho một trang. Sau đó, bật tùy chọn i18n của sitemap như một tín hiệu thứ hai.

Hình ảnh và island ảnh hưởng thế nào đến tốc độ và Core Web Vitals?

Tốc độ là nơi Astro đạt được nhiều lợi thế nhất, và điều đó thể hiện trong Core Web Vitals. Hướng dẫn hình ảnh của Astro mô tả component Image từ astro:assets: nó tối ưu hóa hình ảnh cục bộ, chuyển đổi định dạng, xuất lazy loading và giải mã bất đồng bộ, và suy ra kích thước hình ảnh để tránh Cumulative Layout Shift. Thuộc tính alt là bắt buộc trên component này, điều này thực thi một quy tắc cơ bản của SEO hình ảnh. Component Picture đi xa hơn, phục vụ AVIF hoặc WebP với phương án dự phòng.

Hai thói quen hoàn thiện bức tranh. Giữ các hình ảnh cần tối ưu trong src (file trong public được phục vụ nguyên trạng, không xử lý gì). Và đừng lazy-load hình ảnh chính ở đầu trang: hãy để nó tải ngay (eager) để không làm chậm Largest Contentful Paint.

Kiến trúc island giúp kiểm soát JavaScript. Một component là HTML tĩnh cho đến khi bạn thêm một chỉ thị client: client:load hydrate nó ngay lập tức, client:idle khi trình duyệt rảnh, client:visible chỉ khi nó xuất hiện trong khung nhìn. Chỉ dành client:load cho những gì phải phản ứng ngay (menu, giỏ hàng) là cách đơn giản nhất để bảo vệ Interaction to Next Paint. Server island (server:defer) cho phép một khối cá nhân hóa tải sau trang đã cache mà không làm chậm nội dung chính.

Làm sao thêm dữ liệu có cấu trúc vào website Astro?

Astro không có tính năng schema tích hợp, nên bạn toàn quyền kiểm soát. Xây một object JavaScript cho từng loại trang (Article, Product, Organization, BreadcrumbList, FAQPage) và xuất nó trong một thẻ script kiểu application/ld+json, dùng chỉ thị set:html với JSON.stringify để JSON không bị escape. Lấy dữ liệu từ cùng frontmatter hoặc collection với trang hiển thị, để đánh dấu luôn khớp với những gì người dùng thấy, đó là yêu cầu trong nguyên tắc của Google về đánh dấu schema.

Để soạn JSON cho một loại trang mới, công cụ tạo schema miễn phí của chúng tôi cho bạn một khối khởi đầu hợp lệ, rồi bạn biến nó thành template. Sau mỗi thay đổi template, hãy kiểm tra một mẫu trang đã build bằng Rich Results Test của Google.

Làm sao xử lý chuyển hướng khi chuyển sang Astro?

Việc chuyển từ WordPress hoặc Next.js là thời điểm rủi ro nhất đối với một website Astro. Giữ mọi URL có lượt truy cập hoặc backlink, và ánh xạ từng URL còn lại sang tương đương gần nhất bằng chuyển hướng vĩnh viễn, như đã giải thích trong hướng dẫn về chuyển hướng SEO của chúng tôi.

Cấu hình của Astro chấp nhận một object redirects ánh xạ đường dẫn cũ sang mới. Với một adapter máy chủ, chúng trở thành chuyển hướng HTTP thật. Với bản build tĩnh thuần túy, Astro ghi một trang HTML có meta refresh thay thế, mà Google vẫn theo nhưng coi là tín hiệu yếu hơn một 301 phía máy chủ. Với website tĩnh, hãy khai báo chuyển hướng theo định dạng riêng của máy chủ lưu trữ (file _redirects trên Netlify hoặc Cloudflare Pages, file vercel.json trên Vercel) để bộ thu thập nhận được 301 thật.

Astro giúp gì cho SEO và GEO?

Việc được ChatGPT, Perplexity hoặc Gemini trích dẫn bắt đầu từ việc có thể đọc được. Nhiều bộ thu thập AI lấy HTML thô và không thực thi JavaScript, nên một website gửi toàn bộ văn bản trong phản hồi đầu tiên, như Astro làm theo mặc định, loại bỏ một rào cản mà các website render phía client vẫn còn. Tiêu đề rõ ràng, đoạn văn trả lời trước, dữ liệu có cấu trúc và file llms.txt sau đó giúp mỗi trang dễ được trích dẫn hơn.

Sau khi ra mắt, hãy đo lường thay vì đoán. Bảng điều khiển GEO và SEO của Sorank kết nối dữ liệu Search Console và lượt truy cập từ trợ lý AI của bạn, để bạn thấy website mới có giữ được vị trí không.

Chất lượng kỹ thuật chỉ có giá trị khi có nội dung để xếp hạng. Trình tạo bài viết blog AI của Sorank viết và đăng các bài viết tối ưu cho Google và trợ lý AI, đồng thời kết nối với một website tùy chỉnh như dự án Astro qua webhook.

Astro mang lại HTML có thể thu thập và nhanh theo mặc định; việc xếp hạng vẫn phụ thuộc vào thẻ head, sitemap, hreflang, dữ liệu có cấu trúc và chuyển hướng mà bạn thêm vào trên đó. Hãy thiết lập component SEO dùng chung và sitemap trước, rồi làm lần lượt theo bảng trên trước khi ra mắt.