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:

1. Tự thiết kế giao diện cho blogspot (dành cho người không biết code)

2. Sắp xếp bố cục trong blogspot và thêm tiện ích cho các layout

3. Thiết kế phần header cho blogspot (phần đầu trang)

4. Thiết kế menu cho blogspot

5. Tùy chỉnh phần hiển thị nội dung của blogspot

6. Tùy chỉnh sidebar cho blogspot

7. Tùy chỉnh footer cho blogspot

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

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:

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:

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

<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://aydzaa.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>AYDzaa</title>
<meta content='AYDzaa - Chia sẻ niểm đam mê' name='description'/>
</b:if>
<b:if cond='data:blog.url == "https://aydzaa.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://aydzaa.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 AYDzaa' 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é.

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

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

Theo Dõi Fanpage

VỀ CHÚNG TÔI

THÔNG BÁO - QUYẾT ĐỊNH

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

Mạng Xã Hội

Theo Dõi Fanpage

VỀ CHÚNG TÔI

THÔNG BÁO - QUYẾT ĐỊNH