Thư viện

Trải nghiệm

Thứ Tư, tháng 9 26, 2012

Tối ưu hóa blogspot từ a đến Z

Hướng dẫn cách tối ưu hóa cho Blogspot từ đơn giản đến phức tạp giúp blogspot Seo tốt và chuyên nghiệp hơn.

Chia sẻ:
Tối ưu hóa blogspot từ a đến Z
Blogspot là một mã nguồn mở miễn phí được cung cấp bởi google được rất nhiều người tin dùng bởi: Dễ sử dụng, tốc độ nhanh, tùy chỉnh được code, đặc biệt từ năm 2012 khi google cập nhật seo giúp khả năng seo của blogger cực tốt … Tuy nhiên còn một số tùy chỉnh chúng ta vẫn phải thực hiện thủ công để đạt hiệu quả cao nhất.
Sau đây, Namkna sẽ hướng dẫn các bạn cách tối ưu hóa cho Blogspot từ A -> Z, hy vọng rằng sau bài viết này sẽ giúp mọi người thực hiện tối ưu hóa tốt nhất cho blog của bạn..
- Chọn template.
- Chỉnh sửa các thẻ meta và tiêu đề bài viết.
- Chỉnh URL thân thiện.
- Tạo Breadcrumbs cho Blogspot.
- Tạo tin tức liên quan cho từng bài viết.
- Tạo emoticon khi comment.
- Tạo sitemap cho Blogspot.

1. Chọn template.

Template là một trong những yếu tố quan trọng khi sử dụng Blogspot, một template tốt không những đẹp mà còn phải có cấu trúc hợp lý. Như thế sẽ giúp quá trình SEO của các bạn dễ dàng hơn rất nhiều.

Theo kinh nghiệm cá nhân của SEO Kool, các bạn nên chọn loại template có 2 cột, bên trái là bài viết, bên phải là các widget : bài viết mới, comment mới, … Đây là dạng template thông dụng và thân thiện với người dùng.

Ngoài ra còn một yếu tố cũng quan trọng không kém, đó là cấu trúc thẻ heading. Đa phần các temp của Blogspot sau khi cài đặt chỉ có một thẻ

2. Sửa các thẻ <meta> và Tiêu dề bài viết.

a. Thêm <meta> và <title>
- Để chỉnh sửa các thẻ meta keyword và meta description các bạn xem bài viết sau: Tối ưu thẻ Title trong Blogspot cho Search Engine
b. Thêm mô tả cho link của tiêu đề.
Khi đưa chuột vào tiêu đề bài viết, bạn sẽ thấy hiện lên phần mô tả cho đường link đó. Để làm được điều này các bạn làm như sau :
- Đăng nhập vào blog => Mẫu => Chỉnh sửa HTML => Tiếp tục => Mở rộng tiện ích mẫu:
- Tìm đến dòng :
<a expr:href='data:post.link'><data:post.title/></a>
Và sửa thành :
<a expr:href='data:post.link' expr:title='data:post.title'><data:post.title/></a>
- Tiếp tục tìm đến dòng:
<a expr:href='data:post.url'><data:post.title/></a>
và sửa thành:
<a expr:href='data:post.url' expr:title='data:post.title'><data:post.title/></a>
Lưu template và kiểm tra kết quả.
c. Chỉnh tiêu đề bài viết thành <h1>
- Đăng nhập vào blog => Mẫu => Chỉnh sửa HTML => Tiếp tục => Mở rộng tiện ích mẫu:
- Tìm đoạn code sau
<b:if cond='data:post.title'>
      <h3 class='post-title entry-title' itemprop='name'>
      <b:if cond='data:post.link'>
        <a expr:href='data:post.link'><data:post.title/></a>
      <b:else/>
        <b:if cond='data:post.url'>
          <b:if cond='data:blog.url != data:post.url'>
            <a expr:href='data:post.url'><data:post.title/></a>
          <b:else/>
            <data:post.title/>
          </b:if>
        <b:else/>
          <data:post.title/>
        </b:if>
      </b:if>
      </h3>
    </b:if>
