Như đã hứa từ trước thì hôm nay khi đã thi xong môn cuối, mình viết bài này để giúp cho những bloggers mới lưu ý những việc cần làm khi mới tạo blog cũng như cách khắc phục khi có gì đó trục trặc về vấn đề SEO. Và khi muốn biết một Template được thiết kế chuẩn SEO hay chưa bạn hãy theo dõi bài viết dưới đây của mình nhé. Bài viết được mình viết theo ý hiểu của bản thân và sẽ không thể đầy đủ tất cả được nhưng mình nghĩ sẽ có cái áp dụng được. Giờ thì đi sâu vào bài viết hơn nha.
Những việc cần làm khi lập blog mới:
Những điều lưu ý khi đã có blog cho riêng mình:
Về tốc độ tải trang:
Về SEO (các phần còn lại): Có nhiều web check seo nhưng mình sẽ dùng trang top 1 tìm kiếm là https://www.seotesteronline.com/en. Hãy truy cập website đó, dán url blog bạn vào khung và click icon tìm kiếm (màu xanh lá) bên cạnh hoặc ấn Enter để bắt đầu quá trình phân tích.
Có 4 tab con bao gồm: Base (cơ bản, tổng quan), Contents (nội dung), Performance (kiểu như điểm trên PageSpeed Insights mình đề cập phần trên) và Social (tương tác, chia sẻ lên mạng xã hội). Ở đây mình sẽ chỉ phân tích 1 vài điểm thôi nhé, còn lại các bạn hãy tự nghiên cứu sâu hơn và khắc phục vì viết hết ra thì nó dài lắm và có 1 số mục mình cũng chưa khắc phục được nên không chia sẻ được)
Kết luận:
1. Thiết lập mô tả, cài đặt bài đăng, nhận xét, tùy chọn tìm kiếm... Các bạn có thể tham khảo bài Các bước cần làm ngay sau khi tạo một Blogspot mới.
1. Lỗi hiển thị bài viết (tức chỉnh 10 bài nhưng chỉ hiện ít hơn 10 bài): có 2 nguyên nhân chính là "chưa dùng ngắt trang" khi viết bài (cái này đa phần gặp phải) và không chỉnh trùng khớp số bài trong Js phân trang với Main Blog trong bố cục. Vậy nên hãy dùng "dấu ngắt trang" ngay sau hình ảnh đầu tiên hoặc 4,5 dòng nội dung đầu bài viết nhé.
2. Tối ưu link bài viết: khi bạn viết bài mới, nếu trong tiêu đề bài viết có phụ âm như Đ chẳng hạn thì link bài viết đó sẽ tự động bỏ chữ Đ đó đi, trông sẽ rất không chuyên nghiệp.
Ví dụ: "Cách đóng cửa blog" thì link sẽ là .../cach-ong-cua-blog.html
Khắc phục: Trước khi đăng bài click mục Liên kết cố định, chọn Liên kết cố định tùy chỉnh và gõ lại link theo đúng tiêu đề sao cho hợp lí (không dấu, ngăn cách bằng dấu "-" giữa mỗi từ)
3. Về việc gọi là chuẩn SEO và cách khắc phục (phần này mới là mục chính mình muốn viết)
- Những blog như nào mới được gọi là chuẩn SEO và làm thế nào để chuẩn SEO thì chắc hẳn các bạn đã tìm hiểu đâu đó trên mạng rồi nên mình không trích dẫn nguyên văn dài dòng làm gì nữa. (có thể tham khảo bài viết này)
- SEO ở đây sẽ bao gồm cả tốc độ tải trang được tính điểm theo Pagespeed Insights (của Google). Vì vậy mình sẽ phân tích cả 2 theo mấy điểm chính chính thôi nha.
- Các bạn hãy truy cập Pagespeed Insights và gõ URL Blog bạn vào và chọn Phân tích.
- Khi phân tích xong, sẽ hiện ra 4 chỉ mục quan trọng sau:
+ Tối ưu hóa hình ảnh
+ Loại bỏ JavaScript và CSS chặn hiển thị trong nội dung trong màn hình đầu tiên
+ Nâng cao lưu vào bộ nhớ cache trong trình duyệt
+ Giảm bớt HTML
+ Các chỉ mục nhỏ khác.
Hướng dẫn khắc phục:
+ Tối ưu hóa hình ảnh: hãy chắc chắn rằng bất kì hình ảnh nào được tải lên blog của bạn (dù là trong bài viết hay phục vụ làm template) thì đều phải nén trước đó. Có nhiều trang nén ảnh, bạn có thể sử dụng http://optimizilla.com/vi/.
+ Loại bỏ Js, Css chặn hiển thị: Nó sẽ bao gồm JS, CSS thêm vào cũng như JS, CSS mặc định (có sẵn) trong blog.
- Để loại bỏ JS, CSS thêm vào thì bạn có thể tham khảo bài này mình đã backup lại data từ blog cũ của mình tại đây.
- Để loại bỏ JS, CSS mặc định của blogspot thì bạn search Google ra rất nhiều bài hướng dẫn, họ sẽ thay thế (mã hóa) các thẻ <head>, <body>... trong template của bạn. Bạn có thể tham khảo tại đây.
+ Cache: phần này trong temp mình cũng có code rồi nhưng mình nghĩ bạn nên tham khảo bài viết này của Niệm Style Blog sẽ chi tiết hơn (và lưu ý hiện tại mới chỉ áp dụng cho các domain riêng, không phải domain mặc định blogspot.com, mấy domain reg free như .tk, .ml ... thì mình không rõ, bạn hoàn toàn có thể test)
+ Giảm bớt HTML: phần này ý nói mình hạn chế sử dụng Javascript các thứ đó và JS, CSS cần được nén lại để đỡ byte đi. Bạn có thể hiểu đơn giản là khi nén nó sẽ tốn ít số dòng cần sử dụng ấy.
- Để nén CSS có thể xài: https://css.github.io/csso/csso.html
- Để nén JS có thể xài: https://vi.piliapp.com/minify/yui-compressor/
Sau khi xong sẽ ra kết quả như sau (đây là ví dụ điểm SEO hiện tại của blog mình, chưa cao lắm nhưng tạm ổn vì có màu xanh lá cây rồi)
Có 4 tab con bao gồm: Base (cơ bản, tổng quan), Contents (nội dung), Performance (kiểu như điểm trên PageSpeed Insights mình đề cập phần trên) và Social (tương tác, chia sẻ lên mạng xã hội). Ở đây mình sẽ chỉ phân tích 1 vài điểm thôi nhé, còn lại các bạn hãy tự nghiên cứu sâu hơn và khắc phục vì viết hết ra thì nó dài lắm và có 1 số mục mình cũng chưa khắc phục được nên không chia sẻ được)
- Base: Phần Description (mô tả): cái này nó sẽ lấy từ phần Mô tả trong Thẻ meta của Tùy chọn tìm kiếm đấy. Lỗi là mô tả quá ngắn nhưng giới hạn kí tự mục đó thì blogspot chỉ cho tối đa 150 kí tự thôi nên mình không thỏa mãn được yêu cầu của nó rồi.
- Contents:
+ Text/Code Ratio: hiểu nôm na là số lượng text được lấy ra và hiển thị so sánh với toàn bộ mã HTML trả về và càng nhiều Javascript thì chỉ số này sẽ càng nhỏ (xem thêm tại đây). Vì vậy khi thiết kế template, bạn nên hạn chế dùng quá nhiều Js nhé, nếu cái nào làm được bằng CSS+HTML thì cứ làm, ví dụ những cái dropdown đơn giản cũng có thể hoàn toàn làm bằng CSS được.
+ Alt on image: thuộc tính Alt trong hình ảnh. Mọi người rất hay bỏ qua phần này, Google sẽ index và tìm kiếm bài viết dựa trên Alt và Title cũng như tiêu đề, nội dung bài viết. Vì thế mà 2 thuộc tính kia rất quan trọng trong SEO.
Cách khắc phục: Khi thêm 1 hình ảnh nào đó trong template lẫn bài viết bạn nên có 2 thuộc tính trên.
Ví dụ: <img src='link ảnh' alt='từ mô tả' title='từ mô tả'/>. Hình ảnh trong bài viết muốn chèn alt và title thì click vào ảnh và chọn Thuộc tính, sau đó nhập nội dung vào 2 hàng.
+ Title on tag a: thuộc tính title trong các liên kết <a href='link liên kết'>từ khóa</a>
Cách khắc phục: cũng tương tự hình ảnh nhưng ta không thêm alt mà thêm title như sau:
<a href='link liên kết' title='từ mô tả'>từ khóa</a>
- Social: mình sẽ đi luôn đến cách khắc phục, web này check phần Open Graph bị lỗi đấy, thực ra là mình có thêm rồi, check ở web khác nó sẽ hiện ok phần này thôi. Rất đơn giản chỉ cần chèn các thẻ meta social sau thẻ <head> trong template là được. Lấy ví dụ như của mình (hãy thay nội dung và link ảnh phù hợp blog bạn)
<!-- Open Graph Meta Tags BEGIN -->
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType == "static_page"'>
<meta expr:content='data:blog.pageName' property='og:title'/>
<meta content='article' property='og:type'/>
<b:else/>
<meta expr:content='data:blog.pageTitle' property='og:title'/>
<meta content='blog' property='og:type'/>
</b:if>
<b:else/>
<meta expr:content='data:blog.pageName' property='og:title'/>
<meta content='article' property='og:type'/>
</b:if>
<meta expr:content='data:blog.canonicalUrl' property='og:url'/>
<meta expr:content='data:blog.title' property='og:site_name'/>
<b:if cond='data:blog.postImageThumbnailUrl'>
<meta expr:content='data:blog.postImageUrl' property='og:image'/>
<b:else/>
<meta content='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBWNxSEPSkMZheR2WuiOceKivfvjElq_T2VsQTrdzcsvTuF9N_5EfnWqeIaAXNycwPYg_Wlg25zHfgi-RzJ9jTZ7KHp6l1pyidljvIUs2EnxXqZZm-knPZZ3QVxhn4LhZuiLehyDWaEV96/s1600/25552305_149042982484664_1128561249070202727_n-min.png' property='og:image'/>
</b:if>
<b:if cond='data:blog.metaDescription != ""'>
<meta expr:content='data:blog.metaDescription' name='og:description'/>
</b:if>
<meta content='vi_VN' property='og:locale'/>
<meta content='en_US' property='og:locale:alternate'/>
<meta content='135777050477924' property='fb:app_id'/>
<meta content='100005497932470' property='fb:admins'/>
<!-- Open Graph Meta Tags END -->
<!-- Twitter Cards -->
<meta content='summary' name='twitter:card'/>
<meta content='@tsmkevin815' name='twitter:site'/>
<meta content='@tsmkevin815' name='twitter:creator'/>
<b:if cond='data:blog.pageType == "item"'>
<meta expr:content='data:blog.url' name='twitter:url'/>
<meta expr:content='data:blog.pageName' name='twitter:title'/>
<meta expr:content='data:blog.metaDescription' name='twitter:description'/>
<b:else/>
<meta expr:content='data:blog.homepageUrl' name='twitter:url'/>
<meta expr:content='data:blog.metaDescription' name='twitter:description'/>
</b:if>
<b:if cond='data:blog.postImageThumbnailUrl'>
<meta expr:content='data:blog.postImageThumbnailUrl' name='twitter:image'/>
<meta expr:content='data:blog.title' name='twitter:title'/>
<b:else/>
<meta content='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBWNxSEPSkMZheR2WuiOceKivfvjElq_T2VsQTrdzcsvTuF9N_5EfnWqeIaAXNycwPYg_Wlg25zHfgi-RzJ9jTZ7KHp6l1pyidljvIUs2EnxXqZZm-knPZZ3QVxhn4LhZuiLehyDWaEV96/s1600/25552305_149042982484664_1128561249070202727_n-min.png' name='twitter:image'/>
<meta expr:content='data:blog.title' name='twitter:title'/>
</b:if>
Ok. Vậy là mình vừa nói tổng quan những điều lưu ý khi làm blog tới các bạn. Thực ra sẽ còn nhiều cái nữa nhưng mình chỉ viết được đến đây thôi, viết nữa thì dài quá, lan man và mọi người sợ ngán, không làm được hết. Nên hãy khắc phục dần dần từ những cái quan trọng này trước đã nhé. Sau thì sẽ củng cố và hoàn thành hơn. Có bất kì điều gì băn khoăn hay bình luận phía dưới nhé. Chúc các bạn ngủ ngon :D
![[MiniEvent] Nhận bộ Template độc quyền và tài liệu SEO từ Phú Cường Blogger](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiotOlQ53Ww__x5S0T29FPXGdgPC1dSef3JONFrA6JkpXgAqB5pGaJxItTSkvCrqss42R0AJDQotOkwpkob4EobCdAYlV1zH4A_-oXwtAA_VlQKpH-D_YFYQJ_68RHDfLUZEEq5paPREjk/w72-h72-p-k-no-nu/event-blogspot-by-phucuongblogger.png "[MiniEvent] Nhận bộ Template độc quyền và tài liệu SEO từ Phú Cường Blogger")
