Thiết kế web seo đơn giản hơn với HTML5

HTML5 và CSS3 được nhận định là xu hướng tương lai của thiết kế web SEO bởi tối ưu của code giúp tăng tốc độ quét của spider google. Ví dụ như sự hỗ trợ các thẻ header, article, section, … giúp hạn chế các code lằng nhằng id, class để đặt tên, chưa kể có khi bị nhầm lẫn vì trùng tên. Hoặc phải vất vả add các đoạn script vào để chạy video, audio, … nhưng với html5 thì chỉ cần 1 tag video, audio là đủ.

Bài viết này sẽ trình bày sự thay thế khá đáng kể tag div đối với html5, giúp việc cắt html cho web dễ dàng hơn, cũng có nghĩa là web sẽ được seo tốt hơn. Các bạn đã quen dùng table có lẽ sẽ gặp một chút khó khăn đấy. Các thẻ div được thay thế bằng các header, article, aside, … thực tế chỉ là div nhưng đã được cấu hình sẵn vị trí cho dễ dàng định vị trên web chứ không có gì ghê gớm cả.

Trước hết, mời các bạn xem qua tấm hình này:

Để thực hiện cắt html cho cấu hình tấm hình trên, đối với div các bạn phải viết thế này:

<div id=”header”>Header</div>

<div id=”menu”>Menu</div>

<div id=”content_left”>Left

<div class=”content”>Content 1</div>

<div class=”content”>Content 2</div>

</div>

<div id=”content_right”>Right

<div class=”content”>Content 1</div>

<div class=”content”>Content 2</div>

</div>

<div id=”footer”>Footer</div>

Cùng với CSS:

#header {
background-color: #F00;
margin: 0px;
padding: 0px;
height: 100px;
width: 100%;
}
.clear {
clear: both;
height: 0px;
}
#menu {
background-color: #0F0;
width: 100%;
height: 30px;
}
#content_left {
margin: 0px;
float: left;
height: 400px;
width: 70%;
background-color: #FF0;
}
.content {
height: 50px;
background-color: #999;
margin: 10px;
}
#content_right {
background-color: #F0F;
margin: 0px;
height: 400px;
width: 30%;
float: left;
}
#content_right .content {
height: 50px;
background-color: #FF9;
margin: 10px;
}
#footer {
background-color: #0C0;
clear: both;
height: 100px;
width: 100%;
}

Cắt web trên bằng HTML5 như thế nào, trước hết ta thay <div id=”header”> bằng thẻ <header>, thay <div id=”menu”> thành thẻ <nav>; thay <div id=”content_left”> bằng <article>; thay <div class=”content”> bằng <section>; thay <div id=”content_right”> bằng <aside>; thay <div id=”footer”> bằng <footer>. Như vậy, các div với tên id và class đã được code htmlt5 hỗ trợ sẵn với các tag trên, thật tiện dụng phải không. Sau đó các bạn thay đổi CSS nhé, các id và class giờ đây đã trở thành tag luôn, nên không cần dấu “.” hay “#” gì cả, lúc đó CSS3 sẽ trở thành như thế này:

body {
width:550px;
}
header {
background-color: #F00;
height: 100px;
}

nav {
background-color: #0F0;
height: 30px;
}
article {
float:left;
height: 400px;
width: 70%;
background-color: #FF0;
}
article > section {
height: 50px;
background-color: #999;
margin: 10px;
}
aside > section {
height: 50px;
background-color: #FF9;
margin: 10px;
}
aside {
float:left;
background-color: #F0F;
margin: 0px;
height: 400px;
width: 30%;
}
footer {
background-color: #0C0;
clear: both;
height: 100px;
width: 100%;
}

Còn đây, cắt layout cho trang trên với html5 sẽ trở thành như thế này đây:

<header>header</header>

<nav>Menu</nav>

<article>left

<section>content 1</section>

<section>content 2</section>

</article>

<aside>right

<section>content 1</section>

<section>content 2</section>

</aside>

<footer>footer</footer>

Chỉ ngắn gọn có vậy thôi, các bạn thấy thế nào, việc cắt layout html đã dễ dàng hơn, kèm theo là việc thiết kế web, đặc biệt là thiết kế web seo sẽ nhanh hơn và hiệu quả hơn phải không?

Chúc các bạn thực hiện tốt nhé.

linkweb:http://clickmedia.com.vn/tai-lieu-thiet-ke-website/139-thiet-ke-web-seo-don-gian-hon-voi-html5.html