- Và sửa thành:
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<b:if cond='data:post.title'>
<h3 class='post-title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link' expr:title='data:post.title'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url' expr:title='data:post.title'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h3>
</b:if>
<b:else/>
<h1 class='post-title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link' expr:title='data:post.title'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</h1>
</b:if>
<b:else/>
<h1 class='post-title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link' expr:title='data:post.title'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</h1>
</b:if>
Chỉnh sửa CSS cho thẻ <h1>, tìm đến dòng
.post h3 {…}
.post h3 a, .post h3 a:visited {…}
.post h3 a:hover {…}
và sửa thành
.post h1, .post h3 {…}
.post h1 a, .post h1 a:visited, .post h3 a, .post h3 a:visited {…}
.post h1 a:hover, .post h3 a:hover {…}
lưu lại và kiểm tra kết quả :

3. Chỉnh URL thân thiện.

Mỗi khi bạn viết bài mới trên blogspot, nếu bạn viết tiêu đề có dấu đầy đủ, thì đôi lúc URL sẽ hiển thị như sau :
Ở đây SEO Kool thử nghiệm với bài viết có tiêu đề là : "Kí tự đặc biệt tạo nick yahoo cực đẹp !!". Nhìn vào hình ảnh các bạn có thể thấy, so với tiêu đề bài viết gốc thì URL (http://namkna.blogspot.com/2011/05/ki-tu-ac-biet-tao-nick-yahoo-cuc-ep.html) đã bị rút gọn và bị mất một số kí tự (màu vàng). Đó là vì URL mặc định của Blogspot có 2 chức năng :
  • Thứ nhất : lấy luôn tiêu đề của bài viết làm URL cho bài viết đó, tuy nhiên nó không thể hiểu được tiếng Việt nên sinh ra hiện tượng mất một số kí tự.
  • Thừ hai : Blogspot sẽ tự động cắt bớt URL nếu như tiêu đề bài viết quá dài.
Vậy nếu muốn có một URL thân thiện, chuẩn SEO thì ta phaỉ làm sao? Rất đơn giản để giải quyết cho hai trường hợp trên ta có thể dùng hai cách sau :
- Cách một : Khi viết một bài mới, ban đầu ta để tiêu đề không dấu với số kí tự vừa đủ để không bị rút ngắn URL và mất kí tự, sau đó xuất bản bài viết và quay lại chỉnh sửa tiêu đề trở thành có dấu.
- Cách hai : Sử dụng tính năng tùy chỉnh URL của Blogspot. Khi đăng bài tại phần cài đăt bài đăng => Liên kết cố định => Liên kết cố định tùy chỉnh => Đánh URL của bạn vào nhớ viết không dấu và cách nhau bởi dấu gạch ngang (-) nha => sau đó bấm Hoàn thành là ok:
Với tính năng này bạn có thể tự do điều chỉnh URL của mình. Tuy nhiên cần lưu ý là tính năng này chỉ chỉnh được một lần, tức là sau khi xuất bản bài viết bạn không thể sửa lại URL. Vì vậy hãy cẩn thận khi sử dụng.

4. Tạo Breadcrumb cho Blogspot

Để tạo Breadcrumb cho Blogspot, các bạn xem các bài viết sau:

5. Tạo bài viết liên quan cho Blogspot

- Hãy vào đây đề chọn một mẫu cho phù hợp với blog bạn nha.

6. Tạo các emoticon khi comment trên Blogspot

Các bạn hãy chọn các mẫu mặt cười sau:

7. Tạo Sitemap cho Blogspot

Blogspot có 2 dạng Sitemap, thứ nhất là loại sitemap dùng để submit lên Google Webmaster Tools (sitemap dành cho Googlebots), thứ hai là loại sitemap.html dành cho người dùng.
- Để tạo sitemap cho Googlebots, bạn xem bài: Tạo site map hỗ trợ SEO và page rank cho blogspot
Đối với người dùng, các bạn chọn một trong các mẫu bên dưới:
- Lựa chọn một trong các style bên dưới.
Chúc thành công!

46 nhận xét:

  1. Cảm ơn Namkna! Mình làm được rồi... Mà mình cứ như người mù dở ấy, bạn dắt đi đâu mình theo đấy...

    Trả lờiXóa
    Trả lời
    1. Tại đoạn code của mình encode thiếu :(((
      Mình phải cảm ơn vì bạn đã báo lỗi mới đúng, nếu không mình cũng không biết để fix lại nữa :))

      Xóa
  2. Mình ko tìm tìm được đoạn code . bạn chỉ giúp mình nó nằm ở phần nào nhé.

    Trả lờiXóa
    Trả lời
    1. Bạn dùng cách tìm kiếm nọi tuyến như ở bài này nha: XEM

      Xóa
  3. Nam cho mình hỏi chút xíu là. Sao lúc trước mình nhấn các tiêu đề trên thanh menu (như khám phá, nhà hàng, quán ăn v.v...) thì trên thanh trạng thái phía trên sẽ hiện theo tên các tiêu đề đó. Nhưng sao hôm nay mình kiểm tra lại thì ko còn thấy nữa. Chỉ thấy mắc định của title "Điểm ăn uống Sài Gòn, Hà Nội - Ẩm thực - Món ngon - Khuyến mãi" của trang chủ thôi. Vậy mình khắc phục làm sao??? Nam hướng dẫn mình nhé! Thanks

    Trả lờiXóa
    Trả lời
    1. Câu hỏi của bạn chưa thự sự rõ ràng, Hãy cho mình xem một hình ảnh nha.

      Xóa
  4. Chào Nam mình hỏi nếu link của mình có dạng như thế này thì sửa thế nào cho thân thiện nhỉ: http://www.muabantien2usd.com/search/label/2%20USD%20IN%20M%C3%80U, đây là link khi mình tạo ở các Labels, còn khi vào bài viết thì nó lại có dạng http://www.muabantien2usd.com/2013/07/2-usd-in-mau.html, thì như vậy có ảnh hưởng tới seo không, và sửa như thế nào bạn chỉ giúp mình nhé, thanks Namkna.

    Trả lờiXóa
    Trả lời
    1. Không bạn ak số %20 là do trong tên nhãn của bạn có ký tự khoảng trắng thôi. Nó không hề ảnh hưởng đến blog đâu.

      Xóa
  5. Đoạn mình chỉnh tiêu đề thành H1, mình không tìm thấy trong template của mình có đoạn
    .post h3 {…}
    .post h3 a, .post h3 a:visited {…}
    .post h3 a:hover {…}
    Mong bạn chỉ giùm

    Trả lờiXóa
    Trả lời
    1. Nếu không có thì bạn thêm nó vào nha. Bạn có thể xem cấu trúc một số header đẹp tại đây
      Thủ thuật tùy chỉnh Heading Style cho Blogger & Wordpress - Tùy chỉnh tags heading

      Xóa
  6. Namkna viết lại bài này đi, mình thấy giờ code của blogger có chút thay đổi rồi

    Trả lờiXóa
    Trả lời
    1. Giap diện có thay đổi chút ít nhữn phần khác vẫn vậy mà bạn :)

      Xóa
  7. Anh Nam ơi cho em hỏi tí. Blog caucau.org của em sao URL phía cuối xuất hiện #UsjdkUlf hiện tại vẫn giống blog của anh. Làm sao bỏ nó được anh?

    Trả lờiXóa
  8. Anh Nam ơi !
    Cái phần bắt H1 theo title bài viết đó, em đúng theo hướng dẫn mà sao vẫn không được vậy anh.
    Nó vẫn lấy cái H1 của trang chủ là sao ta? bị lỗi gì chăng

    Trả lờiXóa
    Trả lời
    1. A vừa kiểm tra blog bonnuoctanadaithanh và Hiện tại nó đang là tiêu đề H1 của bài viết mà e.

      Xóa
    2. Blog của em nè anh ơi. http://tuvanthietketubep.blogspot.com/2014/01/en-paragon-gia-tot.html. Em làm đúng như phần anh hướng dẫn nhưng nó vẫn bắt H1 của trang chủ. Với lại phần Search/label/... nó không tối ưu được, anh có cách nào giải quyết vấn đề đó được không. Tư vấn cái H1 theo tiêu đề bài viết giúp em với nhé. Thanks anh

      Xóa
    3. Em thêm đoạn code bên dưới vào sau thẻ <head> nha e:

      <b:include data='blog' name='all-head-content'/>
      <title>
      <b:if cond='data:blog.pageType == "index"'>
      <data:blog.pageTitle/>
      <b:else/>
      <b:if cond='data:blog.pageType != "error_page"'>
      <data:blog.pageName/> | <data:blog.title/>
      <b:else/>
      404 | <data:blog.title/>
      </b:if>
      </b:if>
      </title>

      Xóa
  9. cho mình hỏi cái link của mình http://catbuivn.blogspot.com/search/label/c%E1%BA%A3m%20x%C3%BAc%20y%C3%AAu%20th%C6%B0%C6%A1ng. làm sao để xóa đc cái % trong label thế

    Trả lờiXóa
    Trả lời
    1. 1. Khi trong tên nhãn có khoảng trắng giữa 2 từ thì nó sẽ xuất hiện "%20" để thay thế cho khoảng trắng đó. Cái này không thể thay đổi được bạn ak. Blog mình cũng bị như thế thôi: DEMO

      Nếu bạn muốn không xuất hiện khoảng trắng thì chỉ có một cách là nếu nhãn có từ 2 từ trở lên thì thêm dấu gạch ngang - hoặc gạch chân.
      Ví dụ thay vì viết Cảm súc yêu thương bạn phải viết là Cảm_súc_yêu_thương hoặc Cảm-súc-yêu-thương

      Một số trình duyệt khi xem nó không hiện %20 như Moliza firefox.

      2. Một số ký tự khác như %B0 hay %C6 hay %A1 xuất hiện là do bạn sử dụng nhãn tiếng việt một số trình duyệt không hiểu dược ngôn ngữ UTF8 nên mới bị lỗi đó,.

      Nói chung vấn đề này khong ảnh hưởng gì nhiều đến Seo nên bạn có thể yên tâm.

      Xóa
  10. Chào bạn, mình thấy trong template của mình, mỗi đạn code như bạn hướng dẫn có 2 đoạn giống nhau như vậy. vậy mình chỉ thay đoạn code thứ 1 hay thay cả hai đoạn? Mình cũng không tìm thấy đoạn code
    .post h3 {…}
    .post h3 a, .post h3 a:visited {…}
    .post h3 a:hover {…}

    Nhờ bạn hướng dẫn. Cảm ơn bạn.

    Trả lờiXóa
    Trả lời
    1. Cả 2 bạn ak. Một đoạn là giao diện mobile một đoạn là giao diện deskop nên bạn có thể thay thế toàn bộ.

      Xóa
  11. Ngồi cả ngày để quay lạiClip tối ưu hóa blogger rồi quăng lên youtube. Các bạn có thể xem tham khảo. Clip dài 1h chắc đủ giúp các bạn nhiều thứ.

    Trả lờiXóa
  12. blog em ko thấy dòng này.:
    .post h3 {…}
    .post h3 a, .post h3 a:visited {…}
    .post h3 a:hover {…}

    mà ko thấy anh nói chỉnh cái này có tác dụng gì vậy a?

    Trả lờiXóa
    Trả lời
    1. Đoạn đó là css định dạng tiêu đề bài đăng. Nếu không có thì có thể bỏ qua phần đó.

      Xóa
    2. em mới làm theo cách trên của anh với cái blog này Bột sắn dây
      Mà nó vẫn báo là chưa có thẻ H1. anh xem giúp em với nhé. thanks anh !

      Xóa
  13. Nhận xét này đã bị quản trị viên blog xóa.

    Trả lờiXóa
  14. chào anh Nam. Mình đã sửa nhưng sau đó báo là đang có 2 thẻ H1. Anh Nam giúp em với nhé

    Trả lờiXóa
    Trả lời
    1. Bạn kiểm tra lại code copy thiếu thẻ đóng thôi nha. Trong mẫu chỉ có Id không được trùng thôi, còn thẻ h1 thì tùy ý dùng bao nhiêu bạn muốn nha.

      Xóa
  15. Khi search trên google mình thấy title blog bạn có cái đuôi phần sau thế này: Namkna Blog's | Thủ thuật Blogspot | Facebook. Chỉ mình làm cái đó với Nam. Blog mình: Yêu Tiếng Anh

    Trả lờiXóa
    Trả lời
    1. Đã trả lời bạn ở phần coment ở bài viết này nha bạn: XEM NGAY

      Xóa
  16. Nam cho mình hỏi tại sao phần ngày tháng năm bài viết của mình lại bị dính cái heading h2, mình nên làm ntn để không heading ngày tháng năm của bài viết. Đây là blog chính: http://nhamoitot.blogspot.com/
    Trong khi đó trang demo: http://c37bachabca.blogspot.com/ của mình code không có gì khác biệt (nếu khác thì mình không tìm thấy) thì nó lại không h2 ngày tháng năm ?

    Trả lờiXóa
    Trả lời
    1. Câu hỏi của bạn thực sự không rõ ràng trong cả 2 mẫu đều có giờ đăng bài viết và nó đều không nằm trong thẻ h2.

      Xóa
    2. Mình dùng add-ons SeoQuake và xem thống kê thẻ Heading thì hiển thị ngày tháng năm dạng là thẻ H2. Ngày tháng năm mình chỉnh ở Cài đặt >> Ngôn ngữ và định dạng >> Định dạng tiêu đề ngày >> Theo dạng: "12/08/2014". Mình xem trong code thì ở phần CSS là ở chế độ display như sau: h2.date-header {......, display:none}. Nam kiểm tra bằng phần tử ở Firefox rồi Search "div h2" ở blog http://nhamoitot.blogspot.com/ ở bên cột Element rồi bạn bỏ chế độ Display:none thì nó sẽ hiện ra ngày tháng năm dạng xx\yy\zzzz đấy. Còn blog còn lại của mình thì ko, trong khi 2 code mình ko tìm ra điểm khác biệt ?

      Xóa
    3. Mình muốn bỏ H2 thẻ heading đó. Có thể bỏ ở CSS h2 đi và bỏ hết H2 ở body đi là được đúng ko. Nhưng cái mình ko hiểu là sao 2 code giống nhau mà cái thi H2 thẻ tiêu đề ngày tháng năm, cái thì ko ? Mà sửa tùm lum thì code xung đột.

      Xóa
    4. Phần date-header nó chỉ hiển thị với bài viết cuối cùng trong ngày, nếu mỗi ngày bạn viết một bài thì bài nào cũng hiển thị hần đó. Nếu một ngày bạn đăng 10 bài thì chỉ có bài cuối cùng của ngày hôm đó hiển thị ngày tháng năm đó. Để khắc phục nó bạn làm như bài sau" mỘT SỐ LỖI THƯỜNG GẶP KHI THIẾT KẾ BLOGSPOT (chú ý cuối bài viết có đề cập đến hướng giải quyết đó).

      - Nếu muốn xoá thì làm như bạn là được.

      Xóa
    5. Nhận xét này đã bị tác giả xóa.

      Xóa
  17. Mình làm được rồi. Thì ra trong phần bố cục. ở Widget Bài đăng trên blog.
    Có tùy chỉnh tiêu đề ngày tháng năm cho bài viết. Mình bỏ tích ở đó rồi ! :D Cảm ơn Nam nhé !

    Trả lờiXóa
  18. Cho mình hỏi ! Mình muốn để các bài viết của 1 nhãn hiển thị ở trang chủ ? không cho các nhãn khác hiển thị ở trang chủ thì làm thế nào Nam nhỉ ? Chỉ có cách lùi ngày xuất bản thôi à ?

    Trả lờiXóa
  19. Ad giúp mình thêm thẻ h3, h4 cho site này với CocCoc.Biz

    Không rành code nên không biết sửa sao hết :(

    Trả lờiXóa
  20. Cái đoạn code chứa cụm từ được rất nhiều bài anh nói đến. Nếu cứ thay các đoạn code ở bài này thì lại làm lỗi ở các bài viết khác thì giải quyết sao anh. Chẳng hạn như bài này để chỉnh đưa tiêu đề lên thẻ h1 thì ta phải chỉnh sửa liên quan đến cụm từ và bài viết chỉnh lỗi author và update cũng phải chỉnh đoạn code này thì làm thế nào để chuẩn cả hai ạ

    Trả lờiXóa
  21. Blog mình sử dụng template bên ngòai nên không có mục "liên kết cố định tùy chỉnh". vậy mình có cách nào khắc phục không bạn?

    Trả lờiXóa
  22. bươc chỉnh sửa css cho h1
    mình tim đoạn
    .post h3 {…}
    .post h3 a, .post h3 a:visited {…}
    .post h3 a:hover {…}
    sao tìm hoài không thấy, tách ra tìm từng đoạn cũng ko có. mình xài template mặc định của blogspot

    Trả lờiXóa
  23. ai có thể tối ưu seo cho blog mình được ko. mình gà code nên làm mãi không được . blog của mình là remixhaydj.blogspot.com

    Trả lờiXóa
  24. Chào add, cho mình hỏi, phần CSS trong blog của mình k có làm tn đc add?

    Trả lờiXóa