Tối ưu SEO cho Laravel Inertia.js với Vue 3 + Docker + Nginx (Phần 2)

dang cao — Thu, 12 Mar 2026 07:35:09 +0000

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';

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/server

php artisan inertia:start-ssr

Laravel 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-alpine

6.2 OPcache

opcache.enable=1
opcache.memory_consumption=256
opcache.max_accelerated_files=20000

6.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-sitemap

7.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.xml

8. Schema.org (Rich snippets)

Thêm JSON-LD trong Inertia Head:

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

The post Tối ưu SEO cho Laravel Inertia.js với Vue 3 + Docker + Nginx (Phần 2) appeared first on Tomoshare.

dang cao, Author at Tomoshare