#16 Tối ưu SEO Onpage Blogger - #2 Sửa lỗi HTML5


người khác đã thích bài này
Đây là bài viết thứ 2 trong loạt bài Tối ưu SEO Onpage xử lý với nền tảng Blogger.
Bài viết #2 này sẽ hướng dẫn các bạn tối ưu cấu trúc HTML5 cho blogger/website của bạn.
Website chuẩn HTML5 cũng là một trong những tiêu chí SEO hàng đầu mà mình đưa ra. Các cấu trúc lập trình mới như CSS3 và HTML5 có nhiều cải tiến mới, các ngôn ngữ lập trình mới đưa ra hỗ trợ nhiều lệnh hơn hơn nữa là trình duyệt sẽ đọc code chuẩn mới này nhanh chóng nhờ đó tăng tốc độ load website.
Sửa lỗi HTML5 cho blogger
Đầu tiên bạn cần tìm hiểu thuật ngữ SEO là gì

Kiểm tra chuẩn HTML5 cho website

Trang website validator.w3.org sẽ giúp bạn kiểm tra cấu trúc HTML5 cho website/blog của bạn và những đây là những kinh nghiệm để fix các lỗi HTML5 để tối ưu SEO Onpage sau này.

Kiểm tra sơ qua Tôi Là Quản Trị Blog's

Sửa lỗi HTML5
Sửa lỗi HTML5
Các kết quả trả về toilaquantri.com hoàn toàn chuẩn HTML5 và không có bất kì lỗi gì. Sau đây là những kinh nghiệm mình chia sẻ để cho các bạn thực hiện việc tối ưu HTML5 cho blog của bạn.

Việc tối ưu HTML5 cũng có liên quan mật thiết đến việc tối ưu CSS3

1. Tối ưu cho các file .CSS nhúng link từ bên ngoài

Nếu khi kiểm tra HTML5 nếu có thấy lỗi từ các link nhúng ngoài này thì có 2 cách xử lý:
** Cách a) 
Copy hết toàn bộ CSS trong link đó và dán lại trước thẻ Skin và tối ưu
** Cách b) dành cho những người làm biếng hơn :))
Dạng file .CSS nhúng bên ngoài:
<link href='http://abc.xyz/mnx.CSS' rel='stylesheet' type='text/css'/>
Thay thành:
<script type='text/javascript'>
//<![CDATA[
//CSS Ready
function loadCSS(e, t, n) { "use strict"; var i = window.document.createElement("link"); var o = t || window.document.getElementsByTagName("script")[0]; i.rel = "stylesheet"; i.href = e; i.media = "only x"; o.parentNode.insertBefore(i, o); setTimeout(function () { i.media = n || "all" }) }
loadCSS("http://abc.xyz/mnx.CSS");
//]]>
</script>
Lưu mẫu lại và kiểm tra HTML5 lại sẽ mất các lỗi từ file này

2. Sửa lỗi HTML5 tại logo

Khi blog của bạn sử dụng Logo và check với công cụ kiểm tra HTML5 bạn sẽ thấy phát hiện lỗi HTML5 tại logo và đây là cách khắc phục để đạt chuẩn HTML5 tại logo
Tìm đoạn code sau:

<img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + &quot;_headerimg&quot;' expr:src='data:sourceUrl' expr:width='data:width' style='display: block'/>
Và thay thế bằng
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<h1 itemprop='name'>
<a expr:href='data:blog.homepageUrl' itemprop='url'>
<img expr:alt='data:title' expr:id='data:widget.instanceId + &quot;_headerimg&quot;' expr:src='data:sourceUrl' expr:style='&quot;height:&quot; + data:height + &quot;width:&quot; + data:width + &quot;display: block&quot;'/><span style='display: none;'><data:blog.title/></span></a></h1>
<b:else/>
<h3 itemprop='name'>
<a expr:href='data:blog.homepageUrl' itemprop='url'>
<img expr:alt='data:title' expr:id='data:widget.instanceId + &quot;_headerimg&quot;' expr:src='data:sourceUrl' expr:style='&quot;height:&quot; + data:height + &quot;width:&quot; + data:width + &quot;display: block&quot;'/><span style='display: none;'><data:blog.title/></span></a></h3>
</b:if>
Đoạn code thay thế mình đã sử dụng điều kiện nếu là ở trang chủ thì tên Blog sẽ khai báo là thẻ H1 và vào bài viết thì tên Blog sẽ chuyển thành thẻ H3. Nên các bạn cố gắng tìm các thẻ <b:if> .... </b:if>  bao đoạn code tô đỏ để thay thế toàn diện.

