Chương 17

🔍 Hướng Dẫn SEO & Nén Ảnh WebP

Meta tags, sitemap, schema, Google Search Console & Tối ưu hình ảnh chuẩn Google

🎥 Video Hướng Dẫn: Tại Sao Website Bạn Chậm? Lỗi SEO Ảnh Mà Không Ai Nói

✅ Các Tính Năng SEO Đã Hỗ Trợ

Website của bạn đã được cấu hình sẵn với các tính năng SEO hiện đại nhất:

Meta Tags

Title, Description, Keywords, Robots, Open Graph, Twitter Cards trên tất cả trang

Canonical URLs

Tránh duplicate content và nâng cao thứ hạng liên kết

Schema.org

Product, Article, Organization, BreadcrumbList structured data

XML Sitemap

Tự động generate sitemap từ database, cập nhật real-time

Robots.txt

Hướng dẫn search engines crawl website hiệu quả

SEO Ảnh & WebP

Cắt, xoay, lật, nén WebP và chỉnh sửa thẻ ALT/Title ảnh chuẩn SEO

🖼️ Quy Trình SEO Ảnh & Nén WebP Trong Admin

Thực hiện các bước sau tại Admin Panel → Thư viện Media để nén dung lượng ảnh và tối ưu hiển thị trên Google Image:

1
Mở Chỉnh Sửa Ảnh: Rê chuột vào ảnh bất kỳ trong Thư viện Media và nhấp nút Sửa Ảnh & SEO (icon gậy phép).
2
Tối Ưu Tên File (Slugify): Nhấp nút Slugify để chuyển tên file thành dạng đường dẫn không dấu (Ví dụ: ao-thun-nam.webp).
3
Điền Thẻ ALT & Tiêu Đề: Nhập mô tả ảnh vào ô Thẻ ALT (Alt Text) để Google hiểu rõ nội dung bức ảnh.
4
Nén & Chuyển Sang WebP: Nhấp nút Nén & Chuyển sang WebP. Trình duyệt sẽ tự nén giảm 70-80% dung lượng ảnh giúp tăng tốc độ tải trang lên cực đại.
5
Cắt / Xoay / Lật Ảnh: Chuyển sang Tab 2 "Cắt & Chỉnh Sửa Ảnh" nếu muốn xoay ảnh, lật hoặc cắt theo tỉ lệ 1:1, 4:3, 16:9.

🚀 Bắt Đầu Nhanh

⏱️ Chỉ mất 5 phút để hoàn thành setup SEO!

Bước 1: Cập nhật Admin Settings

Truy cập Admin Panel → Settings và cập nhật thông tin website:

site_title = "Tên Website Của Bạn" site_description = "Mô tả ngắn gọn, 120-160 ký tự" contact_phone = "0987654321" contact_email = "email@yourdomain.com" contact_address = "Địa chỉ của công ty" shop_name = "Tên cửa hàng"

Bước 2: Kiểm Tra Sitemap & Robots

Truy cập các URL sau để xác nhận đã hoạt động:

  • Sitemap: https://yourdomain.com/sitemap.xml
  • Robots: https://yourdomain.com/robots.txt

Bước 3: Đăng Ký Với Search Engines

  • Google Search Console: https://search.google.com/search-console
    • Add property → URL prefix → https://yourdomain.com
    • Verify ownership
    • Submit sitemap: /sitemap.xml
  • Bing Webmaster: https://www.bing.com/webmasters
  • Yandex Webmaster: https://webmaster.yandex.com

⚙️ Cấu Hình Trong Admin Panel

Settings Bắt Buộc

Setting Key Mô Tả Ví Dụ
site_title Tên website hiển thị trong browser tab "Nước Hoa Online - Chính Hãng"
site_description Mô tả hiển thị trong Google (120-160 ký tự) "Bán nước hoa chính hãng giá rẻ..."
contact_phone Số điện thoại liên hệ "0988123456"
contact_email Email công ty "support@example.com"
contact_address Địa chỉ công ty "123 Nguyễn Huệ, Q.1, HCM"

🏷️ Meta Tags & Open Graph

Các Meta Tags Tự Động Render

Website của bạn tự động render các meta tags sau trên mỗi trang:

<title>Tiêu đề trang (50-60 ký tự)</title> <meta name="description" content="Mô tả (120-160 ký tự)"> <meta name="keywords" content="từ khóa, tối ưu"> <meta name="robots" content="index, follow"> <meta property="og:title" content="..."> <meta property="og:description" content="..."> <meta property="og:image" content="..."> <meta name="twitter:card" content="summary_large_image"> <link rel="canonical" href="...">
Mẹo: Google khuyến khích meta description 120-160 ký tự, title 50-60 ký tự để hiển thị tốt trên kết quả tìm kiếm.

Open Graph & Facebook Sharing

Khi bạn share link website trên Facebook, Messenger, LinkedIn:

  • ✅ Tiêu đề sản phẩm/bài viết được hiển thị
  • ✅ Mô tả sản phẩm được tự động lấy
  • ✅ Hình ảnh sản phẩm được hiển thị đúp
  • ✅ URL được tối ưu

📊 Structured Data (Schema.org)

Product Schema (Trang Sản Phẩm)

Mỗi trang sản phẩm tự động có Product Schema bao gồm:

  • Tên sản phẩm
  • Mô tả sản phẩm
  • Hình ảnh sản phẩm
  • Giá và tiền tệ (VND)
  • Trạng thái còn hàng
  • Rating & số lượng review (nếu có)
Lưu ý: Google sẽ hiển thị giá và trạng thái còn hàng trực tiếp trong kết quả tìm kiếm nếu schema đúng.

