Trang chủ
Blogspot Tips

Share code tạo URL từ tiêu đề bài viết chuẩn SEO cho blog/website

url chuẩn seo, code tạo url chuẩn seo, cách tạo url chuẩn seo, url chuẩn, url thân thiện, code trang url chuẩn seo, tạo trang url chuẩn seo, seo url
Vũ Văn Hoàn

Share Code làm Trang tạo URL chuẩn SEO cho blogspot và giải thích vì sao các bạn nên thường xuyên sử dụng công cụ này khi viết bài trên Blogger.

URL chuẩn SEO là một địa chỉ web (Uniform Resource Locator) được tối ưu hóa để cải thiện khả năng hiển thị trang web trong kết quả tìm kiếm của các công cụ tìm kiếm như Google, Bing, hoặc Yahoo. Mục tiêu là tạo ra các URL dễ đọc, mô tả chính xác nội dung của trang và chứa từ khóa quan trọng để tối ưu hóa vị trí tìm kiếm.

Vì sao cần URL thân thiện chuẩn SEO?

Mỗi tài nguyên trên Internet đều có một địa chỉ duy nhất gọi là URL. Với Blogspot, hệ thống thường tự sinh ra URL dựa trên tiêu đề bài viết. Tuy nhiên:

  • URL mặc định thường dài dòng hoặc có ký tự đặc biệt không tốt cho SEO.
  • Công cụ tìm kiếm (Google, Bing…) đánh giá cao URL ngắn gọn, chứa từ khóa chính và dễ đọc.
  • Người dùng cũng dễ ghi nhớ, dễ chia sẻ nếu URL rõ ràng.

Cách tối ưu URL chuẩn SEO

  • Bỏ dấu tiếng Việt: Đổi các ký tự có dấu thành không dấu (ví dụ: "đ" thành "d").
  • Dùng dấu gạch ngang: Dùng dấu - để nối các từ, không dùng khoảng trắng hay ký tự đặc biệt.
  • Ngắn gọn, chứa từ khóa: Giữ URL súc tích và chứa từ khóa chính của bài viết.

👉 Vì vậy, việc tối ưu URL (slug) là bước quan trọng giúp blog chuyên nghiệp hơn, cải thiện thứ hạng tìm kiếm.

Vì sao cần dùng Trang tạo URL chuẩn SEO trên blogspot?

Các bạn có thể nhìn hình dưới đây khi viết bài:

Như đã thấy mặc định của Blogspot nó sẽ không thể lấy url chuẩn theo tiêu đề như các bạn đã đặt, nó bị thiếu chữ 'blogspot' ở cuối link. Thậm chí là khi tiêu đề của các bạn có sử dụng chữ 'đ' là khi lấy liên kết cố định tự động nó sẽ mất luôn chữ đ. Ví du: Đu đưa nó sẽ thành u ua.

Chính vì lý do đó nên chúng ta phải làm Trang tạo URL chuẩn SEO cho blogspot để sử dụng làm công cụ riêng cho mình.

Code làm Trang tạo URL từ tiêu đề bài viết chuẩn SEO cho blogspot

Các bạn vào phần Trang > Tạo Trang mới > Chuyển sang Chế độ xem HTML và dán toàn bộ code dưới đây vào:

<style>
/* =======================
   URL SLUG GENERATOR &#8212; PRO THEME (Scoped)
   Chỉ áp dụng trong .url-card để không ảnh hưởng blog
======================= */
.url-card{
  --bg: #ffffff;
  --text: #101828;
  --muted: #667085;
  --border: #e5e7eb;
  --primary: #0866ff;
  --primary-2: #60a5fa;
  --ring: 0 0 0 6px rgba(8,102,255,.12);
  --radius: 14px;
  --shadow: 0 12px 30px rgba(2,6,23,.10), 0 2px 8px rgba(2,6,23,.06);

  position: relative;
  background:
    radial-gradient(120% 140% at 100% -20%, rgba(8,102,255,.06), transparent 50%),
    radial-gradient(120% 140% at -10% -40%, rgba(96,165,250,.10), transparent 50%),
    var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 22px;
  margin: 24px auto;
  max-width: 680px;
  box-shadow: var(--shadow);
  overflow: clip;
}

/* Accent bar */
.url-card::before{
  content: "";
  position: absolute; inset: 0 0 auto 0; height: 4px;
  background: linear-gradient(90deg, var(--primary), var(--primary-2));
}

/* Title */
.url-card h2{
  margin: 10px 0 14px;
  font-size: 22px; line-height: 1.25;
  color: var(--text);
  letter-spacing: .2px;
}

/* Inputs */
.url-card input{
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: #fff;
  color: var(--text);
  font-size: 16px;
  line-height: 1.45;
  transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
  outline: none;
  -webkit-appearance: none; appearance: none;
  box-shadow: inset 0 1px 0 rgba(2,6,23,.03);
}

