Tự Học SEO: SEO Onpage
Bạn đang xem bản rút gọn của tài liệu. Xem và tải ngay bản đầy đủ của tài liệu tại đây (3.28 MB, 44 trang )
BUỔI 4-5
ONPAGE OPTIMIZATION
TỐI ƯU HÓA TRANG WEB
(Tài liệu lưu hành nội bộ)
BÀI TẬP CHUẨN BỊ
• Chuẩn bị 3 website cho 3 nhóm thực hành
onpage thực tế , 3 web đã cài sẵn WP, login
như sau : 1.vietseo.vn, 2.vietseo.vn,
3.vietseo.vn
• Login : admin/vietseok15
META NAME – META ROBOTS – META TAG và
ứng dụng trong onpage SEO
META TAG (THẺ META)
• Meta Tag là các thẻ dùng để cung cấp các thông tin về một trang tài liệu
HTML. Thẻ meta không hiển thị với người dùng, nhưng lại dùng cho các
trình duyệt cùng với Robot của các Search Engine. Các thẻ meta được
đặt ở phần <head> của trang HTML. Các thẻ phổ biến nhất là Meta
Keyword, Meta Description.
• Các thẻ META robots là thẻ meta có ảnh hưởng đến các công cụ tìm kiếm
thu thập dữ liệu và cách mà PageRank "chảy" từ trang web. Thẻ META này
có thể sử dụng để xác định xem một trang cụ thể nên được lập chỉ mục
(index) và có các liên kết đi nên được theo hay không (follow).
• Meta name hay meta robots đều thuộc mã HTML của phần trình duyệt
biên dịch ra cho người xem.
• Chọn View Source khi bấm chuột phải đối với một số trình duyệt thông
dụng. Với HĐH Windows, có thể sử dụng phím tắt Ctrl + U.
• Có 2 loại meta tag thường sử dụng:
1. <meta HTTP-EQUIV="name"
CONTENT="content">
2. < meta NAME="name" CONTENT="content">
CẤU TRÚC HTML CỦA TRANG WEB
• HEAD: Cấu trúc gồm thẻ tiêu đề, các thẻ meta, các
scripts, các file hoặc định dạng CSS…
• BODY:
– Các thẻ phụ trợ như H1,H2,H3…
– Phần nội dung text, Menu (Li) các bảng (Table/div)
– Các Hyper link dẫn đường cho bots (Theo chỉ lệnh của
Meta robots)
• Lưu ý tỉ lệ cấu trúc mã HTML và Nội dung (Code to
Text ratio) tốt cho máy tìm kiếm: 20-25%
HEAD
<HEAD>
<TITLE>Tên Doanh nghiệp, Tên website, Nội dung chính của trang - Nên ghi tiêu đề có
liên quan đến từ khoá quan trọng để Search Engines dễ sắp xếp lên cao, không quá 70
ký tự. Chỉ có thể hiển thị tối đa 66 ký tự trên Google SERP.</TITLE>
<META name="Description" content="Mô tả của website hay nội dung của trang, nên
súc tích, ngắn gọn, không quá 160 ký tự hay 3 dòng. Nên lặp các từ khoá vào trong Thẻ
mô tả này để tăng khả năng tra cứu.">
<META name="Keywords" content=" Từ khoá của website ở đây, cách nhau giữa các từ
khoá là dấu phẩy, Từ khoá bằng tiếng Anh, không dài quá 100 từ, không lặp từ khoá 5
lần, Từ khoá nào quan trọng hay ưu tiên thì để trên cùng, thứ tự lần lượt. Nên lặp từ
khoá 2 đến 3 lần ">
</HEAD>
Lưu ý: Các thẻ TITLE, DESCRIPTION và NỘI DUNG TRANG phải LIÊN QUAN với nhau.
Nghiên cứu thêm về SEO copywriting cho TITLE, DESCRIPTION
Tham khảo Meta name
• 1. Meta Content Language (Dành cho các website không phải tiếng Anh)
Thẻ này được dùng để khai báo ngôn ngữ của website. Thẻ này cũng được dùng tương tự như Meta Name
Language. Các robot của SE thường dùng thẻ này để phân loại ngôn ngữ của website.
Ví dụ:
HTML
<META HTTP-EQUIV="Content-Language" CONTENT="vi">
Bạn nên sử dụng thẻ này nếu website của bạn có ngôn ngữ không phải tiếng Anh. Cá nhân tôi chưa từng
thử, tuy nhiên theo như những gì mà tôi tham khảo thì thẻ này rất có ích cho bot phân loại nội dung theo
ngôn ngữ.
2. Meta Content Type
Thẻ này dùng để khai báo mã cho website. Bạn nên sử dụng thẻ nay ngay cả khi bạn đã dùng khai báo DTD
cho tài liệu HTML. Bởi vì nếu bạn không sử dụng thì có khi người dùng website của bạn sẽ không đọc được
nội dung website của bạn do trình duyệt không tự động điều chỉnh mã phù hợp cho website của bạn. Ví
dụ: Nội dung website của bạn được nhập liệu thông qua mã UTF-8 nhưng được hiển thị ở chế độ của ISO
hay ASCII. Thả này còn có nhiều lợi ích khác, tuy nhiên bạn có thể tự tìm hiểu thêm về vấn đề này thông
qua các trang web về SEO.
Ví dụ:
HTML
http-equiv="Content-Type" content="text/html; charset=utf-8">
• 4. Meta Language (Dành cho các website GEO location : Chỉ định địa lý cho web)
Thẻ này tương tự như Meta Content Language nhưng cấu trúc khác như sau:
HTML
<META NAME="Language" CONTENT="english">
5. Meta Abstract
Cung cấp nội dung tóm tắt cho phần mô tả của website. Thẻ này chỉ được dùng để mô tả ngắn gọn hơn để
bot có thể xác định được chính xác hơn nội dung website của bạn. Nội dung của thẻ này thường khoảng
10 từ trở lại.
Ví dụ:
HTML
<META NAME="Abstract" CONTENT="Website khoa học kỹ thuật, giải trí và đời sống.">
Thẻ này hiện tại không nằm trong các thuật toán của Google, Yahoo!, và MSN.
• 6. Meta Author
Thẻ này dùng để hiển thị tác giả của một nội dung trên website. Nội dung của thẻ này thường là tên của
người đã tạo ra website. Bạn nên dùng thẻ này bằng tên của mình thay vì dùng email để tránh việc bị
spam mail. Nếu bạn muốn người dùng liên hệ với mình thì nên dùng một form để liên hệ sẽ tốt hơn.
Ví dụ:
HTML
<META NAME="Author" CONTENT=“VIETSEO">
• 7. Meta Copyright
Đây chỉ là thẻ mang tính thương hiệu hay các thông tin bản quyền cá nhân hay sở hữu trí tuệ của bạn. Ví
dụ:
HTML
<meta name="copyright" content="Copyright 2008">
8. Meta MSN (No ODP)
Thẻ này được ứng dụng cho việc mô tả website của bạn ở kết quả tìm kiếm của MSN. Do MSN thường hay
sử dụng mô tả của DMOZ nên dùng thẻ này sẽ giúp cho MSN chuyển qua dùng mô tả của bạn. Dùng thẻ
này sẽ cản Google lấy title từ DMOZ.org
Ví dụ:
HTML
<META Name="msnbot" CONTENT="NOODP">
CÁC THẺ META ROBOTS HAY DÙNG
CẤU TRÚC: <meta name="robots" content=“value”/>
• all - Bọ tìm kiếm đánh chỉ số tất cả (ngầm định).
• none - Bọ tìm kiếm không đánh chỉ số gì hết.
• index - Đánh chỉ số trang Web.
• noindex - Không đánh chỉ số trang, nhưng vẫn truy vấn đường dẫn URL.
• follow - Bọ tìm kiếm sẽ đọc liên kết siêu văn bản trong trang và truy vấn,
xử lý sau đó.
• nofollow - Bọ tìm kiếm không phân tích liên kết trong trang.
• noarchive - Không cho máy tìm kiếm lưu vào bộ nhớ bản sao trang Web.
• Nocache - Chức năng như thẻ noarchive nhưng chỉ áp dụng cho MSN/Live.
• Nosnippet - Không cho bọ tìm kiếm hiển thị miêu tả sinppet của trang
trong kết quả tìm kiếm vàkhông cho phép chúng hiển thị trong bộ nhớ
(cache hay caching).
• Noodp - Ngăn máy tìm kiếm khỏi việc tạo các miêu tả description từ các
thư mục danh bạ Web DMOZ như là một phần của snippet trong trang kết
quả tìm kiếm.
• Noydir - Ngăn Yahoo khỏi việc trích miêu tả trong danh bạ Web Yahoo!
Diectory để tạo các phần miêu tả trong kết quả tìm kiếm. Giá trị noydir chỉ
áp dụng với Yahoo và không có công cụ tìm kiếm nào khác sử dụng danh
bạn .
• Thẻ rel="canonical“ tương tự như rel="nofollow" tránh trùng lặp nội dung
khi một trang có nhiều phiên bản tương tự nhau.
/>CÁC THẺ SỬ DỤNG TRONG HTML BODY
• H1, H2 H6: là các thẻ tiêu đề (heading).
• UL, LI: Dành cho việc liệt kê.
• A: Liên kết.
• B, STRONG: Nhấn mạnh.
• I, EM: In nghiêng
• U: Gạch chân
• A: Thẻ liên kết (anchor) / Tìm hiểu thêm về sử dụng
REL cho các thẻ liên kết
• IMG: Thẻ hình ảnh / Lưu ý sử dụng caption và alt.
CẤU TRÚC: <A REL=“VALUE” HREF=“LINK” >ANCHOR TEXT / IMAGE</A>
- nofollow: Sử dụng để robot không đi theo liên kết này
- alternate: Liên kết tới một trang khác có nội dung tương đương (bản in,
bản dịch hoặc bản chạy song song v.v…).
- author: Liên kết tới trang của tác giả
- bookmark: Liên kết tới một URL cố định.
- next: Liên kết tới trang kế tiếp
- prev: Liên kết tới trang trước
- help: Liên kết tới một tài liệu trợ giúp
- license: Liên kết tới tài liệu thông tin bản quyền của trang
- search: Liên kết tới một công cụ tìm kiếm
- tag: Liên kết là thẻ trích ngắn nội dung của trang
- noreferrer: Chỉ định cho trình duyệt không gửi HTTP header kèm theo khi
người dùng vào liên kết này.
CÁC THUỘC TÍNH REL QUAN TRỌNG SỬ DỤNG TRONG THẺ ANCHOR
H1, H2, H3 … H6
• Đối với HTML, bạn đã có đến 6 loại thẻ H1, H2, H3, H4, H5, H6. Con
số càng nhỏ thì font chữ hiện ra càng to. Nghĩa là H1 là header lớn
nhất và H6 là header nhỏ nhất.
• Không nhất thiết phải sử dụng hết 6 thẻ heading. Tốt nhất, nên sử
dụng các thẻ H1, H2 và H3.
• Sử dụng các thẻ heading H1, H2,H3 H6 với mức độ quan trọng
giảm dần. Lưu ý các thẻ heading có thể sử dụng cho các tiêu đề
chính, các từ khóa dài (long term) và phải liên quan đến title,
description và nội dung trang.
• Ở các trình duyệt, các thẻ heading có font rất lớn. Có thể chỉnh font
các thẻ này bằng cách định nghĩa thông qua CSS.
<h1>Tiêu đề quan trọng nhất</h1>
<h2>Tiêu đề ít quan trọng hơn</h2>
<h3>Mô tả, trích lược về cụm nội dung lớn</h3>
<h4>Mô tả, trích lược về cụm nội dung trung bình</h4>
<h5>Mô tả, trích lược về cụm nội dung nhỏ</h5>
<h6>Tiêu đề, chú thích ở nội dung ít quan trọng</h6>
• Thẻ <li> dùng để liệt kê 1 danh sách các đề mục, Thẻ <li> được nằm trong
thẻ <ol> khi sắp xếp có thứ tự (đánh số) hoặc trong thẻ <ul> khi sắp xếp
không ghi thứ tự. Trước khi dùng nên reset lại các thuộc tính mặc định của
nó để dể dàng kiểm soát khoảng cách giữa nó với các thành phần liên
quan.
• Reset các thuộc tính bởi: margin : 0; padding : 0;…
• Khi dùng thẻ <li> nếu ta muốn dùng các thuộc tính như list-style, list-style-
position. Để tạo icon đầu dòng thì không dùng thuộc tính height chung với
nó. Nếu dùng chung sẽ gây ra lỗi hiển thị ở trình duyệt IE7. Trường hơp
muốn tăng khoảng cách dòng giữa 2 <li> thì có thể dùng padding-top và
padding-bottom.
• Dùng thẻ li phân biệt các đề mục Menu website tăng cường sức mạnh SEO cho các
thư mục con trong website.
Thẻ Anchor (Mỏ neo) và thuộc tính Href
• HTML sử dụng thẻ <a> (anchor) để tạo đường liên kết đến một tài liệu khác.
Thẻ anchor có thể liên kết đến bất cứ một tài nguyên nào trên internet, chúng có
thể là một trang HTML, một tấm hình, một file nhạc, một bộ phim .v.v.
Cú pháp để tạo một thẻ anchor
• <a href="url">Chữ bạn muốn seo ở đây</a>
• Thẻ <a> được sử dụng để tạo một điểm neo và liên kết bắt đầu từ đó, thuộc tính
href được sử dụng để chỉ ra tài liệu sẽ được liên kết đến, và chữ ở xuất hiện ở giữa
hai tag < và > sẽ được hiển thị dưới dạng siêu liên kết.
Điểm neo sau xác định liên kết đến diễn đàn của vietphotoshop.com
• <a href="">SEOMINAR1</a>
• Dòng code ở trên sẽ xuất hiện như sau trong trình duyệt.
SEOMINAR1
W3C – Check lỗi html
CẤU TRÚC WEBSITE
Cấu trúc website
-Tạo cấu trúc phẳng (Flat) sao cho giảm thiểu số lick từ Home tới trang nội dung nằm
sâu nhất.
Tạo cấu trúc Silo
-Trang chủ link đến các danh mục cha (category level) -> link xuống các danh mục con
(sub-category) -> link xuống các trang sản phẩm (product pages).
-Các trang sản phẩm link ngược lại category level thông qua breadcrumb.
Ví dụ: />Vì vậy khi thiết kế website, bộ phận design nên design thêm phần links này vào giao
diện.
