Thời đại công nghệ số, mỗi doanh nghiệp, cần xây dựng website để tiếp cận khách hàng hiệu quả. SEO là phương pháp tổng hợp nhiều yếu tố giúp đưa website lên top đầu, tăng cơ hội tiếp cận người dùng. Yếu tố Slug quan trọng nhưng khá lạ lẫm với nhiều SEOer mới.
Để thực hiện chiến lược SEO hiệu quả, bạn cần hiểu Slug là gì? Cách để tối ưu hóa Slug chuẩn SEO như thế nào? Bài viết dưới đây sẽ giúp bạn đọc hiểu và làm rõ thuật ngữ quan trọng này.
Mục lục
Slug là gì?
Slug là một chuỗi ký tự được sử dụng để đại diện cho một phần của URL hoặc tên của một đối tượng trong môi trường web. Slug thường được tạo ra từ tiêu đề hoặc tên của đối tượng, nhưng được chuẩn hóa để chứa chỉ các ký tự không dấu, số, và gạch nối (“-“) để dễ đọc và thân thiện với máy chủ tìm kiếm. Nói cách khác, Slug thường được sử dụng trong các URL để thay thế cho các ký tự không phải ASCII, khoảng trắng, hoặc các ký tự đặc biệt khác mà không tương thích với các yêu cầu của URL. Sử dụng slug giúp làm cho URL dễ đọc, hiểu và thân thiện với công cụ tìm kiếm.
Ví dụ với bài viết: “Lập trình trang web chuẩn SEO với Slug”
Slug tương ứng sẽ là: “Lap-trinh-trang-web-chuan-SEO-voi-Slug”
Slug chính là một trong những yếu tố quan trọng góp phần làm cho website của bạn chuẩn SEO hơn, được các công cụ tìm kiếm đánh giá để đưa website của bạn vào bảng xếp hạng. Khi người tìm kiếm một từ khóa, thông thường họ sẽ đọc Slug được hiển thị trước tiên để hiểu về nội dung bài viết rồi sau đó mới dành thời gian tìm hiểu kỹ hơn về nội dung trang web.
Những trang danh mục sản phẩm, trang chủ đề, trang chi tiết của một sản phẩm, trang chi tiết của một bài viết, … rất cần một slug chuẩn và tốt nhất có chứa từ khóa. Điều đó, ngoài thể hiện sự chuyên nghiệp của trang web, slug còn giúp người dùng xác định được nội dung chính của trang trước khi người dùng đưa ra quyết định là có nên truy cập trang web này hay không.
Chính vì những lý do trên, Slug là một yếu tố vô cùng quan trọng và mọi người thường cố gắng tối ưu Slug cho các bài viết trên website của mình. Từ đó, URL được tạo ra thân thiện hơn với SEO và giúp cho website phát triển hơn.
Với một lập trình viên nói chung hay một sinh viên CNTT của FPT Polytechnic nói riêng thì đây là một kỹ thuật không thể nào bỏ qua. Hãy cùng tìm hiểu các bước thực hiện với hướng dẫn sau đây để áp dụng vào dự án assignment để mang tính chuyên nghiệp và thực tế hơn.
Với Lập trình viên Front-End
Để tạo một slug tự động từ một chuỗi văn bản, bạn cần thực hiện một loạt các bước để chuẩn hóa và chuyển đổi chuỗi ban đầu thành một slug thân thiện với URL. Dưới đây là một ví dụ cách bạn có thể thực hiện điều này bằng JavaScript:
function createSlug(text) {
// Chuyển đổi chuỗi sang chữ thường
let slug = text.toLowerCase();
// Loại bỏ các ký tự không phải chữ cái, số, hoặc dấu gạch nối
slug = slug.replace(/[^\w\s-]/g, ”);
// Thay thế khoảng trắng bằng dấu gạch nối
slug = slug.replace(/\s+/g, ‘-‘);
// Loại bỏ các dấu gạch nối liên tiếp
slug = slug.replace(/-+/g, ‘-‘);
// Loại bỏ các dấu gạch nối từ đầu và cuối chuỗi
slug = slug.replace(/^-+|-+$/g, ”);
return slug;
}
// Sử dụng hàm để tạo slug từ chuỗi văn bản
const originalText = “Lập trình trang web chuẩn SEO với Slug”;
const slug = createSlug(originalText);
console.log(slug); // In ra: “Lap-trinh-trang-web-chuan-SEO-voi-Slug”
Trong ví dụ trên:
toLowerCase(): Chuyển đổi chuỗi sang chữ thường.
replace(/[^\w\s-]/g, ”): Loại bỏ các ký tự không phải chữ cái, số, hoặc dấu gạch nối.
replace(/\s+/g, ‘-‘): Thay thế khoảng trắng bằng dấu gạch nối.
replace(/-+/g, ‘-‘): Loại bỏ các dấu gạch nối liên tiếp.
replace(/^-+|-+$/g, ”): Loại bỏ các dấu gạch nối từ đầu và cuối chuỗi.
Bạn có thể tùy chỉnh và mở rộng hàm này tùy thuộc vào yêu cầu cụ thể của bạn, ví dụ như thêm quy tắc định rõ cho việc xử lý các ngôn ngữ khác nhau hoặc thêm các quy tắc tùy chỉnh khác.
Qua hàm này, lập trình viên có thể sử dụng để tạo những slug thông qua các form tương tác thêm dữ liệu ở phần Front-End
Với một lập trình viên Back-End
Một trong những ngôn ngữ lập trình backend cơ bản dễ tiếp cận đó là ngôn ngữ lập trình PHP, nên những ví dụ sau đây sẽ được minh họa bằng ngôn ngữ lập trình php và cơ sở dữ liệu là mySQL.
Hàm chuyển đổi Slug được lập trình bằng PHP như sau:
function createSlug($text) {
// Chuyển đổi chuỗi sang chữ thường
$slug = strtolower($text);
// Loại bỏ các ký tự không phải chữ cái, số, hoặc dấu gạch nối
$slug = preg_replace(‘/[^\w\s-]/’, ”, $slug);
// Thay thế khoảng trắng bằng dấu gạch nối
$slug = preg_replace(‘/\s+/’, ‘-‘, $slug);
// Loại bỏ các dấu gạch nối liên tiếp
$slug = preg_replace(‘/-+/’, ‘-‘, $slug);
// Loại bỏ các dấu gạch nối từ đầu và cuối chuỗi
$slug = trim($slug, ‘-‘);
return $slug;
}
// Sử dụng hàm để tạo slug từ chuỗi văn bản
$originalText = “Lập trình trang web chuẩn SEO với Slug”;
$slug = createSlug($originalText);
echo $slug; // In ra: “Lap-trinh-trang-web-chuan-SEO-voi-Slug”
Trong ví dụ trên:
strtolower(): Chuyển đổi chuỗi sang chữ thường.
preg_replace(‘/[^\w\s-]/’, ”, $slug): Loại bỏ các ký tự không phải chữ cái, số, hoặc dấu gạch nối.
preg_replace(‘/\s+/’, ‘-‘, $slug): Thay thế khoảng trắng bằng dấu gạch nối.
preg_replace(‘/-+/’, ‘-‘, $slug): Loại bỏ các dấu gạch nối liên tiếp.
trim($slug, ‘-‘): Loại bỏ các dấu gạch nối từ đầu và cuối chuỗi.
Nhớ rằng bạn có thể điều chỉnh hàm này tùy thuộc vào yêu cầu cụ thể của bạn.
Tạo và quản lý Slug khi lập trình với Cơ sở dữ liệu
- Tạo và lưu Slug vào database
Khi bạn tạo một bản ghi mới trong cơ sở dữ liệu, bạn cũng cần tạo và lưu slug tương ứng. Sử dụng hàm tạo slug để chuyển đổi chuỗi tương ứng.
// Kết nối đến cơ sở dữ liệu
$pdo = new PDO(“mysql:host=localhost;dbname=your_database”, “username”, “password”);
// Chuỗi văn bản từ form hoặc từ nơi khác
$title = “Lập trình web chuẩn SEO với Slug”;
// Tạo slug từ tiêu đề thông qua hàm tạo Slug như trên
$slug = createSlug($title);
// Thêm bản ghi mới vào cơ sở dữ liệu
$stmt = $pdo->prepare(“INSERT INTO your_table (title, slug) VALUES (?, ?)”);
$stmt->execute([$title, $slug]);
- Truy vấn CSDL với Slug
Trước khi truy vấn CSDL với Slug, bạn phải GET Slug từ URL
Ví dụ: Bạn đã $_GET một slug như sau:
$requestedSlug = “Lap-trinh-trang-web-chuan-SEO-voi-Slug”;
// Truy vấn dữ liệu từ cơ sở dữ liệu bằng slug
$stmt = $pdo->prepare(“SELECT * FROM your_table WHERE slug = ?”);
$stmt->execute([$requestedSlug]);
// Lấy kết quả
$result = $stmt->fetch(PDO::FETCH_ASSOC);
if ($result) {
// Có bản ghi có slug tương ứng
// Xử lý dữ liệu ở đây
} else {
// Không tìm thấy bản ghi với slug cần tìm
// Xử lý trường hợp này (ví dụ: hiển thị trang 404)
}
- Xử lý trùng lặp Slug
Để tránh trùng lặp slug, bạn có thể thêm một số quy tắc hoặc kiểm tra trước khi lưu vào cơ sở dữ liệu. Ví dụ, nếu slug đã tồn tại, bạn có thể thêm một số số thứ tự hoặc thêm một tiền tố vào slug hoặc có thể thêm id vào slug.
function createUniqueSlug($pdo, $text, $counter = 0) {
$slug = createSlug($text);
if ($counter > 0) {
$slug .= “-” . $counter;
}
$stmt = $pdo->prepare(“SELECT COUNT(*) FROM your_table WHERE slug = ?”);
$stmt->execute([$slug]);
$count = $stmt->fetchColumn();
if ($count > 0) {
// Nếu slug đã tồn tại, thử lại với một số thứ tự mới
return createUniqueSlug($pdo, $text, $counter + 1);
}
return $slug;
}
// Kết nối đến cơ sở dữ liệu
$pdo = new PDO(“mysql:host=localhost;dbname=your_database”, “username”, “password”);
// Chuỗi văn bản từ form hoặc từ nơi khác
$title = “Bài viết Mới Nhất về Công Nghệ”;
// Tạo slug và kiểm tra trùng lặp
$uniqueSlug = createUniqueSlug($pdo, $title);
// Thêm bản ghi mới vào cơ sở dữ liệu
$stmt = $pdo->prepare(“INSERT INTO your_table (title, slug) VALUES (?, ?)”);
$stmt->execute([$title, $uniqueSlug]);
Cách lấy Slug từ URL
- Sử dụng $_SERVER và explode:
$url = $_SERVER[‘REQUEST_URI’];
$segments = explode(‘/’, rtrim($url, ‘/’));
$slug = end($segments);
// Kiểm tra nếu slug có giá trị
if (!empty($slug)) {
echo $slug;
} else {
// Xử lý khi không có slug
}
- Sử dụng $_GET
$slug = isset($_GET[‘slug’]) ? $_GET[‘slug’] : ”;
// Kiểm tra nếu slug có giá trị
if (!empty($slug)) {
echo $slug;
} else {
// Xử lý khi không có slug
}
- Sử dụng parse_url và pathinfo
$url = $_SERVER[‘REQUEST_URI’];
$path = parse_url($url, PHP_URL_PATH);
$slug = pathinfo($path, PATHINFO_BASENAME);
// Kiểm tra nếu slug có giá trị
if (!empty($slug)) {
echo $slug;
} else {
// Xử lý khi không có slug
}
- Với nhiều Slug trên URL
$url = $_SERVER[‘REQUEST_URI’];
$segments = explode(‘/’, rtrim($url, ‘/’));
$slug1 = isset($segments[1]) ? $segments[1] : ”;
$slug2 = isset($segments[2]) ? $segments[2] : ”;
// Kiểm tra nếu các slug có giá trị
if (!empty($slug1) && !empty($slug2)) {
echo $slug1 . ‘, ‘ . $slug2;
} else {
// Xử lý khi không có đủ số lượng slug
}
Hoặc
$url = $_SERVER[‘REQUEST_URI’];
$path = parse_url($url, PHP_URL_PATH);
$pathInfo = pathinfo($path);
$slug1 = isset($pathInfo[‘dirname’]) ? trim($pathInfo[‘dirname’], ‘/’) : ”;
$slug2 = isset($pathInfo[‘filename’]) ? $pathInfo[‘filename’] : ”;
// Kiểm tra nếu các slug có giá trị
if (!empty($slug1) && !empty($slug2)) {
echo $slug1 . ‘, ‘ . $slug2;
} else {
// Xử lý khi không có đủ số lượng slug
}
Thông qua những chia sẻ trên, hi vọng có thể giúp bạn nắm được Slug là gì, cũng như sự quan trọng của Slug trong lập trình trang web chuẩn SEO. Nó chính là một phần không thể thiếu của URL, tối ưu SEO với Slug sẽ giúp website của bạn mang tính chuyên nghiệp, cải thiện chất lượng và mang đến hiệu quả cao cho website của bạn.
Giảng viên Trần Bá Hộ
Bộ môn Công nghệ thông tin
FPT Polytechnic TP HCM
