Tối ưu giao diện để blogspot chuẩn SEO

Tự học Blogspot - Hiện nay có nhiều người SEO và mỗi người có một cách tối ưu khác nhau. Với blogspot, mình sẽ tối ưu giao diện để blogspot chuẩn SEO theo cách của mình, ai muốn làm khác thì cứ làm nhé, miễn sao SEO lên top là được chứ không quan trọng lắm đâu.

Mục lục seri các bài viết hướng dẫn tự thiết kế blogspot:

Tối ưu giao diện để blogspot chuẩn SEO

Tối ưu giao diện để blogspot chuẩn SEO - các tiêu chuẩn để web chuẩn SEO:

Toàn trang phải có 1 thẻ H1, có thể không cần H2 nhưng nếu có H3 thì nên có H2.
Nên có thanh điều hướng breadcrumbs
Trang chủ, chuyên mục, bài viết cần có title và meta description
Blog càng load nhanh càng tốt.
Trang càng nhiều text càng tốt.

Một số add-on cần cài đặt để hỗ trợ: Web Developer, Seoquake. Xem hướng dẫn cài đặt tại đây

1. Tối ưu thẻ thẻ heading <h1> <h2>

Tối ưu thẻ heading cho trang chủ

Sau khi kiểm tra trang chủ chúng ta sẽ thấy trên trang chủ không có H1, giờ ta sẽ dùng chính logo làm H1 và thêm H2 vào nhìn cho nuột nhé.

Vào Chỉnh sửa HTML --> Search "<a expr:href='data:blog.homepageUrl' style='display: block'>"

Thêm thẻ <h1> trước đoạn đó:

Nó sẽ thành như thế này:

<h1><a expr:href='data:blog.homepageUrl' style='display: block'>
<img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + "_headerimg"' expr:src='data:sourceUrl' expr:width='data:width' style='display: block'/>
</a></h1>

Vậy là logo đã trở thành H1 của trang rồi đó, không tin kiểm tra lại đi thì biết. Xong cái H1 của toàn trang.

Tiếp đến là thẻ H2 trong trang chủ, để có một thẻ H2 cũng rất đơn giản thôi, các bạn chỉ cần vào Bố cục --> Thân web trái --> Thêm tiện ích --> HTML/Javascript

Giờ viết một đoạn hoặc cứ thế cho thêm một cái H2 là ok. Ví dụ nhé:

<h2 style="color: black; background:none; border:none; font-size:20px;">Các bài đăng mới nhất:</h2>
<hr/>

Và nó sẽ thành như thế này:

Tối ưu giao diện để blogspot chuẩn SEO - tối ưu trang chủ

Thế nhưng cái đoạn Các bài đăng mới nhất: nó lại hiện cả ở label với bài viết, mà mình chỉ muốn nó hiện ở trang chủ thôi. Thế nên phải làm như thế này nữa:

Vào Chủ đề --> Chỉnh sửa HTML --> Tìm "Các bài đăng mới nhất:"

Ta sẽ tìm thấy đoạn này:

<b:widget-setting name='content'><h2 style="color: black; background:none; border:none; font-size:20px;">Các bài đăng mới nhất:</h2>
<hr/></b:widget-setting>
</b:widget-settings>
<b:includable id='main'>...</b:includable>

Nhấn vào chỗ ... ở <b:includable id='main'>...</b:includable> nó sẽ ra một đoạn như sau:

<b:includable id='main'>

<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:includable>

Thêm đoạn Code sau vào sau thẻ <b:includable id='main'>

<b:if cond='data:blog.url == data:blog.homepageUrl'>

Thêm </b:if> vào sau thẻ <b:include name='quickedit'/>. Cuối cùng đoạn đó sẽ thành như này:

<b:includable id='main'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>

<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:if>
</b:includable>

Lưu mẫu và xem kết quả, giờ widget Các bài đăng mới nhất: nó sẽ chỉ hiện thị ở trang chủ thôi.

Để cho trang chủ nó đệp 1 tý mình cho thêm một cái hình ảnh vào ở trên <h2> và cũng để cho nó chỉ hiển thị ở trang chủ thôi. Kết quả là đây:

