Hướng dẫn HTML để viết nội dung & tối ưu onpage

709 views
622 views

Published on

Module hỗ trợ của Khóa học SEO hiệu quả (http://bit.ly/khoahocseodgm), hướng dẫn học viên sử dụng HTLM để viết nội dung và tối ưu onpage.

Published in: Marketing
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
709
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
28
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Hướng dẫn HTML để viết nội dung & tối ưu onpage

  1. 1. HTML THỰC HÀNH Hướng dẫn HTML để viết nội dung Và tối ưu onpage Giảng viên: Võ Minh Huy [w] www.dgm.vn
  2. 2. CẤU TRÚC TRANG HTML GHI CHÚ  Buổi học sẽ hướng dẫn các bạn cách dùng HTML để viết nội dung & tối ưu onpage, không phải để Thiết kế webiste.  Nội dung được rút gọn tối đa, chỉ hướng dẫn những kiến thức cơ bản đủ để bạn viết nội dung tốt mà không cần nhớ nhiều.  Những bạn đã biết HTML & CSS không cần tham gia buổi hướng dẫn này. Giảng viên: Võ Minh Huy [w] www.dgm.vn
  3. 3. MỤC LỤC 1 Cấu trúc trang HTML 2 Định dạng văn bản 3 Liên kết 4 Hình ảnh 5 Bảng biểu 6 Tiêu chuẩn khi viết bài 7 Thực hành Giảng viên: Võ Minh Huy [w] www.dgm.vn
  4. 4. CẤU TRÚC TRANG HTML <head> … </head> • Chứa các khai báo ban • Khai báo tiêu đề, mô tả, tác giả,… • Các đoạn mã javascript <body> <p>lorem isbum</p> <a href=…>anchor</a> <div…> … </div> <img src=… /> </body> • Chứa nội dung hiển thị lên trình duyệt Giảng viên: Võ Minh Huy Ghi chú: Với Firefox, Chrome, nhấn Ctrl+U để xem mã nguồn HTML của 1 trang web. Ví dụ: http://dgm.edu.vn/html-dgm.html [w] www.dgm.vn
  5. 5. <HEAD> 1. Thẻ <title>…</title> • Tiêu đề của trang web. • Tối đa 70 kí tự • Tiêu chuẩn SEO: Cao Giảng viên: Võ Minh Huy [w] www.dgm.vn
  6. 6. <HEAD> 2. Thẻ <meta name="description" content=“…” /> • Mô tả nội dung trang web. • Tối đa 156 kí tự • Tiêu chuẩn SEO: Cao Giảng viên: Võ Minh Huy [w] www.dgm.vn
  7. 7. <BODY> Những nhóm thẻ HTML cơ bản để định dạng nội dung 1. 2. 3. 4. 5. Thuộc tính style Định dạng văn bản Liên kết Hình ảnh Bảng biểu Giảng viên: Võ Minh Huy [w] www.dgm.vn
  8. 8. THUỘC TÍNH STYLE Style là một thuộc tính dùng để định dạng hiển thị của các thẻ. • Đoạn văn bản in nghiêng: <p style=“text-style:italic”>Văn bản in nghiêng</p> • Hình ảnh thụt vô trái 20px: <img src=“http://example.com/image.jpg” style=“margin-left: 20px” /> Thông thường, các định dạng sẽ được khai báo trong 1 file CSS để dễ quản lý, dễ sử dụng. Tham khảo tất cả những định dạng CSS cho thuộc tính style tại địa chỉ: http://www.w3schools.com/css/. Khi Google thì gõ đại loại như “CSS chữ in nghiêng” Giảng viên: Võ Minh Huy [w] www.dgm.vn
  9. 9. ĐỊNH DẠNG VĂN BẢN 1. In đậm  Sử dụng thẻ <strong>…</strong>  style=“font-weight: bold”  Bình thường: style=“font-weight: none” 2. In nghiêng  Sử dung thẻ <em>…</em>  style=“font-style:italic”  Bình thường: style=“font-style:normal” [w] www.dgm.vn
  10. 10. ĐỊNH DẠNG VĂN BẢN 3. Canh trái style=“text-align: left” 4. Canh giữa style=“text-align: center” 5. Canh phải style=“text-align: right” 6. Canh đều style=“text-align: justify” Giảng viên: Võ Minh Huy [w] www.dgm.vn
  11. 11. ĐỊNH DẠNG VĂN BẢN 7. Gạch dưới style=“decoration: underline” 8. Gạch ngang style=“decoration: line-through” (line-through) 9. Gạch trên style=“decoration: overline” 10. Bình thường style=“decoration: none” Giảng viên: Võ Minh Huy [w] www.dgm.vn
  12. 12. ĐỊNH DẠNG VĂN BẢN 12. Kích thước chữ style=“font-size: 12px” style=“font-size: 8px” 13. Heading <h1>Tiêu đề bài viết</h1> <h2>Chuyên mục</h2> <h3>Chuyên mục con</h3> … <h6>Nội dung nhỏ</h6> Giảng viên: Võ Minh Huy [w] www.dgm.vn
  13. 13. LIÊN KẾT <a href=“http://www.dgm.vn” target=“_blank” rel=“nofollow”>DGM Việt Nam</a>  href=“http://www.dgm.vn”: Liên kết đến đường link http://www.dgm.vn  target=“_blank”: Mở website ở 1 tab/cửa sổ web khác  rel=“nofollow”: đặt thuộc tính nofollow cho đường dẫn  DGM Việt Nam: anchor text, nội dung xuất hiện trên website Ghi chú:  Có thể kết hợp với thuộc tính style để định dạng cho anchor text: in đậm, in nghiêng, gạch dưới, kích thước chữ,… Ví dụ hiển thi: Học SEO tại DGM Việt Nam có chất lượng tốt. Giảng viên: Võ Minh Huy [w] www.dgm.vn
  14. 14. HÌNH ẢNH <img src=“http://example.com/image.jpg” alt=“Mô tả hình ảnh” width=“200” height=“150” />     src=“http://example.com/image.jpg”: đường dẫn đến hình. alt=“…”: mô tả hình ảnh, giúp Googlebot hiểu được hình. width: chiều ngang height: chiều ngang Ghi chú: Có thể kết hợp với thuộc tính style để canh trái, phải cho hình. Giảng viên: Võ Minh Huy [w] www.dgm.vn
  15. 15. BẢNG BIỂU <table border=“1”> <tbody> <tr> <th>Tiêu đề 1</th> <th>Tiêu đề 2</th> </tr> <td>Nội dung 1</td> <td>Nội dung 2</td> <tr> </tr> <td>Nội dung 3</td> <td>Nội dung 4</td> <tr> </tr> </tbody> </table> Giảng viên: Võ Minh Huy Tiêu đề 1 Tiều đề 2 Nội dung 1 Nội dung 2 Nội dung 3 Nội dung 4  Có thể kết hợp với style hoặc CSS để định dạng cho bảng biểu  Trong các nội dung có thể chèn hình ảnh, liên kết với định dạng như các slide trước. [w] www.dgm.vn
  16. 16. TIÊU CHUẨN KHI VIẾT BÀI 1 Từ khóa nằm trong title Tiêu đề giới hạn 70 ký tự 2 Từ khóa nằm trong description Description giớn hạn 160 ký tự 3 Từ khóa nằm trong URL Chứa từ khóa chính 4 Từ khóa nằm trong thẻ H1 <h1>Từ khóa...</h1> 5 Từ khóa nằm trong thẻ H2-H6 <h2>Từ khóa...<h2> 6 Từ khóa được in đậm <strong>từ khóa</strong> 7 Từ khóa được in nghiêng <i>từ khóa</i> 8 Từ khóa nằm trong tên ảnh Tên ảnh có định dạng "tu-khoa.jpg" (không dấu) 9 Từ khóa nằm trong thẻ mô tả ảnh ALT="Tu khoa" (không dấu) 10 Từ khóa nằm trong đoạn văn đầu tiên 11 Mật độ từ khóa 2-5% 12 Có internal link sang sản phẩm liên quan Giảng viên: Võ Minh Huy Kiểm tra mật độ từ khóa dựa trên nội dung trên trang [w] www.dgm.vn
  17. 17. HỎI ĐÁP BẠN ĐẶT CÂU HỎI TÔI SẼ... GOOGLE ! Giảng viên: Võ Minh Huy [w] www.dgm.vn
  18. 18. SEE YOU SOON Giảng viên: Võ Minh Huy [w] www.dgm.vn

×