Một hướng dẫn thực tế dành cho các dự án Laravel + Inertia.js + Vue 3 chạy trong Docker với Nginx, tập trung vào SEO kỹ thuật (technical SEO) và hiệu năng.
1. Tổng quan kiến trúc
Một stack phổ biến hiện nay:
- Backend: Laravel
- Frontend: Vue 3 thông qua Inertia.js (SPA-like)
- Web server: Nginx
- Môi trường: Docker / Docker Compose
Vấn đề lớn nhất với SEO trong mô hình này:
- Nội dung render phía client (CSR)
- Bot Google có thể crawl được JS nhưng chậm và không ổn định
- Thiếu metadata động
- TTFB cao nếu cấu hình Docker/Nginx chưa tối ưu
Mục tiêu:
Làm cho website crawl được – index đúng – load nhanh – metadata đầy đủ.
2. Hiểu đúng về SEO với Inertia.js
Inertia.js không phải SPA thuần, mà là:
- Server vẫn trả HTML gốc
- Vue render phía client
Tuy nhiên:
- Nội dung chính vẫn xuất hiện sau khi JS chạy
- SEO chấp nhận được, nhưng chưa tối ưu nếu không cấu hình thêm
3. Thiết lập metadata động (cực kỳ quan trọng)
3.1 Dùng Head API của Inertia
import { Head } from '@inertiajs/vue3';<template>
<Head>
<title>{{ title }}</title>
<meta name="description" :content="description" />
<meta property="og:title" :content="title" />
<meta property="og:description" :content="description" />
</Head>
</template>3.2 Truyền dữ liệu từ Laravel Controller
return Inertia::render('Post/Show', [
'title' => $post->title,
'description' => Str::limit($post->content, 160),
]);4. Render HTML ban đầu đầy đủ hơn (Preload data)
Kích hoạt SSR (Server Side Rendering) cho Inertia
Đây là bước giúp SEO nhảy vọt.
Cài SSR (tham khảo chi tiết ở phần 1)
npm install @inertiajs/serverphp artisan inertia:start-ssrLaravel sẽ:
- Render HTML phía server
- Bot Google thấy ngay nội dung
Lợi ích
| Tiêu chí | Không SSR | Có SSR |
|---|---|---|
| Index | Chậm | Nhanh |
| Nội dung | Phụ thuộc JS | Có sẵn |
| SEO score | Trung bình | Cao |
5. Cấu hình Nginx chuẩn SEO + hiệu năng
5.1 Bật gzip / brotli
gzip on;
gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript;5.2 Cache static files
location ~* \.(js|css|png|jpg|jpeg|gif|svg|webp)$ {
expires 30d;
access_log off;
}5.3 HTTP Headers SEO
add_header X-Content-Type-Options nosniff;
add_header X-Frame-Options SAMEORIGIN;
add_header X-XSS-Protection "1; mode=block";6. Docker tối ưu cho SEO (TTFB thấp)
6.1 Sử dụng PHP-FPM production
FROM php:8.2-fpm-alpine6.2 OPcache
opcache.enable=1
opcache.memory_consumption=256
opcache.max_accelerated_files=200006.3 Docker Compose network nội bộ
Tránh expose không cần thiết, giảm latency.
7. Sitemap & robots.txt tự động trong Laravel
7.1 Cài package
composer require spatie/laravel-sitemap7.2 Tạo sitemap
SitemapGenerator::create(config('app.url'))
->writeToFile(public_path('sitemap.xml'));7.3 robots.txt
User-agent: *
Allow: /
Sitemap: https://domain.com/sitemap.xml8. Schema.org (Rich snippets)
Thêm JSON-LD trong Inertia Head:
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Article",
"headline": "{{ title }}"
}
</script>9. Kiểm tra SEO
Công cụ nên dùng
- Google Search Console
- PageSpeed Insights
- Lighthouse
- Screaming Frog
KPI nên theo dõi
- LCP < 2.5s
- CLS < 0.1
- TTFB < 500ms
- Index coverage
10. Checklist nhanh
✅ Inertia Head metadata
✅ SSR enabled
✅ Gzip + cache static
✅ Sitemap.xml
✅ robots.txt
✅ JSON-LD
✅ Docker optimized
✅ OPcache
11. Kết luận
Laravel + Inertia.js + Vue 3 hoàn toàn SEO tốt nếu:
- Có SSR
- Metadata đúng
- Server nhanh
- Cấu hình Nginx & Docker chuẩn
SEO không chỉ là content – mà là kiến trúc hệ thống.
Nếu bạn đang chạy dự án Laravel Inertia trên Docker và muốn audit SEO chuyên sâu (TTFB, crawlability, SSR setup), bạn có thể mở rộng thêm:
- Redis cache
- Full page cache cho bot
- Edge caching (Cloudflare)
- Prerender.io cho bot
Chúc bạn tối ưu SEO thành công