Code của widget thêm vào sẽ là như này nhé:

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcukJV1efNUOvmq2HZ2VId2EJ4bpn3VzukIoL7vdhrZnkvc3XUD1hEdDWdOnhBBL0LiST1_9Yhp-rnFjMiox-KOZF5gSFdHiwoayn9C1v4AOQNsbzlxLHgLTV3kRpGy8y2WS5D7ri1qMc/s1600/banner-vui-cuoi-len.png" alt="Banner Vui cười lên" width="100%" style="margin-top: -15px;"/>
<h2 style="color: black; background:none; border:none; font-size:20px;">Các bài đăng mới nhất:</h2>
<hr/>

Vậy là trang chủ đã có thẻ H1, H2 và rất nhiều thẻ H3. Vậy là cấu trúc trang chủ đã tương đối chuẩn SEO rồi đó. Giờ chúng ta sẽ tối ưu bài viết nhé.

Tối ưu thẻ heading cho bài viết:

Bài viết trên trang sẽ hiển thị toàn bộ bên trong phần Thân web trái, do vậy chúng ta sẽ tối ưu những gì hiển thị trong phần Thân web trái để có được một bài viết chuẩn SEO nhé.
Tối ưu thẻ H1: Thẻ H1 tất nhiên sẽ là tiêu đề bài viết rồi nhỉ, nhưng mà khi kiểm tra thì tiêu đề bài viết đang là thẻ H3 cơ. Giờ chỉnh nó thành H1 nhé.

Đầu tiên, vào Bố cục --> Chỉnh sửa HTML --> Tìm đến thẻ <b:includable id='post' var='post'>
Các bạn sẽ thấy một chỗ hiển thị như này:

<b:includable id='post' var='post'>...</b:includable>

Click vào chỗ ba chấm ... nó sẽ xổ ra một đoạn code

Các bạn tìm đoạn code như sau trong chỗ nó xổ ra =_=

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

Thay thế đoạn trên bằng đoạn code sau:

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

Lưu mẫu
Giờ khi chúng ta xem một bài viết thì tiêu đề bài viết đó sẽ là <h1> và ở những chỗ khác tiêu đề của nó sẽ là thẻ <h3>. F5 lại trình duyệt sau đó các bạn có thể dùng các công cụ hỗ trợ để kiểm tra thử xem ok chưa nhé.

Giờ thêm tý CSS để tiêu đề nhìn gọn hơn (để bình thường chữ hơi to):

.post h1 {
font-size: 22px;
margin-bottom: 15px;
}

Còn về thẻ H2, H3 thì khi viết bài các bạn hãy tối ưu trong bài viết nhé. Vậy là đã xong phần tối ưu cấu trúc blog cho bài viết. Tiếp đến sẽ là tối ưu cho label hay nhiều bạn gọi là chuyên mục nhé.

Tối ưu thẻ heading cho chuyên mục (label):

Khi vào label các bạn sẽ thấy chuyên mục có danh sách các bài viết ngoài ra chẳng hiện thị thêm gì cả. Khi kiểm tra các thẻ heading thì thấy ngoài H1 ở logo ra thì các bài viết là H3, phần Thân web phải thì có H2. Vậy giờ chúng ta sẽ phải thêm H1 và H2 cho label để chuẩn SEO nhé. Cách làm thì như đối với trang chủ thôi, tạo một HTML/Javascript sau đó viết một đoạn để có thẻ H1, H2 rồi chỉ cho nó hiển thị ở chuyên mục đó là ok.

Vào Bố cục --> Thân web trái --> Thêm tiện ích --> HTML/Javascript

Tiêu đề: bỏ trống

Nội dung: thêm đoạn code sau:

<h1>Thủ thuật Blogspot</h1>
<p>Đây là chuyên mục về thủ thuật blogspot, trong chuyên mục này các bạn có thể tìm thấy các bài viết hướng dẫn thêm mới hoặc xóa bớt một số thành phần trong blogspot, tự làm một trang blogspot theo ý mình ...</p>
<p>Hi vọng các bạn sẽ thích các bạn viết tự code blogspot của mình!</p>
<h2 style="color:black; background: none; border: none;">Sau đây là các bài viết về thủ thuật Blogspot:</h2>

