Thứ Tư, 3 tháng 4, 2013

Tối ưu hóa cho blogspot

Tối ưu hóa cho blogspot

huong-dan-toi-uu-hoa-blogspot
Tối ưu hóa cho blogspot

Blogspot – một khái niệm quá quen thuộc đới với các webmaster và những người làm SEO. Dễ sử dụng, tốc độ nhanh, tùy chỉnh được code, … chính là những đặc điểm nổi bật của Blogspot khiến nó được mọi người tin dùng.
Tuy nhiên, với sự ra đời và phát triển của WordPress thì Blogspot đang dần mất đi vị thế của mình. Wordpress đã đến và tạo nên một làn gió mới, đặc biệt là trong thời điểm thương mại điện tử đang phát triển như hiện nay. Lý do rất đơn giản vì hầu như tất cả mọi người đều cho rằng WordPress là mã nguồn “chuẩn SEO”.
Với khả năng tối ưu hóa gần như hoàn hảo của mình, WordPress hiện đang là sự lựa chọn số một của giới làm SEO. Vậy lối đi nào dành cho Blogspot – đứa con của gã khổng lồ Google ?
Sau đây, SEO Kool 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, mọi người sẽ có cái nhìn khác về Blogspot và tìm ra hướng phát triển đúng đắn cho Blog của mình.

Bài hướng dẫn tối ưu hóa Blogspot của tôi sẽ gồm các phần :
- Chọn template.
- Chỉnh sửa các thẻ meta.
- Chỉnh sửa 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ẻ <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, SEO Kool cho rằng 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, SEO Kool 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 các thẻ <meta>

Để chỉnh sửa các thẻ meta keywordmeta description các bạn tìm đền đoạn code sau :
<meta name=”description” content=”" />
<meta name=”keywords” content=”" />
Và sửa thành :
<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. Chỉnh sửa tiêu đề bài viết

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 :
<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 đó.
them-mo-ta-cho-link-tieu-de
Để làm được điều này các bạn làm như sau :
Đăng nhập vào Blogger -> chỉnh sửa HTML -> Tiện ích mở rộng
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ả.
b. Chỉnh tiêu đề bài viết thành <h1>
Đăng nhập vào Blogger -> chỉnh sửa HTML -> Tiện ích mở rộng
Tìm đoạn code sau
<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>
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ả :




chinh-tieu-de-bai-viet-thanh-h1




4. Chỉnh URL thân thiện.
url-khong-day-du-ro-rang
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à : ”Thượng nghị sỹ Mỹ phản đối việc kiểm soát cá da trơn“. 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 đã bị rút gọn và bị mất một số kí tự. Đó 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

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.
5. Tạo Breadcrumb cho Blogspot
tuy-chinh-url
Để tạo Breadcrumb cho Blogspot, các bạn vào chỉnh sửa HTML và chọn mở rộng tiện ích. Sau đó tìm đến đoạn code :
<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 == &quot;item&quot;’>
<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 == &quot;true&quot;’> »
<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 == &quot;archive&quot;’>
<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 == &quot;index&quot;’>
<div class=’breadcrumbs’>
<b:if cond=’data:blog.pageName == &quot;&quot;’>
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