.url-card input::placeholder{ color: #98a2b3; }

/* Spacing giữa 2 ô */
.url-card #title{ margin-top: 6px; }
.url-card #slug{ margin-top: 10px; }

/* Focus ring */
.url-card input:focus{
  border-color: var(--primary);
  box-shadow: var(--ring);
  background: #fff;
}

/* Readonly output look */
.url-card #slug[readonly]{
  background: linear-gradient(180deg, #ffffff, #f9fafb);
}

/* Buttons row */
.url-card .btns{
  display: flex; gap: 12px; margin-top: 14px;
}

/* Buttons */
.url-card button{
  flex: 1;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: linear-gradient(180deg, #ffffff, #f8fafc);
  color: var(--text);
  font-weight: 700;
  cursor: pointer;
  transition: transform .08s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease, opacity .18s ease;
  user-select: none;
}

.url-card button:hover{
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(2,6,23,.12);
}

.url-card #copyBtn{
  background: linear-gradient(180deg, rgba(8,102,255,.95), rgba(8,102,255,.80));
  color: #fff;
  border-color: rgba(8,102,255,.65);
}

.url-card #copyBtn:hover{
  box-shadow: 0 8px 22px rgba(8,102,255,.28);
}

.url-card #resetBtn{
  background: linear-gradient(180deg, #ffffff, #f3f4f6);
}

.url-card #resetBtn:hover{
  border-color: #d1d5db;
}

/* Subtle helper row (tuỳ chọn, nếu anh muốn thêm) */
.url-card .hint{
  margin-top: 8px;
  font-size: 13px;
  color: var(--muted);
  display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
}
.url-card .chip{
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 10px; border-radius: 999px;
  background: #f3f4f6; border: 1px solid #e5e7eb; color: var(--muted);
}
.url-card .chip b{ color: var(--text); }

/* Small screens */
@media (max-width: 480px){
  .url-card{ padding: 18px; border-radius: 12px; }
  .url-card h2{ font-size: 19px; }
}

/* Optional: dark mode thân thiện theo hệ thống */
@media (prefers-color-scheme: dark){
  .url-card{
    --bg: #0b1220;
    --text: #e5e7eb;
    --muted: #9aa4b2;
    --border: rgba(148,163,184,.24);
    background:
      radial-gradient(120% 140% at 100% -20%, rgba(8,102,255,.15), transparent 50%),
      radial-gradient(120% 140% at -10% -40%, rgba(96,165,250,.12), transparent 50%),
      var(--bg);
  }
  .url-card input{
    background: #0f172a; color: var(--text);
    border-color: var(--border);
  }
  .url-card #slug[readonly]{
    background: linear-gradient(180deg, #0f172a, #0b1322);
  }
  .url-card button{
    background: linear-gradient(180deg, #0f172a, #0b1322);
    border-color: var(--border);
    color: var(--text);
  }
  .url-card #resetBtn:hover{ border-color: rgba(148,163,184,.38); }
  .url-card .chip{ background: rgba(148,163,184,.12); border-color: rgba(148,163,184,.22); }
}
</style>


<div class="url-card">
  <h2>Tạo URL thân thiện chuẩn SEO</h2>
  <input id="title" type="text" placeholder="Nhập tiêu đề bài viết..." />
  <input id="slug" type="text" readonly placeholder="URL sẽ hiện ở đây..." />
  <div class="btns">
    <button id="copyBtn">Copy</button>
    <button id="resetBtn">Reset</button>
  </div>
</div>

<script>
function deburrVietnamese(str){
  return str.normalize("NFD").replace(/đ/g,"d").replace(/Đ/g,"D").replace(/[\u0300-\u036f]/g,"");
}
function toSlug(input){
  return deburrVietnamese(input)
    .toLowerCase()
    .replace(/[^a-z0-9\s-]/g,"") // Xóa ký tự đặc biệt
    .replace(/[\s_]+/g,"-") // Đổi khoảng trắng thành gạch ngang
    .replace(/-+/g,"-") // Thu gọn nhiều dấu gạch ngang liên tiếp
    .replace(/^-|-$/g,""); // Cắt bỏ gạch ngang thừa ở đầu/cuối
}
function updateSlug(){
  document.getElementById("slug").value = toSlug(document.getElementById("title").value);
}
document.getElementById("title").addEventListener("input", updateSlug);
document.getElementById("resetBtn").addEventListener("click", () => {
  document.getElementById("title").value="";
  document.getElementById("slug").value="";
});
document.getElementById("copyBtn").addEventListener("click", () => {
  var slug=document.getElementById("slug");
  slug.select();document.execCommand("copy");alert("Đã copy URL!");
});
</script>

Xuất bản Trang là xong thôi.

Lấy url chuẩn xong thì khi viết bài các bạn nhớ chuyển sang mục Liên kết cố định tùy chỉnh để chèn vào là chuẩn nhất nhé!

Nguyên tắc tối ưu URL

  • Ngắn gọn: Giới hạn dưới 75 ký tự để hiển thị đầy đủ trên kết quả tìm kiếm.
  • Chứa từ khóa: Đưa từ khóa chính xác của bài viết vào đường dẫn.
  • Định dạng tĩnh: Ưu tiên dùng URL tĩnh thay vì chứa các tham số rườm rà như ?id=123

Kết luận

Một URL thân thiện, ngắn gọn, chuẩn SEO không chỉ giúp Google đánh giá cao hơn mà còn làm blog của anh chuyên nghiệp, dễ chia sẻ và dễ ghi nhớ. Công cụ nhỏ này sẽ tiết kiệm thời gian, tránh lỗi chính tả, và đảm bảo mọi bài viết trên Blogspot đều có URL chuẩn SEO ngay từ đầu.

👉 Hãy thử áp dụng cho blog của mình và theo dõi sự khác biệt về thứ hạng tìm kiếm sau vài tuần nhé!

Đăng nhận xét