Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
WEB RESPONSIVE & SEO(Website tùy biến và SEO)
Tổng quan- Web responsive là website có thể tự điều chỉnh kíchthƣớc tùy thuộc vào thiết bị hiển thị.- Có 2 cách làm
Cách 1Viết code nhận diện thiết bị.Có tốt cho SEO?
Website hiển thị trên PC + MobileCách 2Sử dụng kỹ thuật CSS để tùy biến giao diện co giãn theo kíchthƣớc của cửa sổ trình ...
CSS3 Media QueriesCSS3 Media Queries- Hiển thị linh hoạt hơn trên các loại thiết bị, không cần sử dụngmã javascript.Kĩ thu...
Các bƣớc thực hiệnTag meta viewport là điều tất yếu trong responsive layouts. Nóthiết lập màn hình theo tỷ lệ 1×1, điều nà...
Trình duyệt IE8Trình duyệt IE8 trở xuống không hỗ trợ media query. Bạn có thểsử dụng media-queries.js hoặc respond.js để h...
Bƣớc 2: Tạo viewpoint cho TableViewpoint < 960 -> Table@media only screen and (max-width: 960px){styling goes here}
Bƣớc 2: Tạo viewpoint cho MobileViewpoint < 524 -> Mobile@media only screen and (max-width:524px){styling goes here}
Bƣớc 3: Lƣu vào fileLƣu tất cả đoạn CSS sau vào file mediaqueries.css@media only screen and (max-width: 960px){styling goe...
Website minh họahttp://anhthethao.comhttp://www.1stwebdesigner.com/css/media-queries-tutorial-convert-burnstudio-responsiv...
WEB RESPONSIVECÓ LỢI GÌ CHO SEO?
• Time on site ít -> Website có nội dung không phù hợp với từkhóa.• Giao diện mobile khác với giao diện trên PC-> Mất khác...
Khi ngƣời dùng search bằng thiết bị di động:Google đánh giá cao những website có tối ƣu cho di động-> Website có thể co gi...
CSS3 Media Queries- Một liên kết đến website chính cũng là một liên kếtđến website di động.-> Backlink Website tùy biến = ...
Khi website đã đƣợc tối ƣu cho thiết bị di động, lƣợngtruy cập tháng có thể tăng lên đáng kể.Kết quả
• Tốn thời gian và công sức• Lâu hơn làm website mới• Lập kế hoạch chi tiết trƣớc khi làmMất nhiều thời gian và công sức
- Website có quá nhiềuthông tin.- Khó tối ƣu cho diđộng-> Phiên bản dànhriêng cho thiết bị diđộng.Website quá lớn
CSS3 Media Queries-> Website đơn giản.Phiên bản web dành riêng cho mobile-> Website phức tạp và tƣơng tác nhiều với ngƣời ...
1. Tối ƣu hình ảnh (Table/Mobile)2. Thiết kế cho tất cả các kích cỡ màn hình(Các kích thƣớc khác nhau của PC/Table/Mobile)...
Trần Kim Phụng0918 157 690phung@kimthang.vnwww.kimthang.vnCẢM ƠN
Web Responsive & SEO
Upcoming SlideShare
Loading in …5
×

Web Responsive & SEO

695 views

Published on

Nguồn: http://www.seomix.vn/2013/05/web-responsive-seo-tai-nhim-seo.html

Published in: Design
  • Be the first to comment

  • Be the first to like this

Web Responsive & SEO

  1. 1. WEB RESPONSIVE & SEO(Website tùy biến và SEO)
  2. 2. Tổng quan- Web responsive là website có thể tự điều chỉnh kíchthƣớc tùy thuộc vào thiết bị hiển thị.- Có 2 cách làm
  3. 3. Cách 1Viết code nhận diện thiết bị.Có tốt cho SEO?
  4. 4. Website hiển thị trên PC + MobileCách 2Sử dụng kỹ thuật CSS để tùy biến giao diện co giãn theo kíchthƣớc của cửa sổ trình duyệt.
  5. 5. CSS3 Media QueriesCSS3 Media Queries- Hiển thị linh hoạt hơn trên các loại thiết bị, không cần sử dụngmã javascript.Kĩ thuật thiết kế này đƣợc gọi là Responsive Web Design - mộtchức năng giúp xác định và khoanh vùng chính xác thiết bị củangƣời dùng, từ đó đƣa ra stylesheet thích hợp, hiện nay đƣợcứng dụng rất phổ biến trên thế giới.
  6. 6. Các bƣớc thực hiệnTag meta viewport là điều tất yếu trong responsive layouts. Nóthiết lập màn hình theo tỷ lệ 1×1, điều này sẽ loại bỏ các chứcnăng mặc định từ các trình duyệt smartphone, chỉ hiển thị vừamàn hình để xem và có thể phóng to bằng thao tác tay, thêm vàotrong thẻ <head>.HTML code:<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">Bước 1: Tạo Meta Tag
  7. 7. Trình duyệt IE8Trình duyệt IE8 trở xuống không hỗ trợ media query. Bạn có thểsử dụng media-queries.js hoặc respond.js để hỗ trợ.HTML code:<!--[if lt IE 9]><script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script><![endif]-->
  8. 8. Bƣớc 2: Tạo viewpoint cho TableViewpoint < 960 -> Table@media only screen and (max-width: 960px){styling goes here}
  9. 9. Bƣớc 2: Tạo viewpoint cho MobileViewpoint < 524 -> Mobile@media only screen and (max-width:524px){styling goes here}
  10. 10. Bƣớc 3: Lƣu vào fileLƣu tất cả đoạn CSS sau vào file mediaqueries.css@media only screen and (max-width: 960px){styling goes here}@media only screen and (max-width: 524px){styling goes here}Thêm vào trong thẻ <head>:HTML code: <link rel="stylesheet" href="mediaqueries.css">
  11. 11. Website minh họahttp://anhthethao.comhttp://www.1stwebdesigner.com/css/media-queries-tutorial-convert-burnstudio-responsive-website/
  12. 12. WEB RESPONSIVECÓ LỢI GÌ CHO SEO?
  13. 13. • Time on site ít -> Website có nội dung không phù hợp với từkhóa.• Giao diện mobile khác với giao diện trên PC-> Mất khách truy cập cũ• Không có phiên bản web dành cho mobile-> Mất 61% khách truy cập.Tối đa lƣợt truy cập
  14. 14. Khi ngƣời dùng search bằng thiết bị di động:Google đánh giá cao những website có tối ƣu cho di động-> Website có thể co giãn theo màn hình.Xếp hạng cho các tìm kiếm di động
  15. 15. CSS3 Media Queries- Một liên kết đến website chính cũng là một liên kếtđến website di động.-> Backlink Website tùy biến = Backlink Website thôngthƣờng trên PC.Ƣu điểm: Link building
  16. 16. Khi website đã đƣợc tối ƣu cho thiết bị di động, lƣợngtruy cập tháng có thể tăng lên đáng kể.Kết quả
  17. 17. • Tốn thời gian và công sức• Lâu hơn làm website mới• Lập kế hoạch chi tiết trƣớc khi làmMất nhiều thời gian và công sức
  18. 18. - Website có quá nhiềuthông tin.- Khó tối ƣu cho diđộng-> Phiên bản dànhriêng cho thiết bị diđộng.Website quá lớn
  19. 19. CSS3 Media Queries-> Website đơn giản.Phiên bản web dành riêng cho mobile-> Website phức tạp và tƣơng tác nhiều với ngƣời sử dụngnhƣ Facebook.Ứng dụng
  20. 20. 1. Tối ƣu hình ảnh (Table/Mobile)2. Thiết kế cho tất cả các kích cỡ màn hình(Các kích thƣớc khác nhau của PC/Table/Mobile)3. Có thể hiển thị tất cả nội dung(Đẩy QC xuống phía dƣới)4. Tối ƣu hóa cho cảm ứng(Cảm ứng với mọi kích thƣớc màn hình)5. Đơn giản về kỹ thuật (Không sử dụng flash)6. Kiểm tra với các trình duyệt khác nhauĐôi điều lƣu ý khi xây dựng website cho di động
  21. 21. Trần Kim Phụng0918 157 690phung@kimthang.vnwww.kimthang.vnCẢM ƠN

×