Đầu tiên ta tìm đến thẻ </head> và thêm vào trước nó đoạn code sau :
<b:if cond=’data:blog.pageType == &quot;item&quot;’>
<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.spli ce(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<maxres ults){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>
Sau đó tìm đến dòng :
<div class=’post-footer’>
Và thêm đoạn code sau vào sau nó :
<b:if cond=’data:blog.pageType == &quot;item&quot;’>
<div id=’related-posts’>
<b>Bài viết liên quan:</b>
<b:loop values=’data:post.labels’ var=’label’>
<script expr:src=’&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&quot;� � type=’text/javascript’/>
</b:loop>
<script type=’text/javascript’>var maxresults=5;removeRelatedDuplicates();printRelate dLabels(‘<data:post.url/>’);</script>
</div>
</b:if>
Lưu ý maxresult=5 chính là số tin liên quan được hiển thị, bạn có thể thay đổi thông số này.
7. Tạo các emoticon khi comment trên Blogspot

[IMG]https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcd7OxiFAJdaSRkLTJ3baqt8X7nz5rUMViOAO6WkkEOnhXYEjaBvSaWjUJaonyXHF6WaPyC39gw_HX2EPh3b4s2EHZ25bTQDh3-a7yJbhCxvlVhSos2-QulIKJkp4WYEwK_kXb0ckqrQs/s1600/***-emoticon-khi-comment-tren-blogspot.jpg[/IMG]
Chèn đoạn code sau vào trước thẻ đóng </body> :
<script type=’text/javascript’>
//<![CDATA[
function replaceText(){if(!document.getElementById){return; }
bodyText = document.getElementById("emocomments");
theText = bodyText.innerHTML;
theText = theText.replace(/:\)\)/gi, "<img src='http://lh4.ggpht.com/_u7a1IFxc4WI/TM-vt_XVZKI/AAAAAAAAATI/Q35_W0anT6A/21.gif'/>");
theText = theText.replace(/=d&gt;/gi, "<img src='http://lh6.ggpht.com/_u7a1IFxc4WI/TM-vzUt1yQI/AAAAAAAAATY/QHNvnj0gYbU/41.gif'/>");
theText = theText.replace(/:d/gi, "<img src='http://lh3.ggpht.com/_u7a1IFxc4WI/TM-voxnkRKI/AAAAAAAAAS4/PjDn098vm3w/4.gif'/>");
theText = theText.replace(/:p/gi, "<img src='http://lh6.ggpht.com/_u7a1IFxc4WI/TM-vpDb68dI/AAAAAAAAAS8/Yv0Uu3qzG_Q/10.gif'/>");
theText = theText.replace(/:\(\(/gi, "<img src='http://lh4.ggpht.com/_u7a1IFxc4WI/TM-vt5z16MI/AAAAAAAAATE/Hx-7Thmr6do/20.gif'/>");
theText = theText.replace(/:\)/gi, "<img src='http://lh6.ggpht.com/_u7a1IFxc4WI/TM-voiNIw2I/AAAAAAAAASw/aav2hwqeG0c/1.gif'/>");
theText = theText.replace(/:\(/gi, "<img src='http://lh6.ggpht.com/_u7a1IFxc4WI/TM-voq7QQnI/AAAAAAAAAS0/UzoFJOCcPPU/2.gif'/>");
theText = theText.replace(/:-\?/gi, "<img src='http://lh5.ggpht.com/_u7a1IFxc4WI/TM-vua5MF2I/AAAAAAAAATU/N4X-ouMd1-I/39.gif'/>");
theText = theText.replace(/\[\-\(/gi, "<img src='http://lh6.ggpht.com/_u7a1IFxc4WI/TM-vuMg6RQI/AAAAAAAAATQ/rWj7euuKOZs/33.gif'/>");
theText = theText.replace(/:-o/gi, "<img src='http://lh6.ggpht.com/_u7a1IFxc4WI/TM-vpLiW1GI/AAAAAAAAATA/fPyPJcBks7s/13.gif'/>");
theText = theText.replace(/:-t/gi, "<img src='http://lh3.ggpht.com/_u7a1IFxc4WI/TM-vz4hwcNI/AAAAAAAAATo/4ySXuvQWma8/104.gif'/>");
theText = theText.replace(/:-ss/gi, "<img src='http://lh4.ggpht.com/_u7a1IFxc4WI/TM-vzUOH79I/AAAAAAAAATc/oNE5H5vcNtI/42.gif'/>");
theText = theText.replace(/b-\(/gi, "<img src='http://lh6.ggpht.com/_u7a1IFxc4WI/TM-vzrqI4MI/AAAAAAAAATk/BhfFnT0Gbro/66.gif'/>");
theText = theText.replace(/@-\)/gi, "<img src='http://lh6.ggpht.com/_u7a1IFxc4WI/TM-vziH8NXI/AAAAAAAAATg/2evEbN2cJwc/43.gif'/>");
theText = theText.replace(/=\)\)/gi, "<img src='http://lh6.ggpht.com/_u7a1IFxc4WI/TM-vuJ1G41I/AAAAAAAAATM/_jLHXvz6PTg/24.gif'/>");
bodyText.innerHTML = theText;
}replaceText();
//]]>
</script>
Sau đó tìm đến dòng :
<b:loop values=’data:post.comments’ var=’comment’>
và thêm trước nó thẻ :
<div id=’emocomments’>
Tìm thẻ đóng tương ứng với thẻ loop ở trên
</b:loop>
và thêm sau nó thẻ </div>
Tìm đến dòng :
<data:blogTeamBlogMessage/>
Và thêm sau nó đoạn code :
<script type=”text/javascript”>
//<![CDATA[
function moreSmilies() {
document.getElementById('smiley-more').style.display = 'inline';
document.getElementById('smiley-toggle').innerHTML = '<a href="javascript:lessSmilies()">←</a></span>';
}
function lessSmilies() {
document.getElementById('smiley-more').style.display = 'none';
document.getElementById('smiley-toggle').innerHTML = '<a href="javascript:moreSmilies()">→</a>';
}
//]]>
</script>
<div class=’emoticons’>
<img src=’http://lh6.ggpht.com/_u7a1IFxc4WI/TM-voiNIw2I/AAAAAAAAASw/aav2hwqeG0c/1.gif’/>:)
<img src=’http://lh6.ggpht.com/_u7a1IFxc4WI/TM-voq7QQnI/AAAAAAAAAS0/UzoFJOCcPPU/2.gif’/>:(
<img src=’http://lh4.ggpht.com/_u7a1IFxc4WI/TM-vt_XVZKI/AAAAAAAAATI/Q35_W0anT6A/21.gif’/>:))
<img src=’http://lh4.ggpht.com/_u7a1IFxc4WI/TM-vt5z16MI/AAAAAAAAATE/Hx-7Thmr6do/20.gif’/>:((
<img src=’http://lh6.ggpht.com/_u7a1IFxc4WI/TM-vuJ1G41I/AAAAAAAAATM/_jLHXvz6PTg/24.gif’/>=))
<span id=’smiley-more’ style=’display: none;’>
<img src=’http://lh6.ggpht.com/_u7a1IFxc4WI/TM-vzUt1yQI/AAAAAAAAATY/QHNvnj0gYbU/41.gif’/>=D&gt;
<img src=’http://lh3.ggpht.com/_u7a1IFxc4WI/TM-voxnkRKI/AAAAAAAAAS4/PjDn098vm3w/4.gif’/>:D
<img src=’http://lh6.ggpht.com/_u7a1IFxc4WI/TM-vpDb68dI/AAAAAAAAAS8/Yv0Uu3qzG_Q/10.gif’/>:P
<img src=’http://lh6.ggpht.com/_u7a1IFxc4WI/TM-vpLiW1GI/AAAAAAAAATA/fPyPJcBks7s/13.gif’/>:-O
<img src=’http://lh5.ggpht.com/_u7a1IFxc4WI/TM-vua5MF2I/AAAAAAAAATU/N4X-ouMd1-I/39.gif’/>:-?
<img src=’http://lh4.ggpht.com/_u7a1IFxc4WI/TM-vzUOH79I/AAAAAAAAATc/oNE5H5vcNtI/42.gif’/>:-SS
<img src=’http://lh3.ggpht.com/_u7a1IFxc4WI/TM-vz4hwcNI/AAAAAAAAATo/4ySXuvQWma8/104.gif’/>:-t
<img src=’http://lh6.ggpht.com/_u7a1IFxc4WI/TM-vuMg6RQI/AAAAAAAAATQ/rWj7euuKOZs/33.gif’/>[-(
<img src='http://lh6.ggpht.com/_u7a1IFxc4WI/TM-vziH8NXI/AAAAAAAAATg/2evEbN2cJwc/43.gif'/>@-)
<img src='http://lh6.ggpht.com/_u7a1IFxc4WI/TM-vzrqI4MI/AAAAAAAAATk/BhfFnT0Gbro/66.gif'/>b-(
</span>
<span id='smiley-toggle'><a href="javascript:moreSmilies()">→</a></span>
</div>
Tìm đến thẻ đóng :
]]></b:skin>
Và thêm đoạn code sau vào trước nó :
.emoticons {-moz-background-clip: -moz-initial;-moz-background-origin: -moz-initial;-moz-background-inline-policy: -moz-initial;text-align: left;}
.emoticons a, .emoticons a:hover {font-size: 28px;margin-left: 20px;text-decoration:none;}
Lưu lại và kiểm tra kết quả.
8. Tạo Sitemap cho Blogspot
sitemap-cho-nguoi-dung
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 chỉ cần vào Google Webmaster Tools, tỉm đến mục submit sitemap và thêm đoạn mã sau vào ô text : atom.xml?redirect=false&start-index=1&max-results=500
Đối với người dùng, các bạn cần tạo một sơ đồ thân thiện hơn :

Đề làm được như hình trên, các bạn hãy tạo một trang mới trong Blog của mình và đặt cho nó một cái tên bất kì, ở đây SEO Kool đặt tên là : Sơ đồ trang.
Sau đó các bạn chuyển sang chế độ HTML và chèn đoạn code sau :
<script style=”text/javascript” src=”http://www.abu-farhan.com/script/daftarisiblogger/blogtoc-min.js”></script>
<script src=”http://www.ngon.edu.vn/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc”></script>
Lưu lại và kiểm tra kết quả.
Trên đây là toàn bộ những thủ thuật mà SEO Kool đã áp dụng để tối ưu hóa cho Blogspot cá nhân của mình, các bạn có thể truy cập vào website : ngon.edu.vn để xem kết quả.
Tất cả những kiến thức ở trên đều được SEO Kool viết dựa trên kinh nghiệm cá nhân và nguồn dữ liệu sưu tầm từ Internet. Chúc các bạn thành công. Sorry vì bài viết hơi dài ^^!
Nguồn:Tối ưu hóa cho blogspot

Tạo bài viết khác, tin liên quan cho blogspot

bai-viet-khac-blogspot
Tạo bài viết khác, tin liên quan cho blogspot
bai-viet-khac-blogspot
     Tạo bài viết khác, tin liên quan cho blogspot

Thủ thuật này sẽ xuất hiện 2 phần 1 là danh sách bài liên quan có hình ảnh và một đoạn trích và 1 phần nữa là danh sách bài đăng ở dưới. ngoài ra hiện ngày tháng đăng bài khi chỉ chuột vào bài đăng.

Cách thực hiện như sau:
Bước 1: Các bạn vào Thiết Kế => Chỉnh sửa HTML sau đó dán đoạn Code  bên dưới lên trên thẻ </head>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
#related-posts {float:center;text-transform:none;height:100%;min-height:100%;padding:5px 0 0 5px;margin:0;}
#related-posts h2{margin:0 0 5px 0;background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMRCVXm5ZMqs-dy7AUb5KcUfczxWVJZxoTi8mZtPzljtt6aia19vHDXC4BEFBt5-THsqKlFpUyguT2Nn48KWtzBn-WFeans-i1E-qeRTn_XrXYFSe4NMNAwoIqHZIIDN_64RHDv99RUdI/s1600/newslienquan.jpg) no-repeat scroll left 0 transparent;height: 16px;}
#related-posts a{color:black;}
#related-posts a:hover{color:black;}
#related-posts  a:hover {background-color:#d4eaf2;}
.lienquan {background: #ddd;height:57px;float: left;padding-left: 1px;width: 145px;margin:1px;overflow:hidden;line-height:1.3em}
.related-posts {margin: 0;padding: 0}
.related-posts ul {margin: 0;padding: 0}
.related-posts ul li {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrz0TIME1qNhcM03BIzaZ214_io90nWGEV1GZXkKkTGBbhVX4pEtJsHE5thbV6mr1Fct4s2M10rTRcOWjSmH2kvVt7ueARJY93X1vQ3dPojjPkavfPrBEQby0PJ3huccdCpFMBEmWXxva6/s1600/list.png) no-repeat top left;list-style-type: none;margin: 0 0 2px 5px;padding: 2px 0 0 18px;word-wrap: break-word}
</style>
<script type='text/javascript'>
//<![CDATA[
var relatedTitles = new Array();
var relatedTitlesNum = 0;
var relatedUrls = new Array();
var thumburl = new Array();
function related_results_labels_thumbs(json) {
for (var i = 0; i < json.feed.entry.length; i++) {
var entry = json.feed.entry[i];
relatedTitles[relatedTitlesNum] = entry.title.$t;
try
{thumburl[relatedTitlesNum]=entry.media$thumbnail.url;}
catch (error){
s=entry.content.$t;a=s.indexOf("<img");b=s.indexOf("src=\"",a);c=s.indexOf("\"",b+5);d=s.substr(b+5,c-b-5);
if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!=""))
{thumburl[relatedTitlesNum]=d;} else {if(typeof(defaultnoimage) !== 'undefined') thumburl[relatedTitlesNum]=defaultnoimage; else thumburl[relatedTitlesNum]="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgELXPwAcu2JaEBgAb61KcNB_wThyphenhypheneHuaYjRPS97-EBh3Qv16hyphenhyphenpur4jrhDrey0IgAejYL786v8l0Kyt6CUonTT6ybEH0fbmQvp5Pn1-IOlz-v3MSJ2YkRH-2HX9AsZSW5B0mROkpMyjVs/s400/noimage.png";}
}
if(relatedTitles[relatedTitlesNum].length>35) relatedTitles[relatedTitlesNum]=relatedTitles[relatedTitlesNum].substring(0, 35)+"...";
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
relatedUrls[relatedTitlesNum] = entry.link[k].href;
relatedTitlesNum++;
}
}
}
}
function removeRelatedDuplicates_thumbs() {
var tmp = new Array(0);
var tmp2 = new Array(0);
var tmp3 = new Array(0);
for(var i = 0; i < relatedUrls.length; i++) {
if(!contains_thumbs(tmp, relatedUrls[i]))
{
tmp.length += 1;
tmp[tmp.length - 1] = relatedUrls[i];
tmp2.length += 1;
tmp3.length += 1;
tmp2[tmp2.length - 1] = relatedTitles[i];
tmp3[tmp3.length - 1] = thumburl[i];
}
}
relatedTitles = tmp2;
relatedUrls = tmp;
thumburl=tmp3;
}
function contains_thumbs(a, e) {
for(var j = 0; j < a.length; j++) if (a[j]==e) return true;
return false;
}
function printRelatedLabels_thumbs(current) {
var splitbarcolor;
if(typeof(splittercolor) !== 'undefined') splitbarcolor=splittercolor; else splitbarcolor="#d4eaf2";
for(var i = 0; i < relatedUrls.length; i++)
{
if((relatedUrls[i]==current)||(!relatedTitles[i]))
{
relatedUrls.splice(i,1);
relatedTitles.splice(i,1);
thumburl.splice(i,1);
i--;
}
}
var r = Math.floor((relatedTitles.length - 1) * Math.random());
var i = 0;
if(relatedTitles.length>0) document.write('<h2>'+relatedpoststitle+'</h2>');
document.write('<div style="clear: both;"/>');
while (i < relatedTitles.length && i < 20 && i<maxresults) {
document.write('<div class="lienquan"><a style="text-decoration:none;padding:3px;float:left;"');
document.write(' href="' + relatedUrls[r] + '"><img style="width:60px;height:40px;border:1px solid #A8A8A8;padding:4px;background:#fff;margin-right:4px; float: left;" src="'+thumburl[r]+'" /><span style="color: #006633;font-family: Arial;font-size: 12px;font-weight: normal;text-align: justify">'+relatedTitles[r]+'</span></a></div>');
i++;
if (r < relatedTitles.length - 1) {
r++;
} else {
r = 0;
}
}
document.write('</div>');
relatedUrls.splice(0,relatedUrls.length);
thumburl.splice(0,thumburl.length);
relatedTitles.splice(0,relatedTitles.length);
}
//]]>
</script>
<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){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){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>
- Điều trỉnh height và width mình tô màu đỏ ở trên cho phù hợp với Blog của bạn nha:D
Lưu Template lại.
Bước 2: Chọn Mở rộng tiện ích mẫu và dán Code sau bên dưới dòng:
<div class='post-footer-line post-footer-line-2'/>
hoặc
<div class='post-footer-line post-footer-line-1'/>
Code:
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=9&quot;' type='text/javascript'/>
</b:loop>
<script type='text/javascript'>
var currentposturl=&quot;<data:post.url/>&quot;;
var maxresults=9;
var relatedpoststitle=&quot;&quot;;
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div>
<div style='margin-bottom:5px;clear:both'/>
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBxWleKF5AkML1ouDEBYPv2_S_AbnCCIE-Ug8f10FfjWqNteX_CttlHdhoVtuoU8rLhowz5ozJBo4c3M0UfD3mN2RDkAXtD9gxubIr6AefHUF6WfEw2V2rrdzxCx97H40Z8G6Mr7JNoK4/s1600/cac-tin-khac-namkna-blogspot-com-ngoctra.jpg'/>
<div class='related-posts'>
<b:loop values='data:post.labels' var='label'>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&quot;' type='text/javascript'/>
</b:loop>
<script type='text/javascript'>var maxresults=12;removeRelatedDuplicates();printRelatedLabels(&#39;<data:post.url/>&#39;);</script>
</div>
<div class='clear'/>
</b:if>
Trong đó các bạn chú ý:
- max-results=9&quot là số bài ở dạng thumbnail
- var maxresults=12 là số bài ở dạng list.
Nguồn: Tạo bài viết khác, tin liên quan cho blogspot

Hướng Dẫn Tạo Sitemap Cho Các Blogger Sử Dụng Blogspot

Như các bạn đã biết, sitemap là thành phần không thể thiếu trong website của bạn, nó giúp cho các bộ máy tìm kiếm (Search Engines) dễ dàng crawls website của bạn. Tuy nhiên, đối với các blogger sử dụng blogspot thì vấn đề này bị hạn chế, bởi blogspot chỉ hỗ trợ sitemap cho 26 bài viết gần đây nhất thôi. Nếu blog của bạn có hàng trăm, hàng nghìn bài viết thì sao? với hạn chế như trên thì các search engines bots sẽ không thể nào index bài viết của các bạn được.

Trong quá trình làm blog, marketing online có biết qua một số cách tạo site map cho blogger. Trong bài viết này, marketing online xin chia sẻ với các bạn 1 cách rất đơn giản mà ai cũng có thể làm được, với cách này blog của bạn sẽ nhanh chóng có được sitemap và bài viết của bạn cũng sẽ nhanh chóng được index. Cách này áp dụng được cho cả các blogspot dạng *.blogspot.com và dạng custom domain sử dụng blogspot.


Bước 1: Các bạn vào link này để generate sitemap cho blog của mình. Bạn điền blog của mình vào rồi bấm Generate Sitemap

Bước 2: Sau khi generate xong sitemap, các bạn copy hết tất cả kết quả có được.

Bước 3: Các bạn đăng nhập vào phần quản trị blogspot của bạn. Vào Settings -> Search Preferences -> Crawlers and indexing -> Chọn Edit ở chỗ Custom Rotbots.txt -> Paste hết những thứ đã copy ở Bước 2 vào

Save lại. Vậy là xong. Các search engine sẽ tự động tìm thấy file sitemap trên blog của bạn thông qua file robots.txt
Nguồn: Hướng Dẫn Tạo Sitemap Cho Các Blogger Sử Dụng Blogspot

CÁCH TẠO SITEMAP CHO BLOGSPOT

sitemap
sitemap 

Sitemap cho Blogspot

Nguồn : thủ thuật blog
Sơ đồ site (sitemap) rất quan trọng cho một website cũng như cho webblog. Nó giúp người lướt web dễ dàng tìm đến những chuyên mục trong toàn site để tìm một bài viết nào đó, ngoài ra còn giúp cho webmaster quản lý chặt chẽ nội dung site. Đối với cộng đồng Blogger, lâu nay các blogspotter vẫn hay dùng Table of Contents bằng script của Abu Farhan. Kiểu sitemap này có một điểm yếu là liệt kê tất cả các nhãn trên blogspot. Tuy nhiên các blogspotter thì lại thích liệt kê bài viết của một số nhãn nào đó (tức là nếu không thích liệt nhãn nào thì nhãn đó sẽ không nằm trong Sitemap, điểm này rất cần thiết).
Giải pháp tối ưu là phải làm sao có một sitemap đáp ứng được nhu cầu tùy biến của blogspotter. Sau khi nghiên cứu vấn đề này, mình đã nghĩ ra ý tưởng vận dụng cách liệt kê các bài viết của một nhãn, một script rất phổ biến trên cộng đồng Blogger, để tạo ra Sitemap, kết hợp CSS tạo hai cột, vừa tiết kiệm không gian web, vừa giúp người dùng dễ dàng tùy biến theo ý thích, Demo

Để tạo Sitemap như vậy, bạn hãy thực hiện như sau.

Bước 1. Đăng nhập Blogger, vào Posting (Đăng bài viết) để tạo một bài viết có tiêu đề là Sitemap (để trống phần nội dung), xuất bản bài viết để lấy URL cho trang Sitemap.

Bước 2. Vào Design >> Edit HTML. Đặt đoạn code sau đây vào trước thẻ </head>.


<b:if cond='data:blog.url == &quot;URL_trang_Sitemap&quot;'>
<script type='text/javascript'>
//<![CDATA[
function allpostslist(json) {
document.write('<ul>');
for (var i = 0; i < json.feed.entry.length; i++)
{
for (var j = 0; j < json.feed.entry[i].link.length; j++) {

if (json.feed.entry[i].link[j].rel == 'alternate') {

break;

}

}

var entryUrl = "'" + json.feed.entry[i].link[j].href + "'";
var entryTitle = json.feed.entry[i].title.$t;
var item = "<li>" + "<a href="+ entryUrl + '" target="_blank">' + entryTitle + "</a> </li>";

document.write(item);
}

document.write('</ul>');
}
//]]>
</script>
<style type='text/css'>
#sitemap{width:900px;margin:0;padding-bottom:15px;background:#ffffff;float:left;}
#sitemap ul li {list-style: disc url(/iconslist.gif) inside; vertical-align: top; padding-left:10px;margin: 0;}#sitemap ul li:hover {list-style: disc url(/iconslisthover.png) inside; vertical-align: top;padding-left:10px;margin: 0;}
.sm-left{float:left;width:45%;margin:0 20px 0px 20px;font-size:14px;tex-align:justify}
.sm-right{float:right;width:45%;;margin:0 20px 0px 20px;font-size:14px;tex-align:justify}
p.smtitle {border-bottom:1px dotted #789;clear:both;color: #2554C7;font-family:Century Gothic;font-size:25px;padding:10px 50px 5px 0;text-align:right;text-shadow:2px 2px 1px #789;text-transform:lowercase;}
#content-wrapper{display:none}
</style>
</b:if>

Trong đoạn CSS ở trên, chú ý thuộc tính display:none để ẩn đi một số ID và CLASS cần thiết. Tải 2 file icon về áp dụng cho blogspot của bạn, tránh dùng chung file:iconslist.gif và iconslisthover.png.

Lưu Template.

Bước 3. Tìm dòng <div id='content-wrapper'> và đặt trước nó bằng đoạn code bên dưới.

<b:if cond='data:blog.url == &quot;URL_trang_Sitemap&quot;'>
<div id='sitemap'>
<div class='sm-left'>
<p class='smtitle'><a href='/search/label/Nhãn 1?max-results=10'>Nhãn 1</a></p>
<script src='/feeds/posts/summary/-/Nhãn 1?max-results=500&amp;alt=json-in-script&amp;callback=allpostslist'/>

<p class='smtitle'><a href='/search/label/Nhãn 2?max-results=10'>Nhãn 2</a></p>
<script src='/feeds/posts/summary/-/Nhãn 2?max-results=500&amp;alt=json-in-script&amp;callback=allpostslist'/>

<p class='smtitle'><a href='/search/label/Nhãn 3?max-results=10'>Nhãn 3</a></p>
<script src='/feeds/posts/summary/-/Nhãn 3?max-results=500&amp;alt=json-in-script&amp;callback=allpostslist'/>

</div>

<div class='sm-right'>

<p class='smtitle'><a href='/search/label/Nhãn A?max-results=10'>Nhãn A</a></p>
<script src='/feeds/posts/summary/-/Nhãn A?max-results=500&amp;alt=json-in-script&amp;callback=allpostslist'/>

<p class='smtitle'><a href='/search/label/Nhãn B?max-results=10'>Nhãn B</a></p>
<script src='/feeds/posts/summary/-/Nhãn B?max-results=500&amp;alt=json-in-script&amp;callback=allpostslist'/>

<p class='smtitle'><a href='/search/label/Nhãn C?max-results=10'>Nhãn C</a></p>
<script src='/feeds/posts/summary/-/Nhãn C?max-results=500&amp;alt=json-in-script&amp;callback=allpostslist'/>

<p style="font-family:verdana,arial,sans-serif;font-size:10px;"><a href="http://www.vnngiaitri.com/2012/06/cac-tao-sitemap-cho-blogspot.html" target="_blank">Add to your blogspot ?</a></p>
</div>
</div>
<div style='clear: both;'/>
</b:if>

Chú ý: Ở đây phần nằm sau thẻ <div class='sm-left'> là cột bên trái, phần nằm sau thẻ<div class='sm-right'> là cột bên phải. Tùy theo số lượng nhãn và số lượng bài viết trên blogspot mà bạn phân phối và bố trí thêm bớt các nhãn sao cho cân đối, theo định dạng như trên
Nguồn: CÁCH TẠO SITEMAP CHO BLOGSPOT

Tự động chèn thẻ Alt và Title cho ảnh trong blogger

Chắc hẳn các webmaster đều muốn blog và website của mình được seo tốt. Và họ dùng rất nhiều thủ thuật để hỗ trợ việc đó. Đối với các hệ thông hiện đại như wordpress hay joomla thì có rất nhiều plugin hỗ trợ. Nhưng đối với Blogger(blogspot) thì khác nó không được dễ dàng như vậy.

Trong nhưng thủ thuật SEO thì seo media cũng rất quan trọng, ở đây mình nói đến Seo Image, do đó để toàn diện hơn bạn nên thêm tiện ích này vào cho blog của mình.

Khi ta chèn thủ công thì phải theo mẫu này:
<img src="http://example.com/images.jpg" ALT="IMAGE NAME" TITLE="Title name">

Nhưng đó sẽ là ác mộng nếu như bài viết của chúng ta có nhiều hình ảnh, code loàng ngoằng hoạc khi chúng ta lười icon_e_biggrin.Do đó thay vì chèn thủ công cho những lần post bài, bạn chỉ việc chèn đoạn code sau vào trước thẻ </body> để sử dụng mãi mãi cho các lần post tiếp theo mà ko cần chèn thủ công!

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

chen-alt-va-title-cho-anh-trong-blogger
Tự động chèn thẻ Alt và Title cho ảnh trong blogger


Do vậy khi ta viết bài, hãy đặt tên cho những bức ảnh của bài viết sao cho thật liên quan, và đó cũng chính là từ khóa để SE tìm đến bạn!



Tham khảo thêm:
Tối ưu hóa thẻ Alt và Title Image cho hình ảnh
Rất nhiều Webmaster không nhận thấy sự khác nhau giữa thẻ alt và title. Trong bài viết này vietSEO sẽ cùng các bạn tìm hiểu sự khác nhau cơ bản giữa thẻ alt image và title image và cách sử dụng chúng.

<img scr=”hinh-anh.jpg” alt=”mo-ta-hinh-anh” title=”tieu-de-hinh-anh”></img>

Alt text có nghĩa là alternative information – thông tin thay thế cho người dùng không hiển thị được hoặc chọn ẩn hình ảnh trong trình duyệt hoặc đơn giản là các user agents không có khả năng hiển thị hình ảnh. Thẻ alt mô tả hình ảnh nhằm cung cấp thông tin cho những người dùng vừa kể trên như các bạn có thể quan sát qua hình minh họa bên cạnh.

Nếu không có thẻ alt cho hình ảnh, trình duyệt Internet Explorer hay Firefox sẽ hiển thị một biểu tượng rỗng lỗi. Năm ngoái, Google đã chính thức tuyên bố rằng máy tìm kiếm sẽ tập trung vào phân tích văn bản trong thẻ alt để hiểu rõ hơn nội dung của tệp tin ảnh.

Title image công cấp thông tin bổ sung (additional information) và tuân theo các chỉ dẫn về tiêu đề : phải ngắn gọn, miêu tả chính xác, hợp lý. Ví dụ trong Internet Explorer hay Firefox, bạn sẽ thấy hiển thị như sau khi lướt chuột qua file hình ảnh :

Qua các thông tim trên, chúng ta có thể rút ra kết luận rằng :

Cả hai thẻ alt và title đề quan trọng đối với người dùng mặc dù thẻ alt có tỏ ra quan trọng hơn đối với máy tìm kiếm. Chúng đều cung cấp thông tin về hình ảnh nhằm khuyến khích người dùng hiển thị chúng.

Theo chuẩn W3C thì thẻ title không bắt buộc, trong khi đó thẻ alt được khuyến nghị. Thẻ alt còn góp phần giúp tăng khả năng truy cập cho người dùng khiếm thị (accessibility ) bao gồm cả các máy tìm kiếm như đã nói ở trên.

Hãy thêm các từ khóa liên quan tới hình ảnh trong cả hai thẻ nhưng văn bản trong cả hai thẻ phải khác nhau. Việc nhồi nhét từ khóa và trong thẻ alt và Title sẽ không mang lại lợi ích gì, hãy tìm các từ khóa chính xác phản ảnh đúng nội dung hình ảnh. Nên bỏ thời gian ra tối ưu hóa các thẻ hình ảnh vì nó sẽ mang lại cho các bạn lượng tìm kiếm hình ảnh từ Google Images .

Thêm một điểm quan trọng các Webmaster cần lưu ý là khi sử dụng các banner cỡ lớn trong phần header, thì phần mô tả alt của banner đóng vai trò quan trọng góp phần giúp Google hiểu thêm nội dung của Website.

 Nguồn: Tự động chèn thẻ Alt và Title cho ảnh trong blogger

Twitter Delicious Facebook Digg Stumbleupon Favorites More

 
Design by Free WordPress Themes | Bloggerized by Lasantha - Premium Blogger Themes | Best Hostgator Coupon Code