Khi bạn có một trang blog, bạn muốn nhiều người biết đến blog của bạn. Để làm được điều này ngoài việc blog của bạn có nhiều nội dung hay, thì blog bạn nhìn phải bắt mắt, tiện theo dõi và việc SEO tăng thứ hạng tìm kiếm bài viết của bạn trên google sẽ tăng lượng khách ghé thăm blog của bạn rất nhiều. Khi mới tạo một blogspot thì tính năng giao diện rất hạn chế và thô sơ. Sau đây mình sẽ giới thiệu các bạn làm những điều trên.
1. 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.
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ẻ <h1>, và tiêu đề của bài viết là <h2> hoặc <h3>. Điều này sẽ gây khó khăn cho các bạn khi muốn SEO một bài viết con.
Nhiều người đã khắc phục điều này bằng cách chèn thêm thẻ <h1> trong bài viết, và vẫn giữ tiêu đề là <h2> hoặc <h3>. Tuy nhiên, như vậy là không tốt. Thứ nhất về mặt thẩm mỹ không đẹp, thứ hai là về tầm quan trọng của các thẻ heading vì khi bot google duyệt website của bạn, nó sẽ thấy thẻ <h2> trước và <h2> thì đương nhiên không quan trọng bằng <h1>.
Vì thế khi chọn template các bạn cần chú ý cấu trúc của temp, nếu có sẵn 2 thẻ <h1>, một cho toàn bộ website, và một cho tiêu đề bài viết thì tuyệt vời. Còn nếu không có thì cũng đừng quá lo lắng, tôi sẽ hướng dẫn các bạn đổi tiêu đề bài viết thành <h1> trong các bước tiếp theo.
2. Sửa và thêm các thẻ <meta> cần thiết trong SEO
Thẻ <meta> trong HTML là rất nhiều, lên google tìm và đọc về chúng cũng khá đơn giản, nhưng những thẻ <meta> nào cần thiết trong SEO thì ít người nói đến. Với kinh nghiệm của mình tôi sẽ đưa ra các thẻ <meta> cần thiết nhất trong SEO.
a. Meta Content Type
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
Meta Content Type là t hẻ mô tả để khai báo mã hiển thị ngôn ngữ cho website.
b. Meta Description
<meta name="description" content="mô tả" />
Meta Description là thẻ mô tả tóm tắt nội dung của website, nội dung mô tả này được google hiển thị khi tìm kiếm là khoảng 160 ký tự, nhưng bạn cũng không nên cut (...) mô tả nếu nó dài hơn 160 ký tự. Chúng ta có thể chấp nhận độ dài trong khoảng 160-250 ký tự để hiển thị đầy đủ mô tả.
c. Meta Keywords
<meta name="keywords" content="từ khóa" />
Meta Keywords là thẻ mô tả từ khóa của website, các bộ máy tìm kiếm cũng không đánh giá cao thẻ này vì một lý do thời gian trước các SEO mũ đen đã lạm dụng thẻ này quá. Nhưng bạn vẫn nên có thẻ này, dù sao cũng tường minh và sau này sẽ cần thiết.
d. Meta Robots
<meta name="robots" content="noodp,index,follow" />
Meta Robots là thẻ khai báo cho bộ máy tìm kiếm nhìn nhận về website của bạn. Dưới đây là các giá trị khai báo:
all
Bộ tìm kiếm đánh chỉ số tất cả (ngầm định).
none
Bộ tìm kiếm không đánh chỉ số gì hết.
index
Đánh chỉ số trang Web.
noindex
Không đánh chỉ số trang, nhưng vẫn truy vấn đường dẫn URL.
follow
Bộ tìm kiếm sẽ đọc liên kết siêu văn bản trong trang và truy vấn, xử lý sau đó.
nofollow
Bộ tìm kiếm không phân tích liên kết trong trang.
noarchive
Không cho máy tìm kiếm lưu vào bộ nhó bản sao trang Web.
nocache
Chức năng như thẻ noarchive nhưng chỉ áp dụng cho MSN/Live.
nosnippet
Không cho Bộ tìm kiếm hiển thị miêu tả sinppet của trang trong kết quả tìm kiếm và không cho phép chúng hiển thị trong bộ nhớ (cache hay caching).
noodp
Ngăn máy tìm kiếm khỏi việc tạo các miêu tả description từ các thư mục danh bạ Web DMOZ như là một phần của snippet trong trang kết quả tìm kiếm.
noydir
Ngăn Yahoo khỏi việc trích miêu tả trong danh bạ Web Yahoo! diectory để tạo các phần miêu tả trong kết quả tìm kiếm. Giá trị noydir chỉ áp dụng với Yahoo và không có công cụ tìm kiếm nào khác sử dụng danh bạn Web của Yahoo bởi thế giá trị này không được hỗ trợ cho máy tìm kiếm khác..
e. Meta Revisit After
<meta name='revisit-after' content='1 days' />
Meta Revisit After là thẻ khai báo cho bộ máy tìm kiếm thời gian ghé thăm lại website của bạn.
Ở trên là những thẻ meta cần thiết cho một website và cũng như blog. Vậy để áp dụng vào trong blogspot thì cần làm như thế nào? Chúng ta cần tạo thẻ meta keyword và meta description cho từng bài viết trong blogspot. Chúng ta tiến hành như sau:
- Bước 1: Đăng nhập vào blogspot, vào mục Mẫu (Template) > Chỉnh sửa HTML (Edit HTML).
- Bước 2: Xóa bỏ các thẻ <meta name='description' content= ''/> và <meta name='keywords' content= ''/> nếu thẻ này đang tồn tại trong blog của bạn, nó nằm trong thẻ <head> </head>.
- Bước 3: Dán đoạn code sau ngay phía dưới thẻ <head>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<meta content=' name='description'/>
<meta content='' name='keywords'/>
<b:else/>
<b:if cond='data:blog.pageType == "item"'>
<meta expr:content='data:blog.pageName' name='description'/>
<meta expr:content='data:blog.pageName + "," + data:blog.title' name='keywords'/>
<b:else/>
<meta expr:content='data:blog.pageTitle' name='description'/>
<meta expr:content='data:blog.pageTitle' name='keywords'/>
</b:if>
</b:if>
<meta name='robots' content='noodp,index,follow' />
<meta name='revisit-after' content='1 days' />
Lưu lại và xem kết quả bằng cách view source trang của bạn
3. Chỉnh sửa tiêu đề bài viết <title>
a. Sửa thẻ <title> của bài viết
Thông thường khi bạn viết một bài mới thì <title> bài viết của bạn sẽ có dạng : Tiêu đề Blog: Tiêu đề bài viết
Tuy nhiên, để tiện cho việc SEO bài viết sau này, các bạn hãy đưa tiêu đề bài viết lên phía trước. Ví dụ : Tiêu đề bài viết | Tiêu đề Blog
Để làm được điều này các bạn tìm tới đoạn code (Mẫu > Chỉnh sửa HTML) sau nằm trong <head>, nếu không thấy đoạn code này thì bạn chỉ cần chèn đoạn code dưới vào là được:
<title><data:blog.pageTitle/></title>
Và sửa lại thành :
<b:if cond=’data:blog.pageType == “item”‘>
<title><data:blog.pageName/> | <data:blog.title/></title>
<b:else/>
<title><data:blog.pageTitle/></title>
</b:if>
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 :
Bạn vào Mẫu > Chỉnh sửa HTML
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>
Như ở phần 1. Template đã trình bày về sự quan trọng SEO bài viết con với thẻ <h1>
Bạn vào Mẫu > Chỉnh sửa HTML
Tìm đến dòng (lưu ý có thể trong blog của bạn có 2 đoạn code như sau thì bạn tìm đến đoạn code thứ hai:
<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' expr:title='data:post.title'><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' expr:title='data:post.title'><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 như sau (bạn có thể xóa bỏ đoạn code vừa tìm thấy ở trên, sau đó thêm đoạn code sau ở ngay vị trí đoạn code trê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>
Thêm CSS cho thẻ <h1>, bạn thêm đoạn code sau trước thẻ </b:skin>
h1.post-title {
margin: 0;
font: $(post.title.font);
}
Lưu lại và kiểm tra kết quả.
4. Chỉnh URL thân thiện
Nhiều người không để ý vấn đề này khi đăng bài viết, vì nó có chế độ tự động lấy theo tiêu đề bài đăng. Nhưng với ngôn ngữ tiếng việt bạn để chế độ tự động thì URL của bạn thường SEO không cao. Vì nó sẽ bỏ qua những ký tự có dấu, hoặc dài quá nó sẽ tự động ngắt. Ví dụ với tiêu đề bài viết này nếu để chế độ tự động thì như sau:
Bạn nhìn URL đã tự bỏ ký tự đi, lên khi search theo URL thì SEO không được cao.
Vậy để tránh điều này thì khi bạn đăng một bài viết mới, thì bạn bấm vào Liên kết cố định tùy chỉnh và nhập URL cho bài đăng của mình, viết không dấu và cách nhau bởi ký tự “-”, bạn lên nhập tiêu đề bài đăng không dấu vào. Nhập xong bạn bấm Hoàn thành.
Chỉnh URL cho thân thiện
5. Tạo Breadcrumb cho Blogspot
Bạn vào Mẫu > Chỉnh sửa HTML
Tìm đến đoạn code (Lưu ý nếu trong blog của bạn có nhiều đoạn code như dưới thì hãy chọn đoạn code ở phía cuối nhất):
<b:includable id='main' var='top'>
<!– posts –>
<div class='blog-posts hfeed'>
<b:include data='top' name='status-message'/>
<data:adStart/>
Và sửa thành :
<b:includable id='main' var='top'>
<!– posts –>
<div class='blog-posts hfeed'>
<!– disable default status message
<b:include data='top' name='status-message'/>
default status message disabled –>
<b:include data='posts' name='breadcrumb'/>
<data:adStart/>
Sau đó tìm đến dòng :
<b:includable id='main' var='top'>
Và thêm đoạn code sau vào trên nó :
<b:includable id='breadcrumb' var='posts'>
<b:if cond='data:blog.homepageUrl == data:blog.url'>
<!– No breadcrumb on front page –>
<b:else/>
<b:if cond='data:blog.pageType == "item"'>
<div class='breadcrumbs'>
Browse » <a expr:href='data:blog.homepageUrl' rel='tag'>Home</a>
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast == "true"'> »
<a expr:href='data:label.url' rel='tag'><data:label.name/></a>
</b:if>
</b:loop>
» <span><data:post.title/></span>
</b:if>
</b:loop>
</div>
<b:else/>
<b:if cond='data:blog.pageType == "archive"'>
<div class='breadcrumbs'>
Browse » <a expr:href='data:blog.homepageUrl'>Home</a> » Archives for <data:blog.pageName/>
</div>
<b:else/>
<b:if cond='data:blog.pageType == "index"'>
<div class='breadcrumbs'>
<b:if cond='data:blog.pageName == ""'>
Browse » <a expr:href='data:blog.homepageUrl'>Home</a> » All posts
<b:else/>
Browse » <a expr:href='data:blog.homepageUrl'>Home</a> » Posts filed under <data:blog.pageName/>
</b:if>
</div>
</b:if>
</b:if>
</b:if>
</b:if>
</b:includable>
Tiếp theo chỉnh css cho phù hợp, ta tìm đến đoạn mã :
]]></b:skin>
và thêm vào trước nó đoạn code sau :
.breadcrumbs {
padding:5px 5px 5px 0px;
margin: 0px 0px 15px 0px;
font-size:95%;
line-height: 1.4em;
border-bottom:3px double #e6e4e3;
}
6. Tạo bài viết liên quan cho Blogspot
Bạn vào Mẫu > Chỉnh sửa HTML
Thêm đoạn code sau vào trước thẻ </head>
<b:if cond='data:blog.pageType == "item"'>
<script type='text/javascript'>
//<![CDATA[
var titles=new Array();var titlesNum=0;var urls=new Array();var time=new Array();function related_results_labels(c){for(var b=0;b<c.feed.entry.length;b++){var d=c.feed.entry[b];titles[titlesNum]=d.title.$t;for(var a=0;a<d.link.length;a++){if(d.link[a].rel=="alternate"){urls[titlesNum]=d.link[a].href;time[titlesNum]=d.published.$t;titlesNum++;break}}}}function removeRelatedDuplicates(){var b=new Array(0);var c=new Array(0);e=new Array(0);for(var a=0;a<urls.length;a++){if(!contains(b,urls[a])){b.length+=1;b[b.length-1]=urls[a];c.length+=1;c[c.length-1]=titles[a];e.length+=1;e[e.length-1]=time[a]}}titles=c;urls=b;time=e}function contains(b,d){for(var c=0;c<b.length;c++){if(b[c]==d){return true}}return false}function printRelatedLabels(a){var y=a.indexOf('?m=0');if(y!=-1){a=a.replace(/\?m=0/g,'')}for(var b=0;b<urls.length;b++){if(urls[b]==a){urls.splice(b,1);titles.splice(b,1);time.splice(b,1)}}var c=Math.floor((titles.length-1)*Math.random());var b=0;document.write("<ul>");if(titles.length==0){document.write("<li>Không có bài viết liên quan</li>")}else{while(b<titles.length&&b<20&&b<maxresults){if(y!=-1){urls[c]=urls[c]+'?m=0'}document.write('<li><a href="'+urls[c]+'" title="'+time[c].substring(8,10)+"/"+time[c].substring(5,7)+"/"+time[c].substring(0,4)+'">'+titles[c]+"</a></li>");if(c<titles.length-1){c++}else{c=0}b++}}document.write("</ul>");urls.splice(0,urls.length);titles.splice(0,titles.length)};
//]]>
</script>
</b:if>
Bài viết liên quan thường được hiển thị bên dưới mỗi bài viết. Trong template của Blogger thì những tiện ích đặt bên dưới mỗi bài viết thường nằm trong cặp thẻ <div class='post-footer'></div>. Thêm đoạn mã dưới đây vào bên trong cặp thẻ <div class='post-footer'></div> ở template của bạn (Lưu ý nếu trong blog của bạn có chứa nhiều thẻ này thì hãy tìm thẻ ở cuối nhất).
<b:if cond='data:blog.pageType == "item"'>
<div id='related-posts'>
<b>Bài viết liên quan:</b>
<b:loop values='data:post.labels' var='label'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels"' type='text/javascript'/>
</b:loop>
<script type='text/javascript'>var maxresults=5;removeRelatedDuplicates();printRelatedLabels('<data:post.url/>');</script>
</div>
</b:if>
maxresults là số bài viết hiển thị ở danh sách bài viết liên quan. Thủ thuật này đặt giá trị là 5, bạn có thể thay đổi theo ý muốn.
Thủ thuật Bài viết liên quan này cũng lấy dữ liệu từ nguồn feed và dùng hàm document.write để hiển thị. Nhược điểm là không cải thiện thêm về SEO vì các bộ máy tìm kiếm bỏ qua không đọc tới hàm document.write này.
- Để 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, khách ghé thăm blog bạn xem bài: Tạo Sitemap đẹp cho khách ghé thăm blogspot
Chúc thành công!
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, khách ghé thăm blog bạn xem bài: Tạo Sitemap đẹp cho khách ghé thăm blogspot
Chúc thành công!
Bài viết rất hay và thực tế, tôi đã thực hiện thành công cho blog của mình. JBank
ReplyDelete