10 lời khuyên để tối ưu hóa tiêu đề cho SEO blogspot

Read More...

Tạo bài viết liên quan cho blog (Related Posts)

Tiện ích cho phép hiển thị các bài viết liên quan (có cùng nhãn) ở cuối mỗi bài viết. Thủ thuật có sử dụng CSS để làm cho tiện ích trông bắt mắt hơn. Ngoài ra, cũng để khách viếng thăm dễ theo dõi chủ đề liên quan hơn.
Thủ thuật blog: Tạo bài viết liên quan cho blog (Related Posts)

Giới thiệu: Tiện ích cho phép hiển thị các bài viết liên quan (có cùng nhãn) ở cuối mỗi bài viết. Thủ thuật có sử dụng CSS để làm cho tiện ích trông bắt mắt hơn. Ngoài ra, cũng để khách viếng thăm dễ theo dõi chủ đề liên quan hơn.

CÁCH THỰC HIỆN
1. Đăng nhập Blogger Dashboard (Bảng điều khiển)
2. Chọn: Design (Thiết kế) > Edit HTML (Chỉnh sữa HTML)
3. Đánh dấu chọn ô: Expand Widget Templates (Mở rộng mẫu tiện ích)

4. Chèn script

Bước 1: Tìm thẻ đóng </head>

- Thêm vào trước nó đoạn code sau:

<!-- Widget bài viết liên quan (1) -->
<style>
/*Khung chính của bài viết liên quan*/
#related-posts {
    float:left;
    min-width: 100%;
    margin: 30px 5px 30px 0;
    font: 11px Tahoma;
}

#related-posts .widget { 
    List-style-type: none;
    margin: 5px 0 5px 0;
    padding: 0;
}

#related-posts .widget h2, #related-posts h2 {
    color: #940f04; 
    font-size: 20px;
    font-weight: normal;
    margin: 5px 7px 0;
    padding: 0 0 5px;
}

/*Màu link của bài viết liên quan*/
#related-posts a {
    color: #318686;
    font-size: 13px;
    text-decoration: none;
}

/*Màu link khi rê chuột vào*/
#related-posts a:hover {
    color: #C4436A;
    text-decoration: underline;
}

#related-posts ul {
    border: medium none;
    margin: 10px;
    padding: 0;
}

#related-posts ul li {
    display: block;
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTQp4zCK2iUrDKFJB-2k0MCGofFV9xFSXwKsnmmoKDHOanlWFFMjBvqguQjJXLt0Ox4yrtBnQg6Se8tKXWthCYfcSl09fjjo6Wrw2Sl3WLbHIElmhNWMnookV-bQjnHpgD026aUMG9-Tlz/) no-repeat 0 0;
    margin: 0;
    padding: 0 0 1px 16px;
    margin-bottom: 5px;
    line-height: 2em;
    border-bottom:1px dotted #cccccc; /*Gạch đích dưới mỗi link bài viết liên quan*/
}
</style>

<script type='text/javascript'>
//<![CDATA[
var relatedTitles = new Array();
var relatedTitlesNum = 0;
var relatedUrls = new Array();
function related_results_labels(json) {
for (var i = 0; i < json.feed.entry.length; i++) {
var entry = json.feed.entry[i];
relatedTitles[relatedTitlesNum] = entry.title.$t;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
relatedUrls[relatedTitlesNum] = entry.link[k].href;
relatedTitlesNum++;
break;
}
}
}
}
function removeRelatedDuplicates() {
var tmp = new Array(0);
var tmp2 = new Array(0);
for(var i = 0; i < relatedUrls.length; i++) {
if(!contains(tmp, relatedUrls[i])) {
tmp.length += 1;
tmp[tmp.length - 1] = relatedUrls[i];
tmp2.length += 1;
tmp2[tmp2.length - 1] = relatedTitles[i];
}
}
relatedTitles = tmp2;
relatedUrls = tmp;
}
function contains(a, e) {
for(var j = 0; j < a.length; j++) if (a[j]==e) return true;
return false;
}
function printRelatedLabels() {
var r = Math.floor((relatedTitles.length - 1) * Math.random());
var i = 0;
document.write('<ul>');
while (i < relatedTitles.length && i < 20) {
document.write('<li><a href="' + relatedUrls[r] + '">' + relatedTitles[r] + '</a></li>');
if (r < relatedTitles.length - 1) {
r++;
} else {
r = 0;
}
i++;
}
}
//]]>
</script>

Bước 2: Tìm dòng <data:post.body/>

- Thêm vào sau nó đoạn code sau:

<!-- Widget bài viết liên quan (2) -->
<b:if cond='data:blog.pageType == "item"'>
<div id="related-posts">

  <div style='border-top:#AAAE95 1px dashed; margin: 0 50px 0 50px; padding-top:30px;'/>
<font face='Arial' size='3'><b>Bài viết liên quan: </b></font>

