✍️
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
  • Tìm hiểu Về SEO - Phần I
  • SEO là gì?
  • SEO để làm gì?

Was this helpful?

Trang check SEO OKE

https://varvy.com/

Previous10 CSS3 Animation Tools phổ biếnNextLàm sao để SEO từ khóa?

Last updated 5 years ago

Was this helpful?

Tìm hiểu Về SEO - Phần I

SEO là gì?

Search engine optimization (SEO) - Tối ưu hoá máy tìm kiếm để làm tăng thứ hạng của một website hoặc webpage trong những kết quả hiển thị tự nhiên của máy tìm kiếm. Nói một cách khác đó là việc bạn thay đổi thiết kế cấu trúc cũng như nội dung trang web, các vấn đề liên quan đến trang web để khi người dùng tìm kiếm bằng các bộ máy tìm kiếm như google, bing … trang web của bạn sẽ xuất hiện ở những vị trí cao hơn.

SEO để làm gì?

Bạn có thể hình dung một website nếu được hiện ở các vị trí trên cùng của trang đầu tiên khi bạn tìm kiếm với một từ khóa nào đó đồng nghĩa nó nhận được nhiều sự chú ý hơn từ người tìm kiếm từ đó sẽ chiếm được lượng khách hàng truy cập vào website và nâng cao hiệu quả trong kinh doanh hay nhiều mục đích khác.

SEO = Off site (off page) + On site (on page)`

seo.png

Trong phần này mình sẽ giới thiệu với các bạn nội dung cơ bản về SEO On Site

SEO On Site là gì?

  • Là việc thay đổi cấu trúc site như title, description, keywords ….

  • Tối ưu tổng thể website.

  • Dễ dàng cho Google “đọc”.

  • Thân thiện với “khách hàng.

Các yếu tố ảnh hưởng đến SEO On Site

  • Domain, URL

    • Độ dài tên miền.

    • Tên miền chứa từ khóa

    • Tên miền .vn, .com.vn, .edu..., .org... có độ tin tưởng cao hơn.

    • ...

  • Cấu trúc Website

  • Navigation

  • META

  • Robots

  • Cấu trúc HTML

  • Sitemap:

  • Social: Giúp tăng độ phổ biến cho website của bạn.

  • Speed: Tốc độ tải trang nhanh sẽ được các bộ máy tìm kiếm đánh giá cao.

  • Image: Thuộc tính alt giúp con boot tìm kiếm biết được ảnh của bạn chứa nội dung gì.

** TAG **

1. Meta Tag

  • Là thẻ dùng để cung cấp các thông tin về website một cách tóm gọn đối với các trình duyệt lẫn người dùng hay bot từ các search engine. (Meta Keywords, Meta Description, Meta Page title => Meta tags)

  • Bot sẽ dựa vào Meta name và Meta robots để quyết định các thu thập cho website đó.

  • Các 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. META này xác định xem một trang cụ thể nên được lập chỉ mục và có các liên kết đi nên được theo hay không.

2. Title tags

  • Là 1 thành phần rất quan trọng trong việc SEO cho trang web nhưng lại không được developer chú ý vì nó không ảnh hưởng tới nội dung trang web cũng như việc hiển thị.

  • Title tags chính là phần sẽ hiển thị đại diện cho trang web trên trang kết quả tìm kiếm (SERP).

3. Description tags

  • Cũng giống như titlte tags, description tag là một thành phần rất quan trọng của trang web trong việc SEO. Nhưng lại thường hay bị developer bỏ mặc.

  • Nguyên nhân chính vì description không thể hiện ở bất kỳ chỗ nào trên trang web, thâm chí ngay cả ở trình duyệt (title thường được hiển thị ở phía trên cùng các tab của trình duyệt).

** Cấu trúc HTML Website **

  • HEAD: Quyết định bởi thẻ Meta title, meta escriptions, Meta robots, scripts, CSS, Meta Geo, Language…

  • 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%.

<TITLE>
Nên ghi tiêu đề là có liên quan đến từ khoá quan trọng để Search engines dễ sắp xếp lên cao, không quá 65 ký tự ( Từ khóa chính đứng đầu, lặp không quá 2 lần )
</TITLE>
<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 (Không còn áp dụng với Google)">
<META name="Description" content=" Mô tả của website hay nội dung website, 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. ( Từ khóa đứng đầu, lặp không quá 3 lần">
  • 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.

    • Tên ảnh chứa từ khóa

    • Đường dẫn ảnh chứa từ khóa

    • Title

    • Alt ( Quan trọng )

    • Caption

** Lưu ý: **

  • Duy nhất 1 H1 cho mỗi Page ( Tiêu đề ).

  • H2 cho đề mục lớn.

  • H3 cho đề mục nhỏ hơn.

  • Không nhất thiết phải sử dụng hết 6 thẻ heading. 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. Không để font như nhau !

Trong phần tiếp theo mình sẽ nói về SEO Content - Tôn chỉ của SEO.

meta.png

SEO
Search Engine Optimization
Mô tả ảnh