OBin's Blog: seo blogger

New

Đối với một website có nhiều bài viết trích dẫn link nguồn hoặc link download thì việc tạo một trang chờ chuyển hướng là vô cùng quan trọng vì nó giúp giải quyết toàn bộ link out gây ảnh hưởng xấu đến SEO. Nhưng đối với blogger thì phải làm như thế nào? Sau đây mình xin chia sẻ cách làm cực kì đơn giản, cách làm này mình cũng thực hiện cho blog này :D

Hướng dẫn tạo trang chờ chuyển hướng ( Redirect Page ) cho blogger

Các bạn thực hiện theo các bước sau:

1 Tạo trang chờ chuyển hướng (Bạn làm theo các bước như trong hình)

Bạn đăng nhập admin Blogger => Chọn tab Trang => Chọn Tab Trang mới để tạo một trang mới

Tại tab tạo Trang mới bạn làm theo các bước như trong hình trên, bước 5 bạn copy đoạn code bên dưới:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
 function getQueryVariable(variable)
{
       var query = window.location.search.substring(1);
       var vars = query.split("&");
       for (var i=0;i<vars.length;i++) {
               var pair = vars[i].split("=");
               if(pair[0] == variable){return pair[1];}
       }
       return(false);
}

var time = 20;
var page = getQueryVariable("t");
function countDown(){
time--;
gett("timecount").innerHTML = time;
if(time == -1){
window.location = page;
}
}
function gett(id){
if(document.getElementById) return document.getElementById(id);
if(document.all) return document.all.id;
if(document.layers) return document.layers.id;
if(window.opera) return window.opera.id;
}
function init(){
if(gett('timecount')){
setInterval(countDown, 1000);
gett("timecount").innerHTML = time;
}
else{
setTimeout(init, 50);
}
}
document.onload = init();

$(document).ready(function(){
 $('.link-out-btn').click(function(){
    window.location = page;
 });
 $('#linkout').text(page);
});

</script>
<br />
<div>
<h3>
Bạn vừa nhấp vào một liên kết không thuộc <b>www.obinb.com</b>, trang sẽ tự chuyển sang liên kết bạn vừa nhấp sau <span id="timecount"></span> giây!</h3>
<div>
Liên kết bạn muốn đến:</div>
<div>
<span id="linkout"></span></div>
<div class="link-out-btn">
Click vào đây để chuyển trang ngay và luôn!</div>
</div>

Lưu ý: Trong đoạn code trên
- var time = 20 nghĩa là thời gian chờ chuyển là 20 giây, bạn có thể thêm hoặc bớt
- Bạn sửa nội dung www.obinb.com theo ý bạn
- Styles page này bạn tự chỉnh tùy ý.

Sau đó bạn xuất bản page, khi xuất bản bạn được link có dạng như sau:

http://www.obinb.com/p/blog-page_3.html

2 Cách sử dụng

Cách sử dụng rất đơn giản, khi chèn link bạn chỉ cần thêm vào trước link out như sau:
Link out ban đầu : http://linkout-page.com
Link out sau khi thêm: http://www.obinb.com/p/blog-page_3.html?t=http://linkout-page.com
Nghĩa là sau khi click vào link out bạn vừa chèn, thì tự động chuyển sang trang chờ chuyển hướng bạn vừa tạo.
Các bạn có thể xem Demo

Rất đơn giản phải không nào? Chúc các bạn thành công!

Xem thêm:
- Hướng dẫn gắn nút like facebook cho blogger
- Top 20 template blogger cực đẹp, download miễn phí

- Tạo widget Bài Viết Mới Nhất (Recent Post) có ảnh thumbnail cho Blogger
- Hướng dẫn upload file js, css hay images lên Google Drive sử dụng cho Blogger hoặc website
- Ebook hướng dẫn cách tạo và chỉnh sửa một Blogger Templates
- Cách gắn breadcrumbs cho blogger
- Hướng dẫn gắn các thẻ meta OpenGraph vào blogger
- Hướng dẫn sửa lỗi cấu trúc dữ liệu (Structured Data) trong Blogger

Graph Meta là thẻ meta không thể thiếu khi bạn muốn làm SEO web thông qua mạng xã hội Facebook, nhưng đối với một blogger thì thế nào? Sau đây là hướng dẫn các bạn cách gắn thể Graph Meta đơn giản nhất.

1 Vào Template => Edit Template => Ctr + F tìm thẻ <html

=> Chèn code định dạng dưới vào như sau: <html codehere>

xmlns:og='http://ogp.me/ns#

2 Ctr + F tìm <title><data:blog.pageTitle/></title> chèn đoạn code sau lên trên:

