Hướng dẫn Thiết kế Website chuẩn SEO từ Cơ bản đến Nâng cao

hoangtao taomaytinh

by Hoàng Tào   -   25/10/2020

Sơ Lược:

Xin chào các bạn! Chào mừng các bạn đến với bài Hướng dẫn thiết kế website chuẩn SEO từ cơ bản đến nâng cao không cần biết lập trình, dành cho mọi đối tượng, hoàn toàn miễn phí.

thiet-ke-website-a-den-z

Kết thúc bài học nào, bạn sẽ sở hữu được một website có giao diện bắt mắt, tối ưu thiết bị di động và còn tối ưu sâu về tốc độ tải trang, tối ưu điểm Google PageSpeed.

Nào! Cùng bắt đầu với taomaytinh.com nhé.

1. Chọn tên miền Website

Để bắt đầu phần Thiết kế website, chúng ta sẽ bắt đầu tìm hiểu khái niệm để một website hoạt động được trên Internet thì bạn cần những gì.


Tên miền


Tuỳ vào loại đuôi .com, .vn, .info, .net, .top, … sẽ có giá tiền khác nhau, giao động trong khoản 100.000 - 700.000đ.


Server hosting


Tức là dịch vụ máy chủ dùng để chứa website của mình. Giá của hosting thì giao động từ khoản 500.000 cho đến vài triệu hoặc vài chục triệu trên một năm.


Như mình đã đề cập ở trên, để tối ưu điểm Google PageSpeed và tối ưu tốc độ tải trang thì Server hosting đóng vai trò rất là quan trọng.


Đầu tiên, anh em cần đăng ký tên miền và hosting nếu chưa có. Ai chưa biết cách đăng ký thì có thể xem bài viết Cách đăng ký Tên miền và Hosting của Azdigi và làm theo hướng dẫn chi tiết.

2. Cấu hình phần quản trị Hosting

Sau khi đã có tên miền và Hosting, các bạn tiến hành đăng nhập vào cPanel của nhà cung cấp.


cPanel là một phần mềm dùng để quản trị hosting rất trực quan và dễ sử dụng. Bạn có thể chú ý các mục cơ bản như:


  • File Manager: sẽ quản lý toàn bộ file của website
  • MySQL® Databases: toàn bộ dữ liệu trên website sẽ được lưu tại mục này
  • Addon Domains: bạn cần thêm tên miền vào đây để website có thể sử dụng được. Nếu như đã mua tên miền chung với Hosting thì bạn không cần phải làm bước thêm domain này.
    • New Domain Name: nhập tên miền bạn muốn thêm
    • Bấm vào Add Domain và chờ vài giây là hoàn thành
  • Select PHP version: bạn sẽ chọn được phiên bản PHP để chạy website của mình. Bạn có thể cấu hình theo mẫu bên dưới:
    • My domains:
      • Current PHP version: bạn chọn bản mới nhất là 7.4, phiên bản này sẽ tối ưu được tốc độ website. Nhưng nó có điểm hạn chế là những Source Code hoặc là Themes hoặc là Plug in thì cần phải được hỗ trợ bởi phiên bản này.
    • Extensions:
      • memcached: tích chọn
      • redis: tích chọn
    • Options:
      • max_execution_time: 3000
      • max_input_vars: 20000
      • memory_limit: 1024M
      • post_max_size: 8M
      • upload_max_filesize: 32M
Select-PHP-version

Cấu hình phần quản trị Hosting

3. Cài WordPress cho Website với 1 click

Cũng tại giao diện cPanel, bạn bấm chọn vào WordPress. Bấm vào Install Now.

  • Choose the version you want to install: chọn phiên bản WordPress mới nhất.
  • Choose Installation URL:
    • Choose Protocol: chọn https:// (đây là một chứng chỉ bảo mật mới)
    • Choose Domain: chọn tên website bạn muốn cài đặt WordPress
    • In Directory: để trống (bỏ chữ wp)
  • Site Name: tiêu đề toàn bộ Website
  • Site Description: có thể nhập câu Slogan hoặc mô tả về website
  • Admin Username: tài khoản của người quản trị (không nên để là admin, nên thay đổi để bảo mật website)
  • Admin Password: mật khẩu người quản trị ( gồm 8 ký tự trở lên, bao gồm ký tự viết hoa, viết thườngký tự đặc biệt)
  • Admin Email: nên nhập email chính để tiện sử dụng về sau
  • Select Language: chọn tiếng Việt hay tiếng Anh tuỳ bạn
  • Select Theme: các bạn không chọn, vì mình sẽ hướng dẫn cài đặt theme bản quyền ở các bước sau.