3. Fix lỗi HTML5 phiên bản ver2

Xóa các khai báo trong đầu blog

Đối với các template sử dụng version 2 bạn sẽ luôn thấy đoạn code sau:
<html b:version='2' class='v2' lang='vi' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
Khi kiểm tra HTML5 bạn sẽ thấy 7-8 lỗi từ đoạn code này vì vậy cách sửa là bạn xóa và giữ lại đoạn code sau
<html b:version='2' class='v2' lang='vi'>
Mỗi lần truy cập vào mẫu đoạn code đầu lại xuất hiện, do đó bạn phải luôn xóa nó đi mỗi lần lưu template lại

4. Sửa lỗi liên quan tới ảnh

Lỗi
Sửa lỗi ảnh thiếu thẻ Alt
Lỗi này liên quan đến hình ảnh thiếu khai báo thuộc tính alt="mô tả ảnh" bạn chỉ cần thêm thuộc tính alt vào sau thẻ mở ảnh <img alt="mô tả ảnh" src="url_ảnh"......../>

Lỗi này thường rất nhiều bạn hãy thêm thuộc tính alt vào hết trong ảnh nhé

Các lỗi thông thường khác công cụ đã báo cho các bạn chỉ cần tinh ý đọc được đề xuất bằng tiếng anh của nó bạn sẽ sửa lỗi nó dễ dàng.

Nếu gặp khó khăn trong quá trình fix lỗi HTML5 cho blog của mình các bạn liên hệ hỗ trợ với mình tại facebook cá nhân Huỳnh Phụng

Chúc blog bạn đạt chuẩn HTML5
Dẫn nguồn về Toilaquantri.com nếu bạn có xuất bản lại nội dung từ Website này!


ĐĂNG KÍ


Không có nhận xét nào:

Không Spam Link dưới mọi hình thức.

ĐĂNG KÍ RSS

Tiếp tục


Bạn quên địa chỉ email?

Bản tin RSS Feeds sẽ được gởi đến email của bạn.


GIỚI THIỆU


HUỲNH PHỤNG
▪ Là 1 chuyên gia setup SEO Systems : Blogger
▪ Hiện công tác Cty Marketing TM - DichvuSEO.INFO
▪ Dịch vụ SEO tổng thể | Lập kế hoạch SEO | Setup hệ thống SEO chuyên nghiệp.

KẾT NỐI & CHIA SẺ



Liên Hệ
  • Thời gian làm việc từ T2-T7 (9h-21h)
  • Văn Phòng: 98 Nguyễn Văn Lượng, Gò Vấp, TPHCM
  • (+84) 932.913.631
  • Haiphungmarketing@gmail.com
  • Huỳnh Phụng Blogger FanPage

  • TÀI KHOẢN

    Số Tài Khoản ACB

    Số TK: 214 081 769
    Họ Tên: Huynh Hai Phung
    Ngân hàng ACB Tân Bình (Ngân hàng Á Châu Tân Bình)
    Thông tin chuyển khoản: (Tên KH + Số tiền chuyển + Nội dung dịch vụ)

    STK VietComBank

    Số TK: 0721 0006 096 05
    Họ Tên: Huynh Hai Phung
    Ngân hàng VCB Bình Thạnh TPHCM
    Thông tin chuyển khoản: (Tên KH + Số tiền chuyển + Nội dung dịch vụ)