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

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>&nbsp;</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.

Bài viết liên quan