Bấm Install để Hosting bắt đầu cài đặt WordPress vào domain.


Vậy là bạn đã hoàn tất Cài WordPress cho Website.

4. Thiết kế giao diện Website

Sau khi hoàn tất cài WordPress thì website của bạn đã được public ra Internet rồi. Lúc này bạn sẽ tiến hành cài đặt và thiết kế lại giao diện cho website.


Đầu tiên bạn sẽ truy cập và đăng nhập vào trang quản trị của website, với tên người dùng và mật khẩu bạn đã tạo ở bước trên.


Cấu hình website cơ bản


Chúng ta sẽ làm việc chủ yếu ở thanh menu bên tay trái.

  1. Cài đặt > phần Tổng quan:
    • Múi giờ: chuyển thành UTC+7 là múi giờ Việt Nam
    • Định dạng ngày tháng: chọn theo định dạng d/m/y
    • Định dạng thời gian: chọn theo định dạng H:i
    • Lưu thay đổi.
  2. Cài đặt > phần Viết: để mặc định
  3. Cài đặt > phần Đọc:
    • Bố cục trang chủ:
      • Bài viết mới nhất: là dạng website động (như Blogs)
      • Một trang tĩnh: là dạng website tĩnh
    • Mỗi bài viết trong một nguồn cấp dữ liệu bao gồm: chọn Tóm tắt
    • Tương tác với công cụ tìm kiếm:
      • Khi các bạn đang trong tình trạng thiết kế website thì các bạn nên check vào mục Ngăn chặn các công cụ tìm kiếm đánh chỉ mục website này. Lúc này những công cụ tìm kiếm như Google, Bings, … sẽ không được phép vào website của bạn để truy cập dữ liệu.
      • Tại vì website của bạn đang mới, nếu các công cụ này lập chỉ mục thì website sẽ không được đánh giá tốt.
      • Chính vì thế sau khi mình thiết kế xong, thì mình mới bỏ check ở mục này.
      • Nghĩa là ở bước này mình sẽ check mục Ngăn chặn này.
  4. Cài đặt > phần Thư viện: cài đặt về kích thước ảnh mặc định khi tải lên.
    • Nghĩa là khi bạn tải lên bất cứ một hình ảnh nào thì trình cài đặt này sẽ tự động resize thêm nhiều cỡ ảnh trong đó, để phù hợp với khung hình website.
    • Các bạn có thể chỉnh tùy chọn kích thước theo ý mình, ở đây mình sẽ để mặc định.
  5. Cài đặt > phần Đường dẫn tĩnh: cài đặt URL bài viết.
    • Chọn Tiêu đề bài viết
    • Lưu thay đổi.

Cài giao diện cho website


Các bạn sẽ vào menu Giao diện. Ở đây sẽ chứa tất cả các themes bạn đã cài vào. Khi vào đây bạn sẽ thấy có sẵn những themes cơ bản.


Những themes mặc định này mình sẽ không dùng, chính vì thế, chúng ta sẽ bấm vào Thông tin về giao diện và chọn Xóa để nhẹ website.


Tiếp theo bạn sẽ thêm mới themes bản quyền. Bạn chọn vào nút Thêm mới.


Tại đây bạn sẽ thấy rất nhiều loại themes miễn phí. Tùy vào nhu cầu, bạn có thể chọn theme phù hợp để sử dụng.

Nhưng mà mặc định themes miễn phí sẽ có nhiều hạn chế, nên bạn sẽ chọn Tải giao diện lên để cài đặt themes Flatsome.


Flatsome là themes khá nổi tiếng và cộng động hỗ trợ ở Việt Nam khá nhiều. Hiện tại, số lượng website thiết kế bằng themes Flatsome rất lớn.


Các bạn có thể tải themes Flatsome tại đây.


Khi tải về xong, bạn tiến hành giải nén sẽ được tập tin flatsome v3.12.1flatsome-child.


