Thứ Năm, 4 tháng 10, 2012

Chỉnh sữa title, description, keywords Blogspot

SEO (Search Engine Optimization) luôn là thử thách với rất nhiều blogger, ngay cả với những người chuyên nghiệp. Với blogspot thì các thủ thuật SEO lại càng ít. Mình cũng hay tìm đọc các bài viết trong lĩnh vực này tuy nhiên cũng khá lơ mơ. Viết blog cũng được vài năm, cũng đã áp dụng thử nhiều thủ thuật được cho là cải thiện khả năng SEO cho blogger và cũng có lúc choáng váng vì chỉ có một link duy nhất trong sitemap được index, mình có một chút ít kinh nghiệm muốn chia sẻ với các bạn.

1. Thay đổi dạng hiển thị tiêu đề trang (Page title)

Thông thường thì khi bạn mở một trang bài viết trên thanh tab sẽ hiển thị dạng Tiêu đề blog: Tiêu đề bài viết.

Theo nhiều ý kiến, để tốt cho SEO thì bạn nên thay đổi nó về dạng Tiêu đề bài viết: Tiêu đề blog.

Tìm tới đoạn code:

<title><data:blog.pageTitle/></title>

và thay thế nó bằng:

<b:if cond='data:blog.pageType == "item"'>
<title><data:blog.pageName/> | <data:blog.title/></title>
<b:else/>
<title><data:blog.pageTitle/></title>
</b:if>

Khi xuất hiện trong trang tìm kiếm thì kết quả trông cũng đẹp hơn nhiều.

2. Thẻ meta keyword và description

Ngoài các thẻ meta để xác thực các dịch vụ như sitemap (Google, Yahoo, Bing), Alexa... và
<meta content='index' name='ROBOTS'/>
theo mình bạn chỉ cần thêm thẻ meta keyword và descriptio nhưng sẽ tùy biến một chút đoạn code trên cho phù hợp với blogger.

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<meta name="description" content="Mô tả blog" />
<meta name="keywords" content="Các từ khóa chính" />
</b:if>

3. Hiển thị tiêu đề bài viết

Thông thường blogger thường sử dụng heading tag H2 hoặc H3 cho tiêu đề bài viết. Tuy nhiên theo khuyến cáo thì chúng ta nên sử dụng H1 để tốt cho SEO.

Vào phần Edit HTML, Expand Widget Templates, tìm với từ khóa 

<b:if cond='data:post.title'> để tìm tới đoạn code:
<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:blog.pageType != "item"'>
<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>

Tùy vào template mà đoạn code trên có thể khác nhau đôi chút. Bạn thay H2 (hoặc H3) thành H1, tiếp tục tìm với từ khóa H2 (hoặc H3) để thay nó thành H1 trong phần qui định CSS của post-title.

Updated: Cách làm trên tuy đã giải quyết được vấn đề tag H1 cho tiêu đề bài viết nhưng nó chưa đủ. Thực ra chúng ta chỉ cần tag H1 cho tiêu đề ở trang bài viết và trang tĩnh (item_page và static_page) vì chúng ta cũng chỉ cần Google index những trang này. Nếu làm như trên thì sẽ gây trùng lặp tag H1 ở trang index và archive (một lỗi cũng không nghiêm trọng lắm nhưng để tốt nhất cho SEO thì chúng ta nên xử lý triệt để :D).

Bạn thay thế toàn bộ đoạn code bên trên bằng một đoạn code mới đầy đủ hơn:

<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>

Giải thích: Ở đây mình sẽ sử dụng tag H3 (khác với tag H2 của sidebar và footer) cho tiêu đề ở trang không phải là item_page và static_page và tất nhiên khi có dạng những trang này nó được tag H1.

Tiếp theo chúng ta cần chỉnh sửa một chút trong phần CSS.
Tìm đến phần qui định CSS cho bài viết (nó có thể không giống hệt với template của bạn nhưng thường có dạng như vậy).

.post h3 {...}
.post h3 a, .post h3 a:visited {...}
.post h3 a:hover {...}


Nếu bạn nào đã thực hiện theo cách ban đầu mình giới thiệu thì nó sẽ là H1

Chúng ta sửa thành dạng sau:
.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 {...}


Vậy là đã hoàn thành. Chúc thành công
Quang Cao