<font color='#FF0000'> <!-- Màu chữ label -->
<b:loop values='data:post.labels' var='label'> 
<data:label.name/> <!--Dòng code hiện label kế bên bài viết liên quan-->
<b:if cond='data:label.isLast != "true"'>
, <!--Dấu phẩy ngăn cách các label -->
</b:if>
<b:if cond='data:blog.pageType == "item"'>

<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=8"' type='text/javascript'/>
</b:if>
</b:loop>
</font>
<script type='text/javascript'>
removeRelatedDuplicates();
printRelatedLabels();
</script>
</div>
</b:if>

max-results=8 // Số bài viết liên quan hiển thị

Lưu ý: Đối với những blog có tiện ích đọc thêm (Read more...) thì việc bạn đặt code trên trước hay sau code của link Readmore đều không quan trọng (do 2 tiện ích này không thể xuất hiện chung trên một trang), quan trọng là các code này phải được đặt sau dòng <data:post.body/>


Bước 3: Save template. (Lưu mẫu)

THE END.

Read More...

Tối ưu thẻ h1 (Heading ) cho blogspot

Tối ưu thẻ h1 - Heading Tag (H1, H2, H3, H4, H5) cũng rất quan trọng đối với SEO. Tất cả các tiêu đề Widget của blogspot sử dụng thẻ H2. Nhưng template lại thường sử dụng H3 cho tiêu đề bài đăng và rất nhiều template khác sử dụng thẻ H2 cho tiêu đề bài.

Để nâng cao SEO, bạn cần sử dụng thẻ H1 cho tiêu đề bài viết. Ví dụ đoạn code sau:

<b:if cond='data:post.title'>
<h3 class='post-title entry-title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h3>
</b:if>

Trong ví dụ này thì template sử dụng thẻ H3 cho phần tiêu đề bài (nếu bạn không tìm ra thì có thể template của bạn sử dụng thẻ H2). Thay thế thẻ H3 (H2) trong ví dụ trên thành H1:

<b:if cond='data:post.title'>
<h1 class='post-title entry-title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h1>
</b:if>

Sau đó bạn cần sửa lại code CSS tương ứng của phần tiêu đề bài viết, làm tương tự như trên (thay H3 thành H1) hoặc chỉnh lại kích cỡ font của phần tiêu đề bằng cách thêm đoạn code sau vào trước ]]></b:skin>
h1.post-title, .post h1 #Blog1 h1, #Blog2 h1 { font-size:1.5em; }
Ở đây font-size là 1.5em, bạn có thể điều chỉnh theo ý muốn

Read More...

Tối ưu thẻ Meta Description cho từng bài viết trong Blogspot

Khi bạn chèn thẻ Meta Description cho mỗi bài viết trong blogspot sẽ giúp bài viết của bạn được tối ưu seo và nổi bật hơn với các trang kết quả tìm kiềm (SERPs). Bài viết này sẽ hướng dẫn các bạn làm thủ công để thêm thẻ meta description cho các bài viết.

Sử dụng meta description tags trong Blogspot có ưu điểm gì?
Tag miêu tả được dùng như Snipplet hiển thị dưới tiêu đề bài viết trong SERPs. Điều này rất hữu ích cho SEO (Search Engine Optimization). Từ thẻ này, khi các bạn tối ưu nó sẽ có ảnh hưởng không nhỏ đến thứ hạng từ khóa và ngoài ra trong danh sách kết quả tìm kiếm nó sẽ nổi bật và được chú ý hơn nên sẽ ảnh hưởng trực tiếp tới traffic.

Bằng cách thêm tag miêu tả bằng thủ công vào các bài viết thì bài viết của bạn sẽ là “duy nhất” trên trang kết quả tìm kiếm với miêu tả cụ thể về từng bài viết (title, description, keywords) giúp cho máy tìm kiếm và khách truy cập có thông tin chính xác hơn về bài viết của bạn cũng như giúp máy tìm kiếm đánh chỉ mục chuẩn xác và cụ thể hơn.


Cách thêm thẻ miểu tả cho mỗi bài viết trong Blog

Để thực hiện bạn cần thêm một vài dòng code trong mẫu Blogger của bạn.

1. Đăng nhập vào Blogger Bảng điều khiển (Dashboard) » Thiết kế (Design) » Chỉnh sửa HTML (Edit Html)


- Tìm (Ctrl – F) đoạn mã:

<b:include data=’blog’ name=’all-head-content’/>

2.  Thay thế đoạn mã trên bằng đoạn mã dưới.

b:include data=’blog’ name=’all-head-content’/>


<b:if cond=’data:blog.url == “http://www.vnblognet.com/“‘>


<meta content=’DESCRIPTION’ name=’description’/>

<meta content=’KEYWORDS’ name=’keywords’/> </b:if>

Thay thế “www.vnblognet.com” bằng URL bài viết của bạn. và điền đầy đủ các dữ liệu liên quan đến DESCRIPTION và KEYWORDS.

Read More...