Trở về giao diện trang quản trị website, bạn sẽ bấm Chọn tệp và tìm đến tập tin flatsome v3.12.1 rồi bấm Cài đặt.


Sau khi hệ thống báo Cài đặt giao diện thành công, bạn chọn Quay về trang Giao diện để tiếp tục cài tập tin flatsome-child.


Lúc hệ thống báo cài thành công thì bạn chọn Kích hoạt để dùng themes flatsome-child.


Các bạn lưu ý là phải để themes flatsome v3.12.1 và tuyệt đối không kích hoạt cũng như không được xoá.


Như vậy là bạn đã cài giao diện cho website thành công.

Lưu ý:

Khi bạn cài xong thì hệ thống sẽ yêu cầu bạn active themes Flatsome, lúc này bạn sẽ cần phải có key.


Bạn có thể sử dụng key dưới đây để thêm vào website và active.

c173b5f9-c7a7-4f30-83be-90e22de44f0d


Key này sẽ giúp bạn có thể thoải mái update themes Flatsome nếu nhà cung cấp có cập nhật.

key-flatsome

Nhập Key Theme Flatsome

Cài Plugin cho website


Ở đây cũng có những Plugin mặc định WordPress sẽ cài đặt sẵn. Các plugin này mình không dùng tới nên mình cũng sẽ chọn và Xóa nó đi.


Bạn bấm vào Cài mới để cài plugin cần thiết. Phần này cũng tương tự như phần Themes, bạn có thể tìm các plugin có chức năng bạn mong muốn để cài vào website.


Trong bài này thì mình sẽ gửi cho bạn danh sách các plugin cần thiết cho website, bạn có thể tải plugin tại đây.


Sau khi tải về, bạn tiến hành giải nén rồi chọn Tải plugin lên ở trang quản trị website. Bấm Chọn tệp rồi chọn plugin cần thiết xong bấm Cài đặt. Danh sách các plugin mình chia sẻ gồm có:

  • classic-editor: thay đổi trình soạn thảo bài viết của WordPress
  • contact-form-7: sao form và hiển thị form để khách hàng điền thông tin
  • table-of-contents-plus: tạo mục lục bài viết. Đây là 1 plugin cần thiết cho bài viết chuẩn SEO.
  • tinymce-advanced: nâng cao trình soạn thảo
  • Yoast SEO Premium-11.9: plugin Yoast SEO, đây là bản trả phí, chuyên về SEO Onpage được đánh giá là tốt nhất hiện tại.
  • wp-mail-smtp: mở hàm smtp để hỗ trợ gửi mail. Bạn nên xem cách Cấu hình SMTP Gmail Free vào WordPress Dễ Nhất.
  • wp-rocket: giúp tạo cache, nén css, html, javascript, … đây cũng là 1 trong những plugin tốt nhất hiện tại và cũng là bản trả phí. Ở bước này thì mình không kích hoạt wp-rocket mà sẽ cài đặt nó ở phần dưới.
  • wp-schema-pro: tạo schema cấu trúc dữ liệu website, đây cũng là phiên bản trả phí. Plugin này mình cũng tạm thời không kích hoạt.

Phía trên là danh sách các plugin hỗ trợ tốt nhất cho quá trình SEO website của các bạn.


Để tránh dài dòng, ở bài viết này mình sẽ không nói về cách tạo trang hay cách chỉnh giao diện như thế nào. Nếu bạn cần tìm hiểu thì có thể xem video bên dưới từ phút thứ 30 nha.

5. Cách tối ưu Website chuẩn SEO

Đầu tiên, các bạn sẽ thiết lập Plugin Yoast SEO Premium để tối ưu website.


Thiết lập Yoast SEO Premium