Lưu lại

Vào Chủ đề --> Chỉnh sửa HTML --> Tìm "Thủ thuật blogspot"

Làm tương tự như khi thêm widget ở trang chủ nhé.

Tìm đến dòng <b:includable id='main'>...</b:includable> click vào chỗ ...

Thêm code sau vào dưới thẻ <b:includable id='main'>

<b:if cond='data:blog.url == "https://blogvuicuoilen.blogspot.com/search/label/Blogspot"'>

Thêm </b:if> vào sau thẻ <b:include name='quickedit'/>.

--> Lưu chủ đề

Như vậy là ta đã có thẻ H1 và H2 trong label Blogspot rồi. Nếu các bạn muốn nhiều text hơn các bạn có thể thêm text vào nhé. Đối với các label khác làm tương tự để label chuẩn SEO.

Ra ngoài web và hưởng thành quả!
Chú ý: có những bạn làm y chang thấy ok nhưng lúc sau lại thấy nó không hiện ở trong label nữa mà cũng chẳng hiện ở chỗ khác. Lý do là đường dẫn của blog bị thay đổi từ https sang http. Để khắc phục, các bạn vào phần cài đặt (dưới Chủ đề) --> Cơ bản --> Chuyển hướng HTTPS --> Chuyển thành Có

2. Thêm breadcrumbs cho trang:

Breadcrumbs là thanh điều hướng trong trang, theo như nhiều người thì nó cũng là một yếu tố giúp trang của bạn chuẩn SEO. Cái này mình thấy thực ra cũng khá tiện khi người khác theo dõi trang của bạn. Do vậy mình cũng đưa vào các yếu tố chuẩn SEO của mình. Giờ chúng ta sẽ thêm thanh breadcrumbs cho trang nhé.

Vào Chủ đề --> Chỉnh sửa HTML --> Tìm thẻ <b:include data='top' name='status-message'/>

Thêm code sau dưới thẻ vừa tìm

<b:include data='posts' name='breadcrumb'/>

Tìm thẻ <b:includable id='main' var='top'>

Thêm code sau trên thẻ <b:includable id='main' var='top'>:

<b:includable id='breadcrumb' var='posts'><b:if cond='data:blog.homepageUrl != data:blog.url'><b:if cond='data:blog.pageType == "static_page"'><div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Trang chủ</a></span> » <span><data:blog.pageName/></span></div><b:else/><b:if cond='data:blog.pageType == "item"'><b:loop values='data:posts' var='post'><b:if cond='data:post.labels'><div class='breadcrumbs' xmlns:v="http://rdf.data-vocabulary.org/#"><span typeof="v:Breadcrumb"><a expr:href='data:blog.homepageUrl' rel="v:url" property="v:title">Trang chủ</a></span><b:loop values='data:post.labels' var='label'><b:if cond='data:label.isLast == "true"'>» <span typeof="v:Breadcrumb"><a expr:href='data:label.url' rel="v:url" property="v:title"><data:label.name/></a></span></b:if></b:loop>» <span><data:post.title/></span></div><b:else/><div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Trang chủ</a></span> » <span>Unlabelled</span> » <span><data:post.title/></span></div></b:if></b:loop><b:else/><b:if cond='data:blog.pageType == "archive"'><div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl'>Trang chủ</a></span> » <span>Archives for <data:blog.pageName/></span></div><b:else/><b:if cond='data:blog.pageType == "index"'><div class='breadcrumbs'><b:if cond='data:blog.pageName == ""'><span><a expr:href='data:blog.homepageUrl'>Trang chủ</a></span> » <span>All posts</span><b:else/><span><a expr:href='data:blog.homepageUrl'>Trang chủ</a></span> » <span>Chuyên mục <data:blog.pageName/></span></b:if></div></b:if></b:if></b:if></b:if></b:if></b:includable>

Thêm CSS cho breadcrumbs đẹp hơn xíu nhé (CSS thêm vào chỗ nào các bạn biết rồi đấy):

