Seo toàn tập với blogspot/blogger tại sao không?

Ngày hôm nay 10/2 là ngày may mắn đến với blog của Yolks . Sitelink tuy ít và không được đẹp cho lắm nhưng đã là niềm vui không kể xiết khi mình đã làm việc 4 tháng với blogger.

Demo

Cùng nghĩa với việc khó sitelink mình xin hướng dẫn cho các bạn cách có sitelink mau chóng và seo cho blog được cao hơn.

Không hổ danh là blogger , tuy là con của google mà chẳng được lợi gì từ father , điều này cho thấy google không thiên vị 1 ai , và có sitelink là điều có thể nói ngàn cân treo sợi tóc , chúng ta hãy làm theo các bước sau để có sitelink nhé

1. Domain hiệu lực lâu dài:

Domain rất quan trọng khi chúng thành lập blog . Tất cả domain miễn phí như : .tk , co.cc đều bị google làm việc thẳng tay , khó có thể tìm thấy trên top của google . Các bạn hãy gỡ bỏ suy nghĩ ấu trĩ của mình bằng cách mua domain bằng tiền thật , bởi vì làm blog chúng ta còn có thể kiếm tiền còn nhiều hơn thế ( đối với MMO). Nói chung , domain càng có tuổi thọ càng cao càng tốt , như vngreenzone : gia hạn tới 5 năm .

2.Sitelink với Trang tĩnh (Static Page)của blogger:

Sitelink với Static Page là hiệu quả nhất với sitelink , chúng ta có thể có tới 3 sitelink từ Static Page nếu chúng ta áp dụng thủ thuật sau:

<b:if cond='data:blog.url == &quot;Link static page 1 &quot;'>
 <meta content='Mô tả cho static page 1' name='description'/>
</b:if>
<b:if cond='data:blog.url == &quot;Link static page 2&quot;'>
 <meta content='Mô tả cho static page 2' name='description'/>
</b:if>
<b:if cond='data:blog.url == &quot;Link static page 3&quot;'>
 <meta content='Mô tả cho static page 3' name='description'/>
</b:if>

Hầu như các bạn đều tạo như thế này : Giới thiệu , sitemap , liên hệ
Như vậy chúng ta đã có 3 sitelink.
3.Sitelink còn lại nằm ở tiêu đề bài viết:
Google index tận 5 sitelink với tiêu đề bài viết vậy chúng ta làm như sau
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. 
Nhưng làm vậy vẫ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 để ).
Thay thế tất cả code ở trên 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>

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 {...}

Ngoài ra , 1 số temp không quy định .post mà có thể là .post-item giống Yolks thì các bạn thay css cho phù hợp với temp đã tạo , còn không đoạn css này add vào cũng xem như bỏ trống .

4.Seo với tiêu đề trang (Page title):
Để có thể seo tốt cho tiêu đề trang mấy bạn nên chèn đoạn code sau vào blog:
Tìm trong template đoạn mã:

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

Thay thế thành:

<b:if cond='data:blog.pageType == &quot;index&quot;'>
<title><data:blog.pageTitle/></title>
<meta content='Mô tả chính của blog' name='description'/>
<meta content='Từ khóa chính của blog' name='keywords'/>
<b:else/>
<title><data:blog.pageName/> - <data:blog.title/></title>
<meta expr:content='data:blog.pageName' name='description'/>
<meta expr:content='data:blog.pageName + &quot;. Mô tả chính của blog&quot;' name='description'/>
<meta expr:content='data:blog.pageName + &quot;, Từ khóa chính của blog&quot;' name='keywords'/>
</b:if>

Xong phần tiêu đề. Lưu ý: mô tả chúng ta nên cho tên blog vào như đoạn code như sau:

<b:if cond='data:blog.pageType == &quot;index&quot;'>
<title><data:blog.pageTitle/> | Blogger | Thủ thuật | Hack</title>
<meta content='blogger,blogspot,vngreenzone,greenzone,design,blogger Template,thiết kế, Blogger tips,blogging tips, tricks, hacks, tutorials, rao vặt, Code, Yolks, Blogging, Tutorial blogger,seo, Wp, Wordpress, Tips, hack, tricks' name='keywords'/>
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<meta content='Vngreenzone Là một nơi chia sẻ kinh nghiệm làm blogger -Nơi tôn vinh tâm hồn blogger Việt' name='description'/>
</b:if>
<b:else/>
<title><data:blog.pageName/> - <data:blog.title/></title>
<meta expr:content='data:blog.pageName' name='description'/>
<meta content='Blogger, Templates, Tips, Tricks, Hacks, SEO, Design, Tutorials' name='keywords'/>
</b:if>

Như vậy khi tìm người ta gõ vngreenzone thì sẽ ra dòng mô tả trên.

5.Seo với thẻ: <meta>:

<meta content='Tiêu đề blog' name='title'/>
<meta content='Vietnamese, English' name='language'/>
<meta content='Vietnam' name='country'/>
<meta content='15 days' name='revisit-after'/>
<meta content='Tên tác giả' name='author'/>
<meta content='Sở hữu' name='owner'/>
<meta content='(c) 2011' name='copyright'/>
<meta content='index, follow' name='robots'/>
<meta content='all,index,follow' name='msnbot'/>
<meta content='index,follow' name='googlebot'/>