Ở thanh menu, bạn bấm vào SEO

  1. Tổng quan:
    • Tính năng:
      • Ở đây các bạn quan tâm đến mục Sơ đồ trang XML: bạn có thể bấm vào dấu ? để xem Sitemap của website.
  2. Hiển thị tìm kiếm:
    • Tổng quan:
      • Dấu ngăn cách tiêu đề: chọn theo ý thích
      • Tên tổ chức: điền tên công ty hoặc cửa hàng
      • Logo tổ chức: bấm Tải ảnh để chọn Logo
      • Lưu thay đổi.
    • Loại nội dung:
      • Bài viết (post):
        • Hiển thị Bài viết trong kết quả tìm kiếm: chọn .
        • Date in Google Preview: chọn Hiện
        • Hiển thị Yoast SEO Meta Box: chọn Hiện.
      • Trang (page):
        • Hiển thị Trang trong kết quả tìm kiếm: chọn .
        • Date in Google Preview: chọn Hiện
        • Hiển thị Yoast SEO Meta Box: chọn Hiện.
      • UX Blocks (blocks):
        • Hiển thị UX Blocks trong kết quả tìm kiếm: chọn Không.
        • Date in Google Preview: chọn Ẩn.
        • Hiển thị Yoast SEO Meta Box: chọn Ẩn.
      • Portfolio (featured_item):
        • Hiển thị Portfolio trong kết quả tìm kiếm: chọn Không.
        • Date in Google Preview: chọn Ẩn.
        • Hiển thị Yoast SEO Meta Box: chọn Ẩn.
      • Cài đặt cho lưu trữ Portfolio:
        • Hiển thị Lưu trữ cho Portfolio trong kết quả tìm kiếm: chọn Không.
        • Lưu thay đổi.
    • Media: để mặc định là .
    • Nguyên tắc phân loại:
      • Chuyên mục (category):
        • Hiển thị Chuyên mục trong kết quả tìm kiếm: chọn .
      • Thẻ (post_tag):
        • Hiển thị Thẻ trong kết quả tìm kiếm: chọn .
      • Format (post_format):
        • Các lưu trữ phân theo định dạng: chọn Đã vô hiệu hoá.
      • Categories (featured_item_category):
        • Hiển thị Categories trong kết quả tìm kiếm: chọn Không.
      • Tag (featured_item_tag):
        • Hiển thị Tag trong kết quả tìm kiếm: chọn Không.
      • Đường dẫn danh mục:
        • Bỏ đường dẫn của danh mục: chọn Gỡ bỏ.
      • Lưu thay đổi.
    • Lưu trữ:
      • Lưu trữ theo tác giả: chọn Đã vô hiệu hoá.
      • Lưu trữ theo thời gian: chọn Đã vô hiệu hoá.
      • Lưu thay đổi.
    • Đường dẫn:
      • Bật Breadcrumb: chọn Đã kích hoạt.
      • Lưu thay đổi.
    • RSS: để mặc định.
  3. Mạng xã hội:
    • Tài khoản: Ở đây bạn có thể copy các đường dẫn của trang mạng xã hội tương ứng vào.
    • Facebook, Twitter, Pinterest: Các bạn nên kích hoạt các fanpage của mình bằng cách lấy App ID để dán vào. Việc này giúp bạn hạn chế lỗi hiển thị khi hình ảnh khi chia sẻ link trên 3 mạng xã hội này.
  4. Chuyển hướng: Khi bạn muốn thay đổi đường dẫn của một bài viết bất kỳ hoặc bạn muốn chuyển hướng từ website này sang website khác.

Như vậy thì về cơ bản tuỳ chỉnh Yoast SEO đã thành công.

6. Kỹ thuật tối ưu Google PageSpeed và tốc độ tải trang

Đây là phần quan trọng nhất trong bài viết này. Các bạn có thể kiểm tra điểm Google PageSpeed tại đây.


Mình nói thêm về phần điểm này. Điểm này cao hay thấp còn phụ thuộc vào việc website của bạn đã được tối ưu và máy tính mà bạn đang dùng để kiểm tra nữa.


Cùng 1 website, có bạn sẽ kiểm tra được số điểm khác nhau như 4x, 5x, 7x, 9x, … vì điểm này còn phụ thuộc vào tốc độ mạng và máy tính mà bạn dùng để check nữa.


Tiếp theo thì nó sẽ phụ thuộc vào khả năng chịu tải của Hosting bạn đã mua. Ví dụ, Hosting của bạn đã mua chỉ chịu được khoản 100 người cùng 1 lúc thôi nhưng nếu 200 người vào cùng 1 lúc thì Hosting sẽ bị quá tải.


Chính vì thế, website sẽ bị chậm đi và đương nhiên điểm sẽ thấp xuống.


