✍️
cssadvand
  • [BEM] Exploring SMACSS: Scalable and Modular Architecture for CSS
  • 😀CSS-only infinite scrolling carousel animation (ok)
  • css carousel
  • 🤡 Một vài thủ thuật CSS mà chính Frontend có thể còn chưa biết
  • Một vài thủ thuật CSS mà chính Frontend có thể còn chưa biết (Phần 1)
  • Một vài thủ thuật CSS mà chính Frontend có thể còn chưa biết (Phần 2)
  • Một vài thủ thuật CSS mà chính Frontend có thể còn chưa biết (Phần 3)
  • Một vài thủ thuật CSS mà chính Frontend có thể còn chưa biết (Phần 4)
  • Một vài thủ thuật CSS mà chính Frontend có thể còn chưa biết (Phần 5)
  • Một vài thủ thuật CSS mà chính Frontend có thể còn chưa biết (Phần 6)
  • Một vài thủ thuật CSS mà chính Frontend có thể còn chưa biết (Phần 7)
  • Một vài thủ thuật CSS mà chính Frontend có thể còn chưa biết (Phần 8)
  • Một vài thủ thuật CSS mà chính Frontend có thể còn chưa biết (Phần 9)
  • Một vài thủ thuật CSS mà chính Frontend có thể còn chưa biết (Phần 10)
  • Một vài thủ thuật CSS mà chính Frontend có thể còn chưa biết (Phần 11)
  • Một vài thủ thuật CSS mà chính Frontend có thể còn chưa biết (Phần 12) [Phần đặc biệt]
  • Một vài thủ thuật CSS mà chính Frontend có thể còn chưa biết (Phần 13)
  • Một vài thủ thuật CSS mà chính Frontend có thể còn chưa biết (Phần 14)
  • 😘Thuộc tính tabindex="-1" không ngờ lại nguy hiểm vậy đọc bài dưới 😌
  • Một vài thủ thuật CSS mà chính Frontend có thể còn chưa biết (Phần 15)
  • 🥸CSS tạo theme cho dark mode đọc bài (Phần 16)
  • Một vài thủ thuật CSS mà chính Frontend có thể còn chưa biết (Phần 16)
  • Mẹo để optimize Google Fonts API mà ít dev để ý đọc (Phần 17)
  • Một vài thủ thuật CSS mà chính Frontend có thể còn chưa biết (Phần 17)
  • Thật may nhờ có white-space: pre-line đọc (Phần 18)
  • Một vài thủ thuật CSS mà chính Frontend có thể còn chưa biết (Phần 18)
  • Một vài thủ thuật CSS mà chính Frontend có thể còn chưa biết (Phần 19)
  • Một vài thủ thuật CSS mà chính Frontend có thể còn chưa biết (Phần 20)
  • Một vài thủ thuật CSS mà chính Frontend có thể còn chưa biết (Phần 21)
  • Một vài thủ thuật CSS mà chính Frontend có thể còn chưa biết (Phần 22)
  • Thuộc tính image-rendering nhờ bài (Phần 23) mà phát hiện ra cách làm bức ảnh mờ trở nên rõ nét
  • Một vài thủ thuật CSS mà chính Frontend có thể còn chưa biết (Phần 23)
  • Một vài thủ thuật CSS mà chính Frontend có thể còn chưa biết 🤡
  • Một vài thủ thuật CSS mà chính Frontend có thể còn chưa biết (Phần 24)
  • Một vài thủ thuật CSS mà chính Frontend có thể còn chưa biết (Phần 25)
  • Một vài thủ thuật CSS mà chính Frontend có thể còn chưa biết (Phần 26)
  • Một vài thủ thuật CSS mà chính Frontend có thể còn chưa biết (Phần 27)
  • 😘mix-blend-mode pha trộn giữa 1 đối tượng với đối tượng bên dưới đó (Phần 28)
    • Một vài thủ thuật CSS mà chính Frontend có thể còn chưa biết (Phần 28)
  • Một vài thủ thuật CSS mà chính Frontend có thể còn chưa biết (Phần 29)
  • 🥸aspect-ratio (Phần 30)
  • Một vài thủ thuật CSS mà chính Frontend có thể còn chưa biết (Phần 30)
  • Một vài thủ thuật CSS mà chính Frontend có thể còn chưa biết (Phần 31)
  • Một vài thủ thuật CSS mà chính Frontend có thể còn chưa biết (Phần 32)
  • Một vài thủ thuật CSS mà chính Frontend có thể còn chưa biết (Phần 33)
  • 😘CSS Scroll Triggered Animations Full (ok)
  • 🥹Difference between animation and transition in CSS
  • 😄animation-timeline có phải nó làm việc với thanh cuộn (ok)
  • 😍Từ bài animation-timeline làm việc với thanh cuộn tìm ra cách sử dụng background-clip: text;
  • background-clip: text;
  • 😅Sử dụng list-style-type để tạo icon đẹp (ok)
  • 😁Convert css to scss good (ok)
  • 😁CSS - Hướng dẫn: Tạo ảnh động với hàm steps()
  • 😆Multiple image cross fading in CSS - without (java) khá đẹp script (ok)
  • 😇Function css full 🤩
  • 😅[SVG] SVG viewBox Attribute (ok)
  • 😅Tailwind CSS (ok)
  • 😍Thật không thể tin được sử dụng filter: brightness(0) invert(1); để chuyển màu ảnh 🤣
  • 😅Background text matter.vn (ok)
  • 😆Chọn màu, color, color contrast ratio (ok)
  • 😁Tổng hợp Animating SVG text cực đẹp (ok)
  • 😂Chuyển động tròn :(
  • 😆MOVE-BG mepop.vn (ok)
  • 😆Counter Increment list, number xuongkhopbacninh.com (ok)
  • Boxes That Fill Height, full Height(Or More) (and Don’t Squish) (ok)
  • Equal Height (chiều cao bằng nhau) (oK)
  • 😅Sử dụng nodejs và scss cấu trúc thư mục tốt P.1(ok)
  • 🥲Sử dụng nodejs và js cấu trúc thư mục tốt P.2 (ok)
  • === START STUDY P.1 && P.2 SỬ DỤNG NODEJS VÀ CẤU TRÚC ===
  • 😉1 Giao diện sử dụng thuộc tính data-coreui-toggle="dropdown" (ok)
  • === END STUDY P.1 && P.2 SỬ DỤNG NODEJS VÀ CẤU TRÚC ===
  • 😆Css box-shadow đẹp (ok)
  • === START Tutorials Classical BEM stack ===
  • 😀HTML with BEM (ok)
  • 😀CSS with BEM (ok)
  • === END Tutorials Classical BEM stack ===
  • === START SMACSS ===
  • Categorizing CSS Rules
  • Base Rules
  • Layout Rules
  • Module Rules
  • State Rules
  • Theme Rules
  • Changing State
  • === END SMACSS ===
  • All CSS Grid Properties (ok)
  • 😇Column Grid full example(Responsive)
  • === Start Điều quan trọng nhất cách chia cột và thay đổi vị trí ===
  • CSS Grid căn bản - Phần 1
  • CSS Grid căn bản - Phần 2
  • CSS Grid: Holy Grail Layout
  • Sử dụng CSS Grid để xây dựng web layout
  • Luyện tập CSS Grid qua bài tập tạo layout Airbnb, youtube, Pinterest
  • === End Điều quan trọng nhất cách chia cột và thay đổi vị trí ===
  • Overflow:hidden dots at the end full (ok)
  • Gulp để viết Sass && cai dat
  • Cách nhúng font vào svg (ok)
  • font-face Hướng dẫn conver font và nhúng sử dụng online (ok)
  • 😇Create CSS Animations on Scroll (ok)
  • Hiệu ứng hover bằng js hiện phần description (ok)
  • Text Link on Hover phần 1 (ok)
  • Kết hợp transition & transform-origin phần 2 (ok)
  • Text Hover Phần 3 (ok)
  • Social Media Icons hover effect (ok)
  • css rotate a pseudo :after or :before content:""
  • Hiệu ứng ảnh tự zoom, animation, scale phần 1 full (ok)
  • CodePen Home Image zoom on hover - auto run - view (ok)
  • scroll-padding (ok)
  • Tạo vòm giống styleathome (ok)
  • Tổng hợp những css đẹp để làm trang trí (ok)
  • Cách thay đổi màu svg full (ok_)
  • Disable Auto Zoom in Input “Text” tag - Safari on iPhone (ok)
  • function calc css (ok)
  • Get the scroll distance from bottom to scroll, var distanceFromBottom (ok) vinmec.com (ok)
  • ---------- Start CSSscan không sử dụng ----------------------
  • Unused CSSscan your website for unused CSS selectors (ok)
  • PurifyCSS OnlineRemove unused CSS code from your stylesheets (ok)
  • Remove unused CSS styles from Bootstrap using PurgeCSS (ok)
  • 😆Thêm column, media bootstrap, custom bootstrap (ok)
  • ---------- End CSSscan không sử dụng ----------------------
  • Xây dựng blog đơn giản (Node + React)
  • Các tham số của Gulp
  • File đã thực hành với Gulp (ok
  • gulp-livereload (chưa đọc)
  • Tối ưu hiệu năng Google Fonts (ok)
  • Học CSS GRID thông qua những layout phức tạp
  • [GRID] sử dụng grid xây dựng layout giống Masonry (ok)
  • PageSpeed Insights Chrome Extension (ok)
  • Tăng tốc website bằng cách cải thiện front-end
  • Code chuẩn SEO là gì
  • 10 CSS3 Animation Tools phổ biến
  • Trang check SEO OKE
  • Làm sao để SEO từ khóa?
  • Kiểm soát web typography với việc hiển thị CSS font (ok)
  • Các mẫu phông chữ hiển thị và thuộc tính hiển thị phông chữ của CSS
  • Một số mẹo tối ưu hóa HTML/CSS/JS đúng chuẩn
  • Web Performance
  • Preload, Prefetch, Preconnect (ok)
  • Tối ưu hóa phần Front end cho trình duyệt (part 1)
  • Tối ưu hóa phần Front end cho trình duyệt (part 2)
  • Sử dụng thuộc tính attr html && css (ok)
  • Disable Auto Zoom in Input “Text” tag - Safari on iPhone (ok)
  • CSS submit button weird rendering on iPad/iPhone submit color (ok)
  • Turn off iPhone/Safari input element rounding (ok)
  • scroll bongda.com.vn (ok)
  • Làm chiếc xe ô tô chuyển động giống 2020.yp.vn (ok)
  • Sự khác biệt giữa :empty và :blank trong CSS (ok)
  • Is there a CSS parent selector? (ok)
Powered by GitBook
On this page

Was this helpful?

Code chuẩn SEO là gì

https://viblo.asia/p/code-chuan-seo-la-gi-L4x5xNkgZBM

PreviousTăng tốc website bằng cách cải thiện front-endNext10 CSS3 Animation Tools phổ biến

Last updated 5 years ago

Was this helpful?

Code chuẩn SEO là gì

Giới thiệu:

Tối ưu Code chuẩn SEO là quá trình tối ưu tệp trích xuất HTML, cấu trúc website thân thiện với bộ máy tìm kiếm. Tối ưu Code chuẩn SEO nhằm mục tiêu điều hướng bộ tìm kiếm một cách tốt nhất. Giúp bộ máy tìm kiếm dễ dàng tải dữ liệu, đọc, phân tích và craw dữ liệu của website bạn một cách thuận tiện, dễ dàng!.

Đây là một công đoạn tương đối quan trọng trong quá trình gia công SEO cho một website cụ thể. Ở công đoạn Onpage tối ưu Code chuẩn SEO, đòi hỏi kiến thức chuyên sâu về các tiêu chí đánh giá code chuẩn SEO, vừa đòi hỏi chuyên môn lập trình web trên các nền tảng ngôn ngữ lập trình khác nhau!.

Một website được đánh giá là Code chuẩn SEO bao hàm 3 yếu tố cơ bản:

  • Website thân thiện với người dùng. Thiết kế đẹp, nội dung điều hướng người dùng tốt. Thu hút và giữ chân người dùng lâu!.

  • Website có cấu trúc thân thiện với bộ máy tìm kiếm. Giúp bộ máy tìm kiếm dễ dàng thu thập thông tin từ website.

  • Phần quản trị website có đầy đủ các cơ chế quản trị thân thiện dễ dàng tùy biến SEO đối với các Admin không có kỹ năng chuyên sâu vào Code.

Làm gì để tối ưu code chuẩn SEO cho Onpage website?.

  • Nếu bạn là Coder: Hãy dựa vào các tiêu chí đánh giá tối ưu code chuẩn SEO để hoàn thiện phần nền móng 1 cách tốt nhất.

  • Nếu bạn không phải là Coder: Hãy nắm vững các tiêu chí tối ưu code chuẩn SEO và yêu cầu đối tác thiết kế website tối ưu giúp bạn với cách làm chuyên nghiệp!.

Dưới đây là 1 số yếu tố cơ bản để có được một trang web chuẩn seo.

I. Tên miền & Hosting.

  1. Chọn tên miền có tính liên quan cao đến nội dung website. Có thể chứa một vài từ khóa chính của website càng tốt, tên miền có thời gian sử dụng càng lâu càng được đánh giá cao.

  2. Hosting có tấc độ nhanh, IP Server cũng ảnh hưởng đôi chút tới seo (Nếu bạn seo web ở Việt Nam nên mua server đặt tại Việt Nam).

II. Thiết kế website.

  1. Tối ưu hóa Url website.

  • Url nên mã hóa theo tiêu đề bài viết, có liên quan tới nội dung bài viết, keywords, description.

  • Sử dụng rewrite url đối với các liên kết và phân tách mỗi từ bằng dấu trừ – hoặc gạch dưới _.

  1. Title (tiêu đề bài viết) thẻ này luôn đặt trên cùng và chứa nội dung liên quan tới nội dung bài viết, url website. Độ dài của title khoảng 60-65 ký tự.

  2. Keywords (từ khóa) nội dung thẻ này không chứa quá nhiều từ khóa, tổng số ký tự không quá 160 ký tự.

  3. Description (mô tả) nội dung thẻ này không chứa quá nhiều từ khóa, tổng số ký tự không quá 160 ký tự. Mô tả ngắn gọn về nội dung bài viết.

  4. Luôn đặt tiêu đề bài viết, từ khóa quan trọng trong thẻ h1, h2, h3…theo thứ tự ưu tiên quan trọng của từ khóa.

  • h1 Keywords /h1

  • h2 Keywords /h2

  • h3 Keywords /h3

  1. Tách các phần như style css, javascript, data thành các file độc lập. Hạn chế sử dụng javascript quá nhiều.

  2. Hạn chế việc sử dụng table trong html. Đặc biệt là các table lồng table.

  3. Cố gắng đặt nội dung chính nằm ở đầu của cấu trúc trang html.

  4. Tạo các chỉ mục hướng dẫn (breadcumb). Mục đích cho phép người dùng dễ dàng quay lại các chỉ mục một cách dễ dàng.

  5. Dùng định dạng chữ cho phần liên kết header và footer thay vì dùng hình ảnh. Có thể dùng javascript để xử lý các liên kết.

  6. Tạo trang 404 cho các liên kết không tìm thấy.

  7. Tạo mục chia sẻ bài viết đến các mạng xã hội bằng cách tạo ra các nút chia sẻ.

  8. Tối ưu hiển thị trang web trên các thiết bị di động. Chính vì ngày nay việc truy cập trên các thiết bị di động không còn xa lạ do đó sẽ bị giảm thiểu người dùng nếu website của bạn không hỗ trợ việc hiển thị trên các thiết bị di động.

  9. Tạo RSS feed cho nội dung website.

  10. Tạo sitemap chứa liên kết đến các trang nội dung trên website. Nó cho phép người dùng có thể dễ dàng tìm kiếm và truy cập đến nội dung mà họ cần.

  11. Kiểm tra cấu trúc html chuẩn với W3C (khi kiểm tra có thể bỏ qua các lỗi cảnh báo HTML5 và các thẻ og:title, og:description, og:image khi định dạng website bằng HTML5).

  12. Cho phép thay đổi thẻ meta và title, keywords, description ứng với mỗi nội dung bài viết.

III. Biên tập nội dung.

  1. Khi cập nhật nội dung url, title, keywords, description phải liên quan tới nhau.

  2. Chỉ sử dụng từ có nghĩa, cấu trúc có thể đọc được và dễ dàng để thu thập dữ liệu từ Google.

  3. Đặt link vào các trang liên kết khác sẽ giúp người đọc dễ theo dõi và giúp index dễ dàng.

  4. Nội dung bài viết dễ đọc. Phần đầu và nội dung bài viết nằm trong đoạn văn kết hợp với các sub header và number list. Chủ yếu là nội dung phải mới mẻ, lôi cuốn, trình bày đẹp mắt và mang tính thông tin cao.

  5. Thêm hình ảnh để nội dung hấp dẫn hơn. Đặt các thuộc tính như title và alt vào hình ảnh sẽ giúp cho SE đánh giá cao cho nội dung website của bạn và từ khóa liên quan đối với hình ảnh.

  6. Không nên nhồi nhét quá nhiều từ khóa vào mỗi trang web, hãy chọn những từ khóa tiêu biểu và đặt vào phần cuối của nội dung bài viết.

  7. Hạn chế việc dùng flash hoặc tốt hơn là không dùng flash vì các công cụ tìm kiếm không đọc được nội dung trong flash.

  8. Đặt link về các trang tác giả, trang phân tích có tính uy tính cao. Điều này sẽ giúp cho bài viết của bạn có tính thuyết phục và độ tin tưởng cao.

  9. Cập nhật thông tin thường xuyên trên website của bạn. Điều này quan trọng nhất nó sẽ giúp cho bạn lôi cuốn được người đọc ghé thăm và nên nhớ nội dung nên tập trung vào các xu hướng hiện tại và phải liên quan đến chủ đề của website.

Kết luận:

Trên đây là một số kiến thức tôi muốn chia sẻ với mọi nguời về SEO. Bài viết này chỉ giới thiệu những kỹ thuật cơ bản nhất của SEO, hy vọng rằng nó sẽ là một bài viết hữu ích cho những ai đó đang muốn bắt đầu tìm hiểu về SEO. Cảm ơn các bạn đã quan tâm tới bài viết của tôi !.

Tham khảo:

Hạn chế độ dài của url tốt nhất cho seo chỉ là 3 cấp tính từ tên domain ().

domain.com/cap1/cap2/cap3
http://seocam.edu.vn/onpage-code-chuan-seo-la-gi/
https://thietkewebchuanseo.com/
SEO
code