Trường hợp 1:Không sử dụng logo
Trong trường hợp này blogger sẽ lấy tiêu đề blogspot là chữ làm thẻ H1
Tại trang chủ mọi chuyện rất ổn vì tiêu đề blog là H1 và tiêu đề bài viết là h3 hoặc h2 tùy thuộc vào người chỉnh template.
Nhưng ở trang bài viết lại xẩy ra vấn đề là có 2 thẻ H1 vì 1 của tiêu đề blog và 1 của tiêu đề bài viết sau khi đã tối ưu thẻ h3 thành h1
Trường hợp 2: Sử dụng logo(hình ảnh) thay cho tiêu đề blog
Trong trường hợp này blogger tự động xóa bỏ thẻ h1 và thay thế là hình ảnh do vậy trang chủ không có thẻ H1
Nếu các bạn kiểm tra trên một số công cụ seo online thì thấy rõ vấn đề này.
Vậy làm thế nào để khắc phục việc thiếu và trùng lặp thẻ H1 tại trang chủ và trang bài viết.
Công việc cần làm là:
Đối với trường hợp 1:Không sử dụng logo(hình ảnh)
Các bạn vào chỉnh sửa mẫu tìm tới đoạn:
<div id='header-wrapper'>
Thay nó thành:
<div id='header-wrapper' itemscope='itemscope' itemtype='http://schema.org/Organization'>
Công đoạn này cần tiến hành cho cả 2 trường hợp.
Sau đó sửa đoạn:
<!--No header image -->
<div id='header-inner'>
<div class='titlewrapper'>
<h1 class='title'>
<b:include name='title'/>
</h1>
</div>
Tôi lấy cả <!--No header image --> để các bạn dễ nhận thấy nó trong mẫu.
Thành:
<!--No header image -->
<div id='header-inner'>
<div class='titlewrapper'>
<b:if cond='data:blog.pageType == "index"'>
<h1 class='title'>
<b:include name='title'/>
</h1>
<b:else/>
<h2 class='title'>
<b:include name='title'/></h2>
</b:if>
</div>
Đối với trường hợp 2: Sử dụng logo thay cho tiêu đề blog(trường hợp này là phổ biến)
Với trường hợp này bạn tìm tới đoạn code:
<!--Show the image only-->
<div id='header-inner'>
<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' title=''/>
</a>
<!--Show the description-->
Nhưng ta chỉ cần thay từ
<a expr:href='data:blog.homepageUrl' style='display: block'>
......Tới........
</a>
Và thay nó thành:
<b:if cond='data:blog.pageType == "index"'>
<h1 itemprop='name'>
<a expr:href='data:blog.homepageUrl' itemprop='url' 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' itemprop='logo' style='display: block'/><span>Tiêu đề blog</span></a>
</h1>
<b:else/>
<h2 itemprop='name'>
<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' itemprop='logo' style='display: block'/><span>Tiêu đề blog</span></a></h2>
</b:if>
Thay Tiêu đề blog thành Tiêu đề blog của bạn.
Tại phần CSS trong mẫu sửa:
.header h1 a {
Thành
.header h1 a,.header h2 a {
Sau đó thêm vào trước thẻ ]]></b:skin>
Đoạn code sau:
.header h1 a,.header h2 a, .header h1 a:visited, .header h2 a:visited{color:#fff; font-size:10px;text-decoration:none;margin:0;padding:0}
.header h1 span, .header h2 span{text-indent:-999em; display:block;}