Các bước cơ bản để tối ưu Google PageSpeed

Mình sẽ liệt kê các bước cơ bản và đơn giản mà ai cũng có thể làm được.


1. Lựa chọn server Hosting

Đầu tiên là bạn cần phải chọn server Hosting thật tốt. Mình đã test khá nhiều dịch vụ Hosting và mình nhận thấy rằng Azdigi là dịch vụ khá là tốt và khả năng tối ưu điểm khá cao.


2. Kỹ thuật tối ưu hình ảnh

Ảnh sẽ có rất nhiều định dạng khác nhau như JPEG, PNG, GIF, … Các bạn lưu ý là nên sử dụng hình ảnh đuôi .JPEG thay vì những hình ảnh như định dạng PNG.


Vì dung lượng ảnh của PNG cao hơn JPEG rất nhiều. Các bạn chỉ dùng ảnh có định dạng PNG khi nào bắt buộc phải dùng ví dụ như hình ảnh cần phải trong suốt.


Để tối ưu định dạng và kích thước thì khi bạn chèn hình ảnh vào bất kỳ 1 website nào, bạn cần phải kiểm tra khung hình website của mình từ đó bạn có thể resize hình trước khi upload lên để phù hợp với khung hình website của bạn.


Ở đây mình sẽ chỉ cho bạn một mẹo rất đơn giản, tại giao diện website trên trình duyệt Chrome, bạn bấm phím F12.


Tiếp theo các bạn bấm tổ hợp phím Ctrl + Shift + C và rê chuột vào hình ảnh mà bạn muốn xem kích thước. Bạn sẽ thấy được kích thước cần resize.


Công việc của bạn là tìm hình ảnh cần dùng, sau đó resize cho kích thước giống như vậy để sử dụng.


3. Resize và định dạng hình ảnh

Để thực hiện việc này, các bạn có thể sử dụng Photoshop để thao tác là thuận tiện nhất.


Đối với bạn nào không biết dùng Photoshop thì nên sử dụng công cụ hỗ trợ ảnh của chính Google luôn, đó là squoosh.app.


Tại đây bạn có thể bấm vào select an image > chọn ảnh cần resize > ở cột Edit bên tay phải chọn nút Resize > nhập Width Height theo kích thước bạn cần > Compress thì bạn chọn Browser JPEG > Quality bạn để khoản 0.9 > Sau đó bạn có thể tải ảnh về để sử dụng.


Các bạn sẽ thấy được dung lượng ảnh giảm đến khoản 90%, do đó rất có ích cho việc load và tối ưu website của bạn.


4. Tối ưu Lazy Load

Bạn sẽ vào trang admin của website > chọn Flatsome > Advanced > Performance


Các bạn tích chọn tất cả các mục có trong đây sau đó Save All Changes. Phần này thì themes Flatsome có hỗ trợ Lazy Load nên các bạn có thể chỉnh trong này luôn.


Đối với những theme không có hỗ trợ thì các bạn phải dùng Plugin hoặc tự code thêm chức năng.


5. Kỹ thuật tối ưu Cache, HTML, CSS, JAVASCRIPT

Bạn sẽ vào trang admin của website > chọn Plugin > kích hoạt plugin WP Rocket.


Khi kích hoạt thành công thì ở thanh menu trên cùng các bạn sẽ thấy phần WP Rocket. Các bạn trỏ chuột vào đó và chọn Settings.


Thẻ CACHE

Bạn sẽ tích chọn các mục sau:

  • Enable caching for mobile devices
Thẻ FILE OPTIMIZATION

Bạn sẽ tích chọn các mục sau:

  • Minifying HTML
  • Combining Google Fonts files
  • Remove query strings from static resources
  • Minify CSS files
  • Combine CSS files
  • Optimize CSS delivery
  • Minify JavaScript files
  • Combine JavaScript files
  • Load JavaScript deferred

Sau đó bấm SAVE CHANGES để lưu lại.


Thẻ MEDIA

Bạn sẽ tích chọn các mục sau:

  • Enable for images
  • Enable for iframes and videos
  • Disable Emoji

Sau đó bấm SAVE CHANGES để lưu lại.


Thẻ DATABASE