Article Schema (Trang Bài Viết)

Mỗi bài viết blog có Article Schema với:

  • Tiêu đề bài viết
  • Mô tả bài viết
  • Thumbnail bài viết
  • Ngày tạo & ngày cập nhật
  • Thông tin tác giả & xuất bản

Organization Schema (Trang Chủ)

Trang chủ có Organization Schema với thông tin công ty từ settings:

  • Tên công ty
  • URL website
  • Logo
  • Mô tả công ty
  • Số điện thoại & email
  • Địa chỉ

🗺️ Sitemap & Robots.txt

XML Sitemap

URL: https://yourdomain.com/sitemap.xml

Sitemap được tự động generate và bao gồm:

  • Trang Chủ - Priority: 1.0, Daily
  • Sản Phẩm - Priority: 0.8, Weekly
  • Bài Viết - Priority: 0.6, Monthly
  • Trang Tĩnh - Priority: 0.7, Weekly
Mẹo: Sitemap tự động cập nhật khi bạn thêm/sửa sản phẩm hoặc bài viết. Không cần phải cập nhật thủ công!

Robots.txt

URL: https://yourdomain.com/robots.txt

File robots.txt hướng dẫn search engines:

  • ✅ Cho phép crawl: Trang chủ, sản phẩm, bài viết
  • ❌ Chặn crawl: /admin/, /api/, /database/, /vendor/
  • ❌ Block các bad bots: MJ12bot, AhrefsBot, SemrushBot, DotBot
  • ⏱️ Crawl delay: 1 giây (công cụ tìm kiếm sẽ chờ 1 giây giữa các request)

💡 Best Practices - Tối Ưu SEO

1️⃣ Tối Ưu Tên Sản Phẩm

❌ Sai: "Điện thoại" (quá ngắn, chung chung)
✅ Đúng: "Điện thoại iPhone 15 Pro Max 256GB chính hãng VN/A"

2️⃣ Tối Ưu Mô Tả Sản Phẩm

  • Độ dài: 120-160 ký tự cho meta description
  • Chứa từ khóa chính (nhưng tự nhiên, không spam)
  • Nêu rõ lợi ích sản phẩm
  • Thêm call-to-action: "Mua ngay", "Khám phá"
Ví dụ: "Mua iPhone 15 Pro Max chính hãng 256GB giá rẻ nhất TP.HCM. Bảo hành 12 tháng, giao hàng nhanh. Khám phá ngay!"

3️⃣ Tối Ưu Bài Viết Blog

  • 📝 Tiêu đề: 50-60 ký tự, có từ khóa
  • 📝 Mô tả: 120-160 ký tự, tóm tắt nội dung
  • 📝 Nội dung: Ít nhất 300-500 từ
  • 📝 Cấu trúc: Sử dụng H2, H3, H4 hợp lý
  • 📝 Hình ảnh: Thêm thumbnail chất lượng cao
  • 📝 Internal Links: Link bài viết liên quan

4️⃣ Tối Ưu Hình Ảnh

  • 🖼️ Nén hình ảnh: Sử dụng công cụ nén WebP trong Thư viện Media Admin
  • 🖼️ Kích thước: 1200x630px cho OG images, 600x600px cho products
  • 🖼️ Format: WebP (tốt nhất), JPG (dự phòng), PNG (nếu cần transparency)
  • 🖼️ File name: "iphone-15-pro-max.webp" (không: "IMG_123.jpg")

5️⃣ Internal Linking

Liên kết nội bộ giúp tăng thời gian ở website, phân tán link juice và cải thiện crawlability.

Ví dụ: Trong bài viết về "Cách chọn điện thoại", thêm link tới sản phẩm "iPhone 15 Pro Max" hoặc bài viết liên quan "So sánh iPhone vs Samsung".

6️⃣ Mobile-First Optimization

  • 📱 Website phải responsive trên tất cả thiết bị
  • 📱 Font size: Ít nhất 16px trên mobile
  • 📱 Button: Ít nhất 48x48px để dễ click
  • 📱 Load time: Dưới 3 giây

🔍 Công Cụ Kiểm Tra SEO Miễn Phí

1. Google PageSpeed Insights

URL: https://pagespeed.web.dev

Kiểm tra tốc độ tải trang, SEO score và gợi ý cải thiện hiệu suất.

2. Google Search Console

URL: https://search.google.com/search-console

Theo dõi lượt hiển thị, click từ khóa top, lỗi indexing và submit sitemap.

3. Rich Results Test

URL: https://search.google.com/test/rich-results

Validate dữ liệu cấu trúc Schema và xem trước hiển thị rich snippet.

🐛 Xử Lý Sự Cố

❌ Sitemap không load (404 error)

Nguyên nhân: File sitemap.php không tìm thấy hoặc database connection lỗi.

Giải pháp: Kiểm tra file /sitemap.php và kết nối database trong /database/db.php.

❌ Meta tags không hiển thị

Nguyên nhân: SEO functions không được require hoặc lỗi syntax.

Giải pháp: View Source trang (Ctrl+U) và kiểm tra /classfunc/seo.php.

✅ Hoàn Thành Chương 17!

Bạn đã hoàn thành chương này. Tiếp theo hãy xem hướng dẫn cho phần 18. Thuộc tính & Biến thể.

Tiếp theo: 18. Thuộc tính & Biến thể

🚀 Cần hỗ trợ hoặc không có thời gian tự cài đặt?

Đội ngũ kỹ thuật AILADI sẵn sàng cài đặt trọn gói nhanh chóng, hoặc giải đáp mọi thắc mắc 24/7 qua AI Chatbot.