W3C viết tắt của World Wide Web Consortium được tạo ra bởi Tim
Berners-Lee nhằm tạo ra những tiêu chuẩn cho website. W3C trong thiết kế
website là một hệ thống các tiêu chí đánh giá website dựa trên các
chuẩn mực liên quan đến HTML, XHTML, SMIL, MathML, CSS …
» Làm thế nào để biết trang của bạn đã đạt chuẩn W3C hay chưa?
Trước tiên bạn có thể kiểm tra xem blog của bạn đã chuẩn W3c chưa bằng
cách truy cập vào trang bên dưới điền URL trang của bạn vào và bấm Check
là được.
Nếu có thông báo như bên dưới là blog của bạn đã chuẩn HTML5
» Chuẩn hóa HTML5 (W3C) có những yêu cầu nào.
Thông thường sẽ có 2 phần trong cấu tạo một tran web cần chuẩn hóa W3C là:
- Chuẩn hóa XML (code dưới dạng HTML)
- Chuẩn hóa CSS (đoạn code trước thẻ ]]><b:skin> và trong cặp thẻ <style>
Trong khuôn khổ bài viết này mình chỉ giới thiệu đến các bạn cách Chuẩn hóa XML valid HTML5 (W3c). Để chỉnh sửa CSS chuẩn hóa HTML5 thì các bạn đọc thêm bài viết sau nha:
» Cách chỉnh sửa các lỗi W3c thường gặp khi thiết kế blogspot!
Sau đây chúng ta sẽ cùng đi tìm hiểu cách để chuẩn hóa trang web, blog của bạn theo chuẩn w3c.
1. Điều chỉnh mã HTML.
- Bạn tìm đoạn code có dạng như bên dưới tùy từng trang có thể có sự khác biệt nho nhỏ nhưng về cơ bản là như vầy:
<html lang='en' xml:lang='en' 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'>
- xóa toàn bộ những phần thừa thãi đi chỉ để lại mã html như bên dưới:
<html>
- Với cách này mỗi khi bạn chỉnh sửa mẫu thì bạn lại phải xóa lại vì nó
sẽ được blogger tự động thêm lại sau khi bạn truy cập vào trình chỉnh
sửa HTML.
2. Xóa hoàn toàn thanh nabar
- Bằng cách chèn đoạn code bên dưới vào trước thẻ <body>
<!--<body>-->
- Khi lưu lại sẽ có thông báo hỏi bạn có muốn xóa thanh Nabar không thì bạn chọn có nha.
* Xóa bỏ Styleseet (Bạn có thể bỏ qua bước này nếu thấy nó không cần thiết, thực ra nó cũng không ảnh hưởng đến W3c mình chỉ cho thêm vào thôi)
- Với cách này bạn có thể sử dụng khi bạn đã am hiểu về code. Bởi khi
thêm đoạn code này sẽ có một số tiện ích của blogger không hoạt động,
bởi ta đã vô hiệu hóa những đoạn mã không cần thiết của blogger để duy
trì nó hoạt động.
- Tìm đoạn code:
</body>
Thay thế nó thành:
<!--</body>--></body>
- Bước này bạn có thể bỏ qua nếu không thể tự code lại mã CSS và XML. Bởi bố cục của bạn sẽ bị thay đổi phá vỡ hoàn toàn.
3. Xóa đoạn code chỉnh sửa nhanh bài viết.
- Tìm đoạn code chỉnh sửa nhanh bài viết như bên dưới:
<b:include data='post' name='postQuickEdit'/>
- Khi bạn xóa đoạn code này đi thì nút chỉnh sửa nhanh bài viết của bạn
sẽ biến mất và bạn không thể chỉnh sửa bài viết khi xem nó trên giao
diện web, bạn chỉ có thể chỉnh sửa trong phần quản lý bài viết của bạn
(Cách này hơi bất tiện với những ai thường xuyên chỉnh sửa và cập nhật
bài viết, tuy nhiên vì sự nghiệp W3C thì ta phải chấp nhận thôi).
4. Xóa nút chỉnh sửa nhanh tiện ích (widget).
- Khi kiểm tra bạn sẽ thấy trên các tiện ích HTML của bạn có báo lỗi, và
tất nhiên nếu căn cứ vào những gì họ thông báo rất khó tìm ra lỗi. Tuy
nhiên bạn không phải lo lắng cách khắc phục rất đơn giản bạn chỉ cần tìm
những đoạn code bên dưới:
<b:include name='quickedit'/>
- Lưu ý với các tiện ích
HTML/Javascript thì xóa
đoạn này đơn giản. Tuy nhiên với một số tiện ích do blogger cung cấp bạn
sẽ không thể xóa đoạn này đi ví dụ như tiện ích người theo dõi
Followers. Do vậy nếu bạn muốn sử dụng tiện ích đó hãy xem các khắc phục nó
ở đây.
- Luôn check với W3C khi tạo mới một widget để phát hiện và sửa lỗi theo hướng dẫn.
5. Thiếu thuộc tính alt trong hình ảnh - (required attribute "alt" not specified) Thuộc tính alt giúp
bạn có thể tạo ra một văn bản thay thế cho bức ảnh, điều này rất có lợi
khi hình ảnh bị lỗi hoặc tốc độ mạng của người xem chậm thì văn bản
thay thế đó sẽ hiển thị thay cho bức ảnh, Từ đó giúp trang của bạn
chuyên nghiệp hơn và tải nhanh hơn (không nhiều). Đặc biệt thuộc tính alt này ảnh hưởng rất lớn trong việc Google Index hình ảnh của chúng ta.
- Ví dụ nếu bạn chèn hình ảnh như bên dưới là sai so với chuẩn w3c
<img src="URL_ANH" />
Chèn đúng phải là
<img src="URL_ANH" alt="mô tả cho hình ảnh" />
6. Lưu ý khi sử dụng một số tiện ích đặc biệt.
Có một số tiện ích của blogger bạn nên biết khi sử dụng. Ví dụ nếu sử dụng tiện ích lưu trữ (Archive), thì hãy sử dụng kiểu hiển thị dạng Thứ bậc.
7. Lỗi liên quan đên sử dụng các liên kết.
- Thông thường các liên kết được chèn vào trang của bạn theo cú pháp của thẻ <a> như bên dưới:
<a href="/search/label/Game" target="_blank">Tên</a>
- Với những liên kết mà tên chỉ có một từ game như trên thì sẽ không xuất hiện các lỗi w3c. Tuy nhiên với những liên kết mà có nhiều từ Game Mobile cách nhau bởi dấu cách như bên dưới:
<a href="/search/label/Game Mobile" target="_blank">Tên</a>
- Lúc này nếu kiểm tra trên w3c thì bạn sẽ thấy xuất hiện lỗi và khắc
phục rất đơn giản bạn chỉ cần thêm vào giữa khoảng trống của liên kết %20 . Khi đó bạn sẽ được như sau:
<a href="/search/label/Game%20Mobile" target="_blank">Tên</a>
8. Thiếu thuộc tính type - (required attribute "type" not specified)
Lỗi này do khai phải CSS hoặc JavaScript bị thiếu thuộc tính type.
- Ví dụ viết như bên dưới là sai:
<style> , <script>
Viết đúng phải là <style type="text/css"> <script type="text/javascript">
P/s trước kia khi cần khai báo một đoạn JavaScript người ta thường sử dụng thuộc tính language tuy nhiên hiện nay ta phải sử dụng thuộc tính type mới chính xác.
Mẹo: Để tối ưu w3c và cũng để tăng tốc độ load cùng với SEO thì tốt nhất
với những đoạn css và scripts bạn nên chèn vào một file và upload lên
host riêng rồi chèn vào mẫu của bạn.
9. Sử dụng thẻ <marquee> - (element "marquee" undefined)
Thẻ marquee để chạy chữ, hình ảnh được rất nhiều người đang sử dụng,
tuy nhiên thẻ này không được quy định trong các thẻ HTML mà chuẩn W3C đề
ra. Chính vì vậy nêu muốn có một đoạn chữ hay hình ảnh chạy trên blog
bạn hãy sử dụng các đoạn CSS3 hoặc Jquery
10. Sử dụng các ký tự đặc biệt - (cannot generate system identifier for general entity)
Trong HTML một số ký tự đặc biệt như
< > / & . . . thì
không được phép viết trực tiếp mà phải sử dụng các ký tự mã hóa thay
thế. Các bạn có thể mã hóa nó bằng công cụ namkna đã cung cấp
tại đây . Dưới đây là một ví dụng
Viết & là sai - chính xác phải là &amp;
11. Trùng lặp ID CSS - (ID "X" already defined)
ID và class trong CSS có chức năng tương tự nhau giúp bạn có thể định hình giao diện hiển thị cho các thành phần xml.
- Class có thể dùng nhiều lần cho các phần tử xml
- id thì chỉ được dùng một lần duy nhất cho một phần tử.
- ví dụ trong một blog có chứa 2 đoạn id="namkna1" như bên dưới là sai:
<div id="namkna1">Archive</div>
....
<h1 id="namkna1">Heading 1</h1>
- Viết chính xác phải là
<p id="namkna1">Archive</p>
.....
<h1 id="namkna2">Heading 1</h1>
12. Trùng lặp thuộc tính - (duplicate specification of attribute X)
- Lỗi này gặp ở rất nhiều người mới tìm hiểu về SEO, nhiều người không
để ý đã sử dụng thuộc tính class cho các phần tử HTML bị trùng lặp nhau.
- ví dụ như bên dưới là sai:
<p>
- Viết đúng phải là
<p class = "class1 class2">
13. Các thẻ cũ không được sử dụng trong HTML
- Sau khi cập nhật mới thì W3C đã loại bỏ một số thẻ định dạng cũ và
thay vào đó là sử dụng css. Những đoạn sau bạn không nên sử dụng trong
w3c: <font> <u> <center> <strike>.
- Không sử dụng thẻ <embed> để chèn Flash (element "embed"
undefined. Khi chèn Flash thì thẻ <embed> không được sử dụng ( tuy
nhiên sẽ được sử dụng trong phiên bản HTML5 ) mà phải thay thế bằng thẻ
<object>
14.Thiếu thẻ đóng - (end tag for "X" omitted, but OMITTAG NO was specified)
Lỗi này rất nhiều người đang mắc phải. Với những thẻ 'lưỡng tính' như:
br, hr, link, img, meta, input . . . thì bắt buộc phải có dấu xổ chéo
'/' ở trong thẻ đóng>.
- Ví dụ: Nếu viết như bên dưới là sai
<br>, <hr>, <link>, <img>, <meta>, <input>
Viết đúng sẽ là <br />, <hr />, <link />, <img />, <meta />, <input />
- Giờ kiểm tra đảm bảo hết lỗi liền.
15. Sử dụng nút like chia sẻ dành cho HTML 5
Các nút like nhúng dưới dạng thẻ <a ...> sẽ bị lỗi khi check
w3c. Để khắc phục hiện tượng này bạn chỉ cần dùng thẻ dành riêng cho
HTML5 sẽ khắc phục được lỗi đó ngay.
- Với nút like và share của facebook các bạn có thể truy cập
vào đây để lấy mã inframe chèn vào blog của bạn.
- Với nút like Googe +1 bạn có thể truy cập vào
trang này
để tìm hiểu, Tất nhiên nếu không hiểu nhiều về tiếng anh bạn có thể
chèn đoạn code bên dưới vào vị trí bạn muốn để hiển thị nút google +1
của bạn nha;
<div class="g-plusone" data-size="tall" ></div>
16. Vô hiệu hóa thẻ <b:include data='blog' name='all-head-content'/>
- Nếu từng nghiên cứu về SEO thì hẳn bạn sẽ thấy tầm quan trọng của thẻ
<b:include data='blog' name='all-head-content'/>, Nếu không muốn
nói là thẻ này rất quan trọng. Tuy nhiên nếu sử dụng đoạn code này thì
phần đầu blog của bạn sẽ rất dài dòng và không đạt theo chuẩn của w3c.
Để khắc phục bạn có thể thay đổi đoạn đó thành đoạn bên dưới rồi lưu
lại:
<meta content='text/html; charset=UTF-8' http-equiv='Content-Type'/>
<meta content='blogger' name='generator'/>
<link expr:href='data:blog.homepageUrl + "favicon.ico"' rel='icon' type='image/x-icon'/>
<link expr:href='data:blog.url' rel='canonical'/>
<link expr:href='data:blog.homepageUrl + "feeds/posts/default"' expr:title='data:blog.title + " - Atom"' rel='alternate' type='application/atom+xml'/>
<link expr:href='data:blog.homepageUrl + "feeds/posts/default?alt=rss"' expr:title='data:blog.title + " - RSS"' rel='alternate' type='application/rss+xml'/>
<link expr:href='"http://www.blogger.com/feeds/" + data:blog.blogId + "/posts/default"' expr:title='data:blog.title + " - Atom"' rel='alternate' type='application/atom+xml'/>
<link href='http://www.blogger.com/openid-server.g' rel='openid.server'/>
<link expr:href='data:blog.homepageUrl' rel='openid.delegate'/>
<b:if cond='data:blog.pageType == "item"'>
<b:if cond='data:blog.postImageThumbnailUrl'>
<link expr:href='data:blog.postImageThumbnailUrl' rel='image_src'/>
</b:if>
<b:if cond='data:blog.metaDescription != ""'>
<meta expr:content='data:blog.metaDescription' name='description'/>
<b:else/>
<meta expr:content='data:blog.pageName + " - " + data:blog.title' name='description'/>
</b:if>
</b:if>
17. Thứ tự thẻ không đúng.
- Bạn chỉ cần hiểu đơn giản như sau ta phải đi tất rồi mới đi giày chứ
không thể đi giày rồi mới đi tất. Thứ tự xml ở dây cũng vậy. Một số thứ
tự bạn cần lưu ý như sau:
a) Thẻ <span> không thể chứa thẻ <p>
- Vụ dụ trường hợp sai.
<span class='namkna'>
<p>
Đây là blog của Namkna
</p>
</span>
- Viết đúng phải là:
<p>
<span class='namkna'>
Đây là blog của Namkna
</span>
</p>
b) Thẻ <li> không thể chứa thẻ <ul>
- Một số trường hợp kiểu bên dưới có thể được chấp nhận ví dụ trong menu.
<li>
<ul> ....</ul>
</li>
- Tuy nhiên nếu trong thẻ <ul> không chứa thẻ <li> con sẽ có báo lỗi. Do vậy viết đúng phải là
<ul>
<li>....</li>
</ul>
hoặc:
<li>
<ul>
<li>....</li>
</ul>
</li>
18. Chèn thuộc tính style vào trong xml
- Một số người chèn class trực tiếp vào trong mã xml như bên dưới là sai:
< img style="width:100px; height:200px; boder:1px" src="Link ảnh" al = "Mô tả"/>
- Nếu đúng phải là:
<img class="thuoctinh1" src="Link ảnh" alt="Mô tả"/>
thêm đoạn mã định dạng vào trước thẻ ]]></b:skin>
.thuoctinh1{width:100px; height:200px; boder:1px}
19. Lỗi chữ "text run is not in Unicode Normalization from c"
- Lỗi này do nhiều nguyên nhân như bạn copy từ một trang khác hoặc lỗi hệ thống từ google.
- Giải pháp đánh lại đoạn văn bản đó.
20. Thêm thuộc tính alt cho hình ảnh nút xóa comment
- Bình thường nút xóa nhận xét trên blog của bạn không có thuộc tính
alt do vậy nếu kiểm tra w3c bạn sẽ thấy có báo lỗi không chuẩn html5 do
vậy để khắc phục bạn có thể xóa nút chỉnh sửa nhanh đó hoặc thêm vào
nó thuộc tính alt. Tất nhiên để tiện quản lý commeent thì tốt nhất là
sửa lỗi mà vẫn giữ được nút đó.
- Tìm đoạn code bên dưới:
<img src='//www.blogger.com/img/icon_delete13.gif'/>
Thay thế tất cả những đoạn tìm được bằng đoạn code bên dưới:
<img src='//www.blogger.com/img/icon_delete13.gif' alt='Delete commnet'/>
- Bạn có thể chỉnh sửa văn bản in đậm theo ý thích của bạn
Trước mắt mình mới thử với những lỗi này nếu phát hiện thêm lỗi nào nữa mình sẽ cập nhật cho các bạn.
