SEO với Heading Tab trong Blogger Template

Dưới đây là một số hướng dẫn cơ bản để làm cho Blogger Template trở nên thân thiện hơn với bộ máy tìm kiếm. Trong khuôn khổ bài viết này, namkna sẽ sử dụng template Minima để làm ví dụ. Nếu các bạn sử dụng Template khác thì sẽ vất vả hơn một chút, bởi phải hiểu được bố cục của template mình đang sử dụng cũng như cách bố trí Heading tab ( H1, H2, H3,…) trong template đó.

Thực hiện như sau : Vào Thiết kế > Chỉnh sửa HTML > Tick chọn Mở rộng mẫu tiện ích. Các bạn nên sử dụng tổ hợp phím Ctrl + F trên bàn phím để tìm kiếm code nhanh hơn và dễ dàng hơn.

1. Thay đổi tiêu đề bài đăng ( Post Title )

Tìm đoạn code bên dưới :

<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>

và thay đổi thành

<b:if cond='data:blog.pageType != &quot;item&quot;'>     
<b:if cond='data:post.title'>      
<h2 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>      
</h2>      
</b:if>      
<b:else/>      
<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>

2. Thay đổi tiêu đề Blog ( Blog Title )

Tìm đoạn code bên dưới :

<h1 class='title' style='background: transparent; border-width: 0px'>     
<b:include name='title'/>      
</h1>

và thay bằng đoạn code sau

<b:if cond='data:blog.pageType != &quot;item&quot;'>     
<h1 class='title' style='background: transparent; border-width: 0px'>      
<b:include name='title'/>      
</h1>      
<b:else/>      
<p class='title' style='background: transparent; border-width: 0px'>      
<b:include name='title'/>      
</p>      
</b:if>

Kế tiếp, tìm đoạn code sau

<h1 class='title'>     
<b:include name='title'/>      
</h1>

và thay thế thành

<b:if cond='data:blog.pageType != &quot;item&quot;'>     
<h1 class='title'>      
<b:include name='title'/>      
</h1>      
<b:else/>      
<p class='title'>      
<b:include name='title'/>      
</p>      
</b:if>

3. Tùy chỉnh CSS

Các bạn tìm đoạn code sau

.post h3 {     
margin:.25em 0 0;      
padding:0 0 4px;      
font-size:140%;      
font-weight:normal;      
line-height:1.4em;      
color:$titlecolor;      
}      
.post h3 a, .post h3 a:visited, .post h3 strong {      
display:block;      
text-decoration:none;      
color:$titlecolor;      
font-weight:normal;      
}      
.post h3 strong, .post h3 a:hover {      
color:$textcolor;      
}

và thay thế thành

.post h1, .post h2 {     
margin:.25em 0 0;      
padding:0 0 4px;      
font-size:140%;      
font-weight:normal;      
line-height:1.4em;      
color:$titlecolor;      
}      
.post h1 a, .post h1 a:visited, .post h1 strong, .post h2 a, .post h2 a:visited, .post h2 strong{      
display:block;      
text-decoration:none;      
color:$titlecolor;      
font-weight:normal;      
}      
.post h1 strong, .post h1 a:hover, .post h2 strong, .post h2 a:hover {      
color:$textcolor;      
}

Kế tiếp, tìm đoạn code bên dưới

#header h1 {     
margin:5px 5px 0;      
padding:15px 20px .25em;      
line-height:1.2em;      
text-transform:uppercase;      
letter-spacing:.2em;      
font: $pagetitlefont;      
}

và thay bằng đoạn code sau

#header h1, #header p {     
margin:5px 5px 0;      
padding:15px 20px .25em;      
line-height:1.2em;      
text-transform:uppercase;      
letter-spacing:.2em;      
font: $pagetitlefont;      
}

Tiếp theo, các bạn tìm đoạn code

h2.date-header {     
margin:1.5em 0 .5em;      
}

và thay thế nó bằng đoạn code này ( xóa H2 tab )

.date-header {     
margin:1.5em 0 .5em;      
}

Do đã xóa H2 tab của date-header, nên bạn phải tìm đoạn code sau trong template

<h2 class='date-header'><data:post.dateHeader/></h2>

và thay nó bằng đoạn code bên dưới

<div class='date-header'><data:post.dateHeader/></div>

4. Save Template

Trên đây là một số thao tác tùy chỉnh Heading Tab để làm cho Template của bạn trở nên thân thiện hơn với các bộ máy tìm kiếm. Các phương pháp khác iTechPlus sẽ giới thiệu sau. Hy vọng bài viết này sẽ có ích đối với bạn.

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