Chỉnh lại các thông số cho phù hợp.
6. Seo tệ hại vì Auto Readmore sử dụng .js:
Chúng ta hãy gỡ bỏ auto readmore ra và sử dụng auto readmore không sử dụng  javascript
đầu tiên tìm: ]]></b:skin>
Thêm đoạn css sau:
Hiển thị hình ảnh bên trái:

.post-thumbnail{float:left;margin-right:20px}

Hiển thị hình ảnh bên phải:

.post-thumbnail{float:right;margin-left:20px}

Bước 2: Thêm đoạn mã auto readmore.


Thay thế <data:post.body/> bằng đoạn mã dưới đây:
Auto readmore với hình ảnh và hiển thị ảnh mặc định cho bài viết không có ảnh:

<b:if cond='data:blog.pageType != &quot;item&quot;'>
 <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
 <div>
  <b:if cond='data:post.thumbnailUrl'>
  <img class='post-thumbnail' expr:alt='data:post.title' expr:src='data:post.thumbnailUrl' width='72px' height='72px'/>
  <b:else/>
  <img class='post-thumbnail' alt='no image' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGz3xYXsUY9tS5u6SSbCmqLdWCWeHmHAoSI7yAYoPUitxFYR_tyE4Q7N_WI_VZbckoZsFBioLFqKfLOVrcipptBjPv8jiNaHcObpEwbnQs256GGu7ksA-oIpHg_DAzq6VHI3B2lNYTXVB0/' width='72px' height='72px'/>
  </b:if>
  <data:post.snippet/>
 </div>
 <div class='jump-link'>
  <a expr:href='data:post.url' expr:title='data:post.title'><data:post.jumpText/></a>
 </div>
<span class='post-comment-link'>
<b:if cond='data:post.allowComments'>
<a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><b:if cond='data:post.numComments == 1'>1 <data:top.commentLabel/><b:else/><data:post.numComments/> <data:top.commentLabelPlural/></b:if></a>
</b:if>
</span> 
 <b:else/>
 <data:post.body/>
 </b:if>
<b:else/>
 <data:post.body/>
</b:if>

Đoạn css trang điểm cho nút readmore và đoạn văn hiển thị:

.item-snippet {color: #999; font-family:Arial; font-size: 12px;text-align:justify}
.jump-link {float:right}
.jump-link a,.jump-link a:visited{background:#444343;margin-right:4px;padding:4px 8px;color:#FFF;text-shadow:1px 1px 1px #000;text-decoration:none;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px}
.jump-link a:hover,.jump-link a:active{background:#006666;color:#FFF;text-decoration:none;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px}

Lưu ý :

Việc hiển thị trích đoạn nội dung bài viết là thông qua thẻ <data:post.snippet/> của Blogger.Đoạn trích dẫn của Blogger chỉ gồm 140 ký tự (Blogger vừa update, số lượng ký tự của thẻ <data:post.snippet/> ở widget Blog giờ đây ít hơn số lượng ký tự của thẻ <data:post.snippet/> ở widget PopularPosts), khá là ngắn và việc ngắt ký tự không chú ý tới ký tự trống nên có câu bị mất vài từ trở nên vô nghĩa.

Hình ảnh được lấy thông qua lệnh data:post.thumbnailUrl. Đây là đường dẫn ảnh thứ nhất trong bài viết đã được Blogger resize về kích thước 72x72 pixels. Cần chú ý là ảnh của bài viết phải được upload thông qua công cụ Chèn hình ảnh của Blogger, hoặc lấy địa chỉ ảnh từ Picasa và địa chỉ ảnh phải có s1600, s800...thì công cụ resize của Blogger mới hoạt động, khi đó ảnh mới xuất hiện. Thủ thuật trên đã thêm thuộc tính alt là tiêu đề bài viết cho hình ảnh, nó giúp tăng khả năng SEO cho blog của bạn.

Trước khi thực hiện thủ thuật auto readmore này bạn cần loại bỏ đoạn mã auto readmore javascript nếu đang dùng nhé.

7.Tự động thêm thẻ alt và title cho ảnh:
Tìm thẻ </body> thêm vào trước nó đoạn code :

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
//SEO SCRIPT POWERED BY MUKUND - www.newbloggingtipz.com
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function() {
$('img').each(function(){
var $img = $(this);
var filename = $img.attr('src')
$img.attr('alt', filename.substring((filename.lastIndexOf('/'))+1, filename.lastIndexOf('.')));
});
});
//]]>
</script>

<script type='text/javascript'>
//<![CDATA[
$(document).ready(function() {
$('img').each(function(){
var $img = $(this);
var filename = $img.attr('src')
$img.attr('title', filename.substring((filename.lastIndexOf('/'))+1, filename.lastIndexOf('.')));
});
});
//]]>
</script>

Nếu trong temp đã có:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>

Thì các bạn xóa bớt 1 cái.

Chân thành cảm ơn các blogger sau : Duypham , Noct , blogger plus , Thủ thuật blogger