Đây là trình dọn dẹp tự động. Lưu ý là đối với mã nguồn WordPress thì sau một thời gian dài sử dụng, khi bạn cài nhiều themes, nhiều plugin, nhiều bài viết, nhiều hình ảnh, nhiều sản phẩm thì Database sẽ phình to ra.


Lúc đó, hiệu suất và tốc độ website sẽ bị chậm lại. WP Rocket đã tích hợp sẵn tính năng dọn dẹp database. Bạn sẽ tích chọn các mục sau:

  • Revisions
  • Auto Drafts
  • Trashed Posts
  • Spam Comments
  • Trashed Comments
  • Expired transients
  • All transients
  • Optimize Tables
  • Schedule Automatic Cleanup > Weekly

Bấm OPTIMIZE và chờ vài giây để hoàn tất.


Như vậy là đã xong, các bạn lưu ý là đối với các themes khác, có kèm 1 số plugin khác thì bạn cần phải thử nghiệm xem có cần chọn các mục trong Thẻ FILE OPTIMIZATION hay không.


Vì có 1 vài themes khi bạn chọn các mục trên thì sẽ bị vỡ giao diện, nếu xảy ra tình trạng này thì bạn sẽ không chọn các mục làm ảnh hưởng đến giao diện của bạn là được.


6. Lựa chọn Themes

Các bạn cần lưu ý là lựa chọn những theme đã được nhà phát triển tối ưu sẵn tốc độ, giống như theme Flatsome mình demo trong bài viết này là 1 ví dụ. Vì theo mình đánh giá thì themes này đã được nhà phát triển tối ưu rất là tốt.


7. Lựa chọn Plugin

Chỉ cài đặt những Plugin khi bạn có nhu cầu sử dụng. Vì càng nhiều plugin trong website thì hiệu suất hoạt động sẽ bị giảm xuống. Chính vì thế, các bạn phải test kỹ plugin nào thật sự cần thiết cho mình thì mới cài đặt.


Thêm 1 mẹo nữa là các bạn có thể gom nhóm tất cả plugin có cùng 1 tính năng. Thì bạn chỉ cần chọn tải 1 trong số chúng để sử dụng chứ không cần phải cài tất cả.


8. Dịch vụ bên thứ 3

Bạn cần phải hạn chế nhúng dịch vụ bên thứ 3 vào website. Ví dụ như dịch vụ phổ biến đó là chèn video Youtube. Vì khi vào website, bạn cần phải chờ load cả iframe của video Youtube nên hiệu suất của website sẽ bị giảm xuống.


Ở đây chúng ta có thể khắc phục bằng cách chèn 1 cái hình và thêm 1 cái nút vào cái hình đó. Khi nào người dùng bấm vào cái nút đó thì iframe mới được thực thi. Điều này sẽ không ảnh hưởng đến tốc độ tải trang của mình.


Còn các dịch vụ của bên thứ 3 khác như chèn mã chat facebook hay mã chat của 1 công ty nào đó thì nó cũng làm giảm hiệu suất của bạn và làm điểm Google PageSpeed hạ xuống.


Đối với những mã của Facebook hay của Google như Analytics thì các bạn nên chèn vào Footer. Vì khi bạn chèn vào Header thì vừa vào website là bạn phải tải các mã này gây ảnh hưởng đến tốc độ, nên giải pháp là bạn nên chèn dưới chân trang.


Để chèn vào Footer thì bạn có thể vào trang quản trị của website > chọn Flatsome > Advanced > Global Settings > chọn FOOTER SCRIPTS để chèn mã nhúng.

Footer

7. Kết

Như vậy phần thiết kế website và tối ưu điểm Google PageSpeed đã ok rồi. Để các bạn phát triển được website của mình và muốn SEO tốt được Google thì các bạn cần phải có thêm những kiến thức về SEO.


Vì vậy, các bạn có thể xem thêm bài viết Trình Tự SEO Website Lên Top Google Vững Chắc để biết thêm các mẹo tối ưu.


Chúc các bạn thành công.

5/5 (2 Reviews)
5 2 votes
Article Rating
Đăng ký
Thông báo khi
guest
0 Comments
Phản hồi Cá Nhân
Xem tất cả bình luận
0
Bạn nghĩ gì về bài viết này, hãy để lại bình luận ngay.x
()
x