<!-- Open Graph Meta Tags begin -->

    <meta expr:content='data:blog.pageTitle' property='og:title'/>

    <b:if cond='data:blog.pageType == &quot;item&quot;'>

    <b:if cond='data:blog.postImageThumbnailUrl'>

      <meta expr:content='data:blog.postImageThumbnailUrl' property='og:image'/>

    </b:if>

    </b:if>

    <b:if cond='data:blog.pageType != &quot;item&quot;'><meta content='linkDefaultImageOg.jpg' property='og:image'/></b:if>

    <meta expr:content='data:blog.title' property='og:title'/>

    <meta expr:content='data:blog.canonicalUrl' property='og:url'/>

    <b:if cond='data:blog.metaDescription'>

      <meta expr:content='data:blog.metaDescription' property='og:description'/>

    </b:if>

    <meta content='61737022491256' property='fb:app_id'/> <!-- App id facebook  Nếu bạn không có thì xóa dòng này-->

    <!-- Open Graph Meta Tags end-->

3 Sửa những nội dung mặc định thành của website bạn và lưu lại.

- linkDefaultImageOg.jpg = Link hình ảnh mặc định của blog
- 61737022491256 = app id Facebook

Thử like hoặc share một nội dung nào đó trên trang bạn xem, bài viết sẻ được hiển thị đầy đủ gồm có Title, images, description, link => Bạn đã thành công!

Xem thêm:
- Ebook hướng dẫn cách tạo và chỉnh sửa một Blogger Templates
- Hướng dẫn sửa lỗi cấu trúc dữ liệu (Structured Data) trong Blogger
- Hướng dẫn gắn nhanh comment Facebook cho blogger
- Tạo widget Bài Viết Mới Nhất (Recent Post) có ảnh thumbnail cho Blogger

Tạo và thêm sitemap vào Webmaster trong Blogger là một bước trong quá trình làm SEO cho blog của bạn. Sau đây mình sẻ hướng dẫn cách tạo sitemap đơn giản cho blogger:

Bước 1: Tạo sitemap
Thực ra sitemap trong blogger đã có sẵn, bạn chỉ cần móc nó ra sử dụng thôi
Bạn copy đoạn text sau:

User-agent: *
Disallow: /search
Allow: /
 
Sitemap: http://yourblogger.blogspot.com/atom.xml?redirect=false&start-index=1&max-results=500

dashboard >> settings >> search preferences

dashboard >> settings >> search preference

Đăng nhập vào admin blogger -> dashboard >> settings >> search preferences -> Paste vào khung robots.txt:

Sau đó nhấn nút Save Changes

Bước 2: Submit Blogger sitemap của bạn trong Google webmaster tools -> add/test sitemaps:

 Sau đó bạn nhấn nút Submit sitemap để hoàn tất.

Sau đây là các bước đơn giản để gắn breadcrumbs (thanh điều hướng) cho blogger của bạn.

- Đăng nhập trình quản lý blogger của bạn => blogger.com
- Chọn Layouts Sau đó chọn Edit HTML
- Để an toàn trước khi edit template bạn nên download một bản về backup
- Bây giờ bạn tìm đoạn code sau :

<b:include data='top' name='status-message'/>

Và đổi thành đoạn code dưới đây:

<b:include data='top' name='status-message'/>
<b:include data='posts' name='breadcrumb'/>

- Tiếp theo bạn tìm đoạn code sau:

<b:includable id='main' var='top'>

Và thay thế bằng đoạn code này:

<b:includable id='breadcrumb' var='posts'>
<b:if cond='data:blog.homepageUrl == data:blog.url'>
<!-- Không hiện ở trang chủ -->
<b:else/>
<b:if cond='data:blog.pageType == "item"'>
<!-- breadcrumb chỉ hiện trong trang chi tiết -->
<p class='breadcrumbs'>
<span class='post-labels'>
<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>
<b:else/>
»Unlabelled
</b:if>
» <span><data:post.title/></span>
</b:loop>
</span>
</p>
<b:else/>
<b:if cond='data:blog.pageType == "archive"'>
<!-- breadcrumb chỉ hiện trong trang label archive và trang search -->
<p class='breadcrumbs'>
<span class='post-labels'>
<a expr:href='data:blog.homepageUrl'>Home</a> » Archives for <data:blog.pageName/>
</span>
</p>
<b:else/>
<b:if cond='data:blog.pageType == "index"'>
<p class='breadcrumbs'>
<span class='post-labels'>
<b:if cond='data:blog.pageName == ""'>
<a expr:href='data:blog.homepageUrl'>Home</a> » All posts
<b:else/>
<a expr:href='data:blog.homepageUrl'>Home</a> » Posts filed under <data:blog.pageName/>
</b:if>
</span>
</p>
</b:if>
</b:if>
</b:if>
</b:if>
</b:includable>
<b:includable id='main' var='top'>

Cuối cùng bạn tìm đoạn code sau:

]]></b:skin>

Và thay thế bằng đoạn code bên dưới:

.breadcrumbs {
padding:5px 5px 5px 0px;
margin: 0px 0px 15px 0px;
font-size:95%;
line-height: 1.4em;
border-bottom:3px double #e6e4e3;
}
]]></b:skin>

Lưu lại và xem kết quả ở trang chi tiết bài viết nhé!

Lưu ý là thanh breadcrumb sẻ tự động lấy danh mục là thẻ label cuối cùng của bài viết đó!

Chúc các bạn thành công!

Có thể bạn quan tâm

Xem nhiều trong tuần

Giải đáp