Một số kinh nghiệm trên dự án Tolinen

AMP

Một số quy tắc bắt buộc phải tuân thủ AMP cơ bản

Size của css < 50kb
Không chứa script bên ngoàiKhông chứa style trên thẻ html
Không dùng “!important” trong css
Tuân thủ chuẩn html của amp : <html amp>, amp-img, amp-video, amp-iframe, amp-form, …..

Tag link [amphtml] và [canonical]

Nếu trang web có sử dụng AMP cho smartphone để các công cụ kiểm tra và google nhận diện chính xác hơn.

Thêm vào trang nếu trang đó không sử dụng AMP
<link rel=”amphtml” href=”[LINK]”>
[LINK] là link của trang AMP
Nếu trang đó là AMP
<link rel=”canonical” href=”[LINK]”>
[LINK] là link của trang không phải AMP

=> Trường hợp web chỉ có 1 page duy nhất. Thì [LINK] là link của trang đó.

Một số thư viện của AMP

………… và còn nhiều nữa !

Những lưu ý khi code giao diện thường gặp

Viết dư hoặc thiếu các thẻ đóng mở (thông thường là thẻ <div>).
Không dùng cặp thẻ <center>, nên dùng CSS để thay thế.
Nếu dùng thẻ section thì phải có các thẻ tiêu đề (h2-h6) để thêm tiêu đề xác định cho từng section.
Chú ý khi code các phần tử thường gặp như <span> và <p>, cặp thẻ <span> không được bao ngoài cặp thẻ <p>.
Mỗi trang HTML chỉ nên sử dụng 1 cặp thẻ <h1>.
Có thể thêm thuộc tính vào phần tử HTML nhưng phải thêm vào -data phía sau thuộc tính đó, ví dụ <a my-attribute-data=”2″ href=”#”></a>.
Khi dùng đến thẻ img thì phải thêm thuộc tính alt.
Đối với <table>, không nên dùng các thuộc tính như width, cellpadding, cellspacing, border, valign,… mà hãy sử dụng CSS thay thế những thuộc tính trên.
Không để trống các cặp thẻ, ví dụ <li></li>, có thể thay thế bằng <li> </li>.
Không viết CSS trực tiếp vào source HTML.
Kiểm tra kĩ để tránh trùng lặp thuộc tính ID
Về việc sử dụng các tools check online, sau khi chỉnh sửa giao diện phải chú ý check lại 1 lần nữa để tránh lặp lại các lỗi đã sửa trước đó.

Một số lưu ý khác

Khi hiển thị dữ liệu từ database nên chú ý việc xuống dòng, có thể fix lỗi này một cách đơn giản bằng cách gọi hàm nl2br() [PHP function] bao ngoài dữ liệu (đối với dữ liệu lấy trực tiếp từ database hoặc từ form) hoặc sử dụng hàm wpautop() [Wordpress function] bao ngoài dữ liệu (đối với dữ liệu lấy ra từ những hàm wordpress khác, ví dụ get_posts()).

……………..sẽ tiếp tục update trong thời gian tới.