PPHP

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

  • bydang cao
  • 12 March, 2026
  • 37 views
  • 3 minute read
0
Shares
0
0
0
0
Table of Contents Hide
  1. 1. Tổng quan kiến trúc
  2. 2. Hiểu đúng về SEO với Inertia.js
  3. 3. Thiết lập metadata động (cực kỳ quan trọng)
    1. 3.1 Dùng Head API của Inertia
    2. 3.2 Truyền dữ liệu từ Laravel Controller
  4. 4. Render HTML ban đầu đầy đủ hơn (Preload data)
    1. Kích hoạt SSR (Server Side Rendering) cho Inertia
  5. 5. Cấu hình Nginx chuẩn SEO + hiệu năng
    1. 5.1 Bật gzip / brotli
    2. 5.2 Cache static files
    3. 5.3 HTTP Headers SEO
  6. 6. Docker tối ưu cho SEO (TTFB thấp)
    1. 6.1 Sử dụng PHP-FPM production
    2. 6.2 OPcache
    3. 6.3 Docker Compose network nội bộ
  7. 7. Sitemap & robots.txt tự động trong Laravel
    1. 7.1 Cài package
    2. 7.2 Tạo sitemap
    3. 7.3 robots.txt
  8. 8. Schema.org (Rich snippets)
  9. 9. Kiểm tra SEO
    1. Công cụ nên dùng
    2. KPI nên theo dõi
  10. 10. Checklist nhanh
  11. 11. Kết luận

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/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 SSRCó SSR
IndexChậmNhanh
Nội dungPhụ thuộc JSCó sẵn
SEO scoreTrung bìnhCao

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:

<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

0 Shares:
Share 0
Tweet 0
Share 0

2 comments

  2. An outstanding share! I’ve just forsarded this ohto a coworkjer whoo waas conducting a
    litftle hommework oon this. Andd hee actually ought mme
    breakfqst because I foud itt foor him… lol. So llet mee reword this….
    Thanos ffor thhe meal!! Butt yeah, thanks forr splending some time to discuss this issuhe hsre onn youur webb page.

    Here iss mmy webb site :: redwap.pro

    Reply
Leave a Reply

Your email address will not be published. Required fields are marked *

— Previous article

SQL Partitioning: "Chia Để Trị" Dữ Liệu Khổng Lồ

Next article —

Tối ưu Slow Query PostgreSQL: Khi một dòng code cứu cả hệ thống

You May Also Like
Read More
  • 7 minute read
PPHP

Có gì mới ở PHP 8.3?

Table of Contents Hide 1. Typed Class Constants2. Dynamic class constant fetch3. json_validate() function4. #[\Override] attribute5. Deep Cloning of readonly Properties6. Randomizer::getBytesFromString() method7. Randomizer::getFloat() and…