.breadcrumbs {
padding:5px 5px 5px 0px;
margin: 0px 0px 15px 0px;
line-height: 1.4em;
border-bottom:1px solid gray;
}
.breadcrumbs a {
text-decoration: none;
}

Giờ các bạn hãy vào lại bài viết hay chuyên mục (label) các bạn sẽ thấy có chút khác lạ đấy.

Chú ý:
Một số trường hợp các bạn không thấy thẻ <b:include data='top' name='status-message'/> các bạn tìm thẻ <b:includable id='main' var='top'>...<
Click vào chỗ ... rồi tìm thẻ <div class='blog-posts hfeed'>
Thêm <b:include data='posts' name='breadcrumb'/> vào sau thẻ <div class='blog-posts hfeed'> là OK.
Nguyên nhân bị mất thẻ <b:include data='top' name='status-message'/> là do các bạn xóa nó đi để bỏ phần hiển thị Hiển thị các bài đăng có nhãn xxxx trong Label.

3. Chỉnh sửa Tiêu dề, meta description cho Trang chủ, chuyên mục và bài viết.

Trong SEO, tiêu đề và meta description khá quan trọng. Nó giúp các công cụ tìm kiếm hiểu hơn về nội dung trong bài viết và hiển thị giúp người đọc chú ý hơn tới các bạn. Trong Blogspot, tiêu đề và meta description cho trang chủ, bài viết, label được quy định bằng cặp thẻ <title> .. </title> và <meta content='...' name='description'/>

Giờ chúng ta sẽ phải thiết lập sao cho trang chủ thì hiện tiêu đề và description khác mà label và bài viết thì cũng vậy. Cách làm đó là chúng ta sẽ đặt điều kiện, đối với trang chủ thì cho hiện tiêu đề và meta description nào, label thì cho hiện cái nào và bài viết thì hiện cái nào. Ok, giải thích vậy thôi chứ làm thì dễ ợt ấy mà.

Bỏ đoạn <title> .. </title> trong đoạn <head> đi, thay bằng đoạn code sau:

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<title>Vui cười lên</title>
<meta content='Vui cười lên - Ngoài nghĩa là vui cười lên nhiều người còn gọi là VCL' name='description'/>
</b:if>
<b:if cond='data:blog.url == "https://blogvuicuoilen.blogspot.com/search/label/SEO"'>
<title>SEO - Content, backlink, MXH, thủ thuật</title>
<meta content='SEO - Content, backlink, MXH, thủ thuật SEO' name='description'/>
</b:if>
<b:if cond='data:blog.url == "https://blogvuicuoilen.blogspot.com/search/label/Blogspot"'>
<title>Thủ thuật Blogspot - Tổng hợp thủ thuật Blogger</title>
<meta content='Thủ thuật Blogspot - Tổng hợp thủ thuật Blogger để các bạn có thể làm được một trang như trang Vui Cười Lên' name='description'/>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
<title><data:blog.pageName/> | <data:blog.title/></title>
</b:if>

Đoạn code này sẽ phân biệt hiển thị riêng title và phần mô tả cho Trang chủ, chuyên mục và bài viết. Các bạn có bao nhiêu chuyên mục thì thêm vào ngần ấy cái nhé. Nếu chưa hiểu comment mình giải thích cho.

Sửa Lỗi share mạng xã hội:

Phần này mình thêm vào nhé vì nhiều người gặp rùi. Khi share bài viết trên blogspot lên mạng xã hội, đôi khi nó sẽ không hiển thị ảnh Thumb chính xác hoặc không có ảnh thumb luôn. Để sửa lỗi này các bạn làm như sau:

Tìm đến thẻ <head>

Thêm đoạn code sau vào sau thẻ <head> là ok

<b:include data='blog' name='all-head-content'/>
<b:if cond='data:blog.postImageUrl'>
<meta expr:content='data:blog.postImageUrl' property='og:image'/>
<b:else/>
<meta content='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2mY_1wzhk74so9gA5xH1WOXM8yOxvEjm9XoT8E3D68Wo7uGKsx7LN4-h_OVqzIOILYz-0CrhkDwCgQT263HbxW6LPcFg_Ppu6h2GUNoXMbUWxFXmnVzLUdQEttKaZFXSGqgsa8VovMqI/s1600/Vui+cuoi+len+300+x+300.png' property='og:image'/>
</b:if>

Trong một số trường hợp, ảnh thumb này blogger sẽ lấy ảnh đầu tiên của bài viết là ảnh có kích thước lớn. Nếu bạn có một ảnh khác kích thước đủ lớn không ở trong bài viết nhưng lại ở trên ảnh trong bài viết thì cũng có thể bị nhận nhầm.

Phân trang cho label

Hiện giờ có nhiều code phân trang nhưng mình thấy nó không tối ưu SEO lắm hơn nữa trong blogspot cũng có sẵn mục phân trang rồi nên mình nghĩ cũng không cần. Vì thế nên mình khuyên mọi người nên dùng luôn cái (Bài đăng mới hơn Bài đăng cũ hơn) trong blogspot để phân trang nhé.

Sửa lại CSS cho nó cái bài đăng cũ hơn - bài đăng mới hơn đẹp một chút:

#blog-pager-newer-link a {
color:white;
text-decoration: none;
}
#blog-pager-older-link a {
color:white;
text-decoration: none;
}
#blog-pager-newer-link, #blog-pager-older-link {
padding: 10px;
background:red;
border: 1px solid black;
border-radius: 4px;
}

Tiếp đến ta sẽ cho bài đăng cũ - bài đăng mới chỉ hiển thị trong label thôi (làm tương tự như tối ưu label và trang chủ ý):
Vào Chủ đề --> Chỉnh sửa HTML --> Tìm <b:includable id='nextprev'>(chỉ có 1 chỗ có cái này thôi)
Thêm <b:if cond='data:blog.searchLabel'> vào ngay dưới <b:includable id='nextprev'>
Thêm </b:if> vào trước thẻ đóng </b:includable>

Đoạn đó nó sẽ thành thế này (các bạn nhìn kỹ không có paste nhầm nhé):

<b:includable id='nextprev'>
<b:if cond='data:blog.searchLabel'><div class='blog-pager' id='blog-pager'>
<b:if cond='data:newerPageUrl'>
<span id='blog-pager-newer-link'>
<a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + "_blog-pager-newer-link"' expr:title='data:newerPageTitle'><data:newerPageTitle/></a>
</span>
</b:if>
<b:if cond='data:olderPageUrl'>
<span id='blog-pager-older-link'>
<a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + "_blog-pager-older-link"' expr:title='data:olderPageTitle'><data:olderPageTitle/></a>
</span>
</b:if>
<b:if cond='data:mobileLinkUrl'>
<div class='blog-mobile-link'>
<a expr:href='data:mobileLinkUrl'><data:mobileLinkMsg/></a>
</div>
</b:if>
</div>
<div class='clear'/>
</b:if></b:includable>

Vậy là đã xong phần phân trang cho label. Thực ra phân trang không quan trọng lắm nhưng nó giúp người dùng nhìn thuận mắt hơn và dễ sử dụng hơn nên việc có phân trang vẫn hơn là không có phân trang phải không nào.

Tổng kết

Về phần giao diện trên cơ bản là ok rồi. Có thể nói là tương đối chuẩn SEO. Bài viết này là bài cuối cùng trong seri tự code blogspot. Hi vọng sau khi tự làm xong một trang blog các bạn đã hiểu được về cấu trúc blog, cách sửa code, cách tối ưu blog sao cho chuẩn seo và làm thế nào để giao diện blog lung linh hơn.
Hi vọng các bạn thích seri bài viết này của mình, thời gian tới mình sẽ có seri bài viết về SEO, cách tối ưu để bài viết chuẩn SEO, làm sao để viết được dài, làm sao để viết được nhiều bài, làm sao để đi được nhiều backlink hay làm sao để lên top google bền vững. Hẹn gặp lại các bạn!

Header Ads Widget

Ticker

Tối ưu giao diện để blogspot chuẩn SEO

Mục lục seri các bài viết hướng dẫn tự thiết kế blogspot:

Tối ưu giao diện để blogspot chuẩn SEO - các tiêu chuẩn để web chuẩn SEO: