Hướng dẫn tạo sitemap cho Blogspot

Tệp sitemap XML giống như thư mục của tất cả các trang tồn tại trên trang web hoặc blog của bạn. Các công cụ tìm kiếm như Google và Bing có thể sử dụng các tệp sơ đồ trang web này để khám phá các trang trên trang web của bạn mà các chương trình tìm kiếm có thể đã bỏ lỡ trong thời gian thu thập dữ liệu thông thường.

Vấn đề với Sitemap Blogger:

Một tệp sơ đồ (sitemap) trang web hoàn chỉnh nên đề cập đến tất cả các trang của trang web nhưng đó không phải là trường hợp nếu blog của bạn được lưu trữ trên Blogger.

Sitemap XML mặc định của bất kỳ blog Blogger nào sẽ chỉ có 26 bài đăng trên blogspot gần đây nhất. Đó là một giới hạn và một số trang cũ trên blog của bạn bị thiếu trong sitemap XML mặc định có thể không bao giờ được lập chỉ mục trong các công cụ tìm kiếm. Tuy nhiên có một giải pháp đơn giản để khắc phục sự cố này.

Tạo sitemap hoàn chỉnh chuẩn seo cho Blogspot:

Cách này có tác dụng đối với tất cả các bạn dùng địa chỉ tên miền là sub domain từ Blogspot.com hoặc một số bạn dùng tên miền riêng trỏ về như mình mua domain LuuAnh.com chẳng hạn.

Dưới đây là những gì bạn cần làm để tạo sơ đồ cấu trúc trang web sitemap XML hoàn chỉnh, chuẩn SEO với các công cụ tìm kiếm cho trang web blogspot:

Bước 1: tạo sơ đồ trang web blogspot:

Các bạn truy cập vào địa chỉ tại đây rồi dán địa chỉ trang blogspot vào ô trống, sau đó chọn Generate Sitemap như hình ảnh dưới.

Bước 2: Sao chép toàn bộ đoạn mã được tạo ra:

Sau khi ấn tạo sơ đồ trang web các bạn sẽ nhận được đoạn mã có dạng như sau:

# Blogger Sitemap generated on 2017.05.12
User-agent: *
Disallow: /search
Allow: /
Sitemap: http://www.luuanh.com/atom.xml?redirect=false&start-index=1&max-results=500

Bước 3: Khai báo sitemap blogspot qua file robots.txt:

Các bạn truy cập vào trang quản trị Blogger rồi đến Cài đặt => Tùy chọn tìm kiếm => Robots.txt tùy chỉnh. Tại đây các bạn dán đoạn mã vừa được tạo thành vào ô trống rồi lưu lại như hình ảnh dưới

Đến đây, các bạn đã khai báo thành công sơ đồ trang website cho các công cụ tìm kiếm thông qua tệp robots.txt mà không cần ping chúng bằng tay nữa.

Đối với các blog có nhiều hơn 500 bài các bạn tiến hành bổ sung thêm đoạn mã sau đây nữa:

Sitemap: http://www.luuanh.com/atom.xml?redirect=false&start-index=1&max-results=500            Sitemap: http://www.luuanh.com/atom.xml?redirect=false&start-index=501&max-results=500          Sitemap: http://www.luuanh.com/atom.xml?redirect=false&start-index=1001&max-results=500         Sitemap: http://www.luuanh.com/atom.xml?redirect=false&start-index=1501&max-results=500         Sitemap: http://www.luuanh.com/atom.xml?redirect=false&start-index=2001&max-results=500         Sitemap: http://www.luuanh.com/atom.xml?redirect=false&start-index=2501&max-results=500         Sitemap: http://www.luuanh.com/atom.xml?redirect=false&start-index=3001&max-results=500

Bước 4: Khai báo sơ đồ trang web blogspot lên webmaster tool:

Các bạn truy cập vào trang quản trị webmaster tool của Google rồi đến Thu thập dữ liệu => Sơ đồ trang web và chọn Thêm/kiểm tra sơ đồ trang web. Tại đây các bạn dán đoạn mã dưới đây vào chọn gửi rồi yêu cầu lập chỉ mục.

 atom.xml?redirect=false&start-index=1&max-results=500                                         

Các bạn chọn tiếp "Tìm nạp như Google" rồi thêm đoạn mã trên vào và chọn gửi.

Đến đây, Google đã nhận được sơ đồ trang web của bạn và bắt đầu lập chỉ mục cho các trang trên website của bạn.

Nếu bạn có chuyển từ Blogger sang WordPress thì sơ đồ trang web XML của Blogspot cũ đã gửi của bạn vẫn có ý nghĩa  vì nó sẽ giúp các công cụ tìm kiếm khám phá các bài viết và trang WordPress mới của bạn.

Copy bài viết vui lòng ghi nguồn LuuAnh.com
Link bài viết: Hướng dẫn tạo sitemap cho Blogspot

Hướng dẫn cách tạo thumbnail chuẩn cho blogspot

Nhân dịp sự vụ vừa rồi Google có thay đổi làm mờ Thumbnail, sau đó lại khôi phục như cũ, tôi có đọc được bài viết cách tạo thumbnail chuẩn cho Blogspot nên đăng chia sẻ lại cho anh em cùng tìm hiểu.

Trong Blogspot (Blogger) thì chúng ta sử dụng mã như sau:

<meta expr:content='data:blog.postImageThumbnailUrl' property='og:image'/>

Và Facebook Bot sẽ thu được kết quả giống như này:

<meta property="og:image" content="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVDh9dfszHdrml8wtTc98LPpX_oH2LRqxO0ENbyeqK3rDSrnKlNpo0y8iSE2Gg9CD-_CC81CK_Vg_e3xQxWnh-h0Fw_zBcr0ygL6Olj4q5iubSHRYD-PcyPFDLFeJx8m958UfLaN1OPxhg/s72-c/get-free-xyz-domain.png" /> 

Vấn đề ở đây là ảnh thumbnail do Blogspot tạo tự động luôn được resize về kích cỡ 72x72, trong khi kích cỡ thumbnail chuẩn của Facebook khuyến cáo là 600x315.

Sau khi tìm kiếm, tôi nhận ra có vẻ ngay cả Google và StackOverflow cũng chưa có câu trả lời cho vấn đề này. Do đó, tôi quyết định tự trả lời câu hỏi này.

Phân tích cấu trúc link ảnh của Blogspot

Vì dùng Blogger đã lâu, tôi phát hiện ra một điều khá thú vị trong một lần xem mã nguồn một template blogspot được chia sẻ trên mạng. Đó là các liên kết hình ảnh trong Blogspot có thể resize được bằng cách thay đổi vài kí tự trong URL.

Cụ thể, với URL trong đoạn mã trên:

http://1.bp.blogspot.com/-t5-HTAnnThU/Vicp0SSNPeI/AAAAAAAACZw/9lbrjwRY64A/s72-c/get-free-xyz-domain.png 

Chú ý những ký tự sau: s72-c

Các bạn có nhớ tôi đã nói ở trên là thumbnail trong Blogspot được resize về cỡ 72x72 không? Ta có thể nhận ra mấy kí tự này có liên quan gì đó. Thử thay thành s200-c thì thấy:

Nó đã to lên đúng không? Như vậy s200 tương đương với width=200px; height=200px. Nhưng như thế thì ta chỉnh kiểu gì cũng chỉ nhận được ảnh vuông??

Không sao, sau khi vọc vạch thêm chút thì tôi phát hiện ra điều thú vị tiếp theo trong cấu trúc ảnh của blogspot - ta có thể resize kích cỡ bất kỳ bằng cách sử dụng định dạng: wXXX-hYYY-c

Trong đó: XXX là chiều dài, YYY là chiều rộng. Tính theo đơn vị Pixel (px).

Như vậy, để có kích cỡ chuẩn của thumbnail khi chia sẻ lên Facebook. Ta sẽ sử dụng: w600-h315-c

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVDh9dfszHdrml8wtTc98LPpX_oH2LRqxO0ENbyeqK3rDSrnKlNpo0y8iSE2Gg9CD-_CC81CK_Vg_e3xQxWnh-h0Fw_zBcr0ygL6Olj4q5iubSHRYD-PcyPFDLFeJx8m958UfLaN1OPxhg/w600-c-h315/get-free-xyz-domain.png 

Tạo thumbnail chuẩn cho Blogger

Với những gì ta đã biết ở trên thì áp dụng vào Blogspot như nào? Blogspot sử dụng biến data:blog.postImageThumbnailUrl để tự động lấy ra thumbnail từ ảnh đầu tiên trong bài viết. Chúng ta cũng không thể sử dụng JavaScript để replace các ký tự để tạo link ảnh chuẩn.

Nhưng ta có thể tùy chỉnh các ký tự bổ sung bằng cách:

<meta expr:content='"XXX" + data:blog.postImageThumbnailUrl' property='og:image'/> 

Sau khi render ra HTML sẽ có dạng:

<meta property="og:image" content="XXXhttps://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVDh9dfszHdrml8wtTc98LPpX_oH2LRqxO0ENbyeqK3rDSrnKlNpo0y8iSE2Gg9CD-_CC81CK_Vg_e3xQxWnh-h0Fw_zBcr0ygL6Olj4q5iubSHRYD-PcyPFDLFeJx8m958UfLaN1OPxhg/s72-c/get-free-xyz-domain.png" /> 

Các bạn có chú ý thấy XXX nằm trước URL không? OK, vậy ta có thể tạo ra một proxy URL như:

http://www.example.com/proxy.php?img=[Thumbnail_URL]

Nói tới đây chắc các bạn đã đoán ra tôi định làm gì rồi đúng không? Việc replace ký tự trong URL thì quá đơn giản:

<?php

if (isset($_GET['img']) && filter_var($_GET['img'], FILTER_VALIDATE_URL)) {

    $img = $_GET['img'];

    if (strpos($img, '/s72-c/') !== FALSE) {

        $img = str_replace('/s72-c/', '/w600-h315-c/', $img);

        header("Location: {$img}");

    }

}

exit;

Và code để nhúng trong template hiện tại của tôi có dạng như sau:

<meta expr:content='"http://junookyo.freevnn.com/?img=" + data:blog.postImageThumbnailUrl' property='og:image'/> 

Đoạn mã này có thể áp dụng cho mọi blog nên bạn có thể sử dụng thoải mái nhé!

Xóa bản quyền Template của Arlina Design Arlinadzgn

- Hôm nay, tôi xin giới thiệu đến các bạn cách Xóa bản quyền Template của Arlina Design Arlinadzgn  - Delete copyright Template by Arlina Design Arlinadzgn!

Blogspot được rất nhiều anh em seoer sử dụng làm blog vệ tinh do những tính năng rất tốt của nó như miễn phí hoàn toàn, được tùy chỉnh Template theo ý muốn,... Giao diện template có sẵn do Google cung cấp thường rất xấu, gần như tất cả anh em đều sử dụng template do bên ngoài thiết kế, đẹp nhất, chuẩn seo nhất chắc chắn không thể không kể đến Arlinadzgn (một nhà thiết kế giao diện template Blogspot số 1 thế giới ). Giá template do Arlinadzgn bán không cao lắm nhưng đối với anh em seo nhiều người không có điều kiện như tôi chẳng hạn, việc chi tiêu khá hạn hẹp, chúng ta thường muốn dùng miễn phí nhưng template thường bị để bản quyền cho backlink về trang chủ của người thiết kế, gây sự khó chịu cho SEOer chúng ta, nó gây ảnh hưởng đến chất lượng backlink về site chính!

Khi xóa backlink của nhà thiết kế, Blogspot của chúng ta sẽ tự động chuyển về trang chủ của họ, đây là do code template đã bị mã hóa chuyển hướng!

Tôi xin đưa ra 1 ví dụ cụ thể khi viết bài này đó là template N Light của Arlinadzgn, demo tại đây khi các bạn vào xem code sẽ có đoạn code được mã hóa có dạng sau:

["\x3C","\x73\x70\x6C\x69\x74","\x6C\x65\x6E\x67\x74\x68","\x3E","\x69\x6E\x64\x65\x78\x4F\x66","\x73\x75\x62\x73\x74\x72\x69\x6E\x67","","\x6A\x6F\x69\x6E","\x72\x61\x6E\x64\x6F\x6D","\x66\x6C\x6F\x6F\x72","\x65\x6E\x74\x72\x79","\x66\x65\x65\x64","\x74\x65\x72\x6D","\x63\x61\x74\x65\x67\x6F\x72\x79","\x24\x74","\x74\x69\x74\x6C\x65","\x6C\x69\x6E\x6B","\x61\x6C\x74\x65\x72\x6E\x61\x74\x65","\x72\x65\x6C","\x68\x72\x65\x66","\x72\x65\x70\x6C\x69\x65\x73","\x74\x65\x78\x74\x2F\x68\x74\x6D\x6C","\x74\x79\x70\x65","\x20","\x63\x6F\x6E\x74\x65\x6E\x74","\x73\x75\x6D\x6D\x61\x72\x79","\x70\x75\x62\x6C\x69\x73\x68\x65\x64","\x3C\x69\x6D\x67","\x73\x72\x63\x3D\x22","\x22","\x73\x75\x62\x73\x74\x72","\x4A\x61\x6E","\x46\x65\x62","\x4D\x61\x72","\x41\x70\x72","\x4D\x61\x79","\x4A\x75\x6E","\x4A\x75\x6C","\x41\x75\x67","\x53\x65\x70","\x4F\x63\x74","\x4E\x6F\x76","\x44\x65\x63","\x2D","\x3C\x64\x69\x76\x20\x63\x6C\x61\x73\x73\x3D\x22\x6D\x61\x69\x6E\x2D\x70\x6F\x73\x74\x20\x63\x6F\x6C\x2D\x70\x6F\x73\x74\x22\x3E\x3C\x61\x20\x68\x72\x65\x66\x3D\x22","\x22\x3E\x3C\x73\x70\x61\x6E\x20\x63\x6C\x61\x73\x73\x3D\x22\x62\x6C\x75\x65\x22\x3E","\x3C\x2F\x73\x70\x61\x6E\x3E\x3C\x69\x6D\x67\x20\x73\x72\x63\x3D\x22","\x22\x20\x61\x6C\x74\x3D\x22\x22\x3E\x3C\x2F\x69\x6D\x67\x3E\x3C\x2F\x61\x3E\x3C\x68\x65\x61\x64\x65\x72\x3E\x3C\x68\x33\x20\x63\x6C\x61\x73\x73\x3D\x22\x65\x6E\x74\x72\x79\x2D\x74\x69\x74\x6C\x65\x22\x3E\x3C\x61\x20\x68\x72\x65\x66\x3D\x22","\x22\x20\x74\x69\x74\x6C\x65\x3D\x22\x22\x3E","\x3C\x2F\x61\x3E\x3C\x2F\x68\x33\x3E\x3C\x2F\x68\x65\x61\x64\x65\x72\x3E\x3C\x2F\x64\x69\x76\x3E","\x77\x72\x69\x74\x65","\x3C\x64\x69\x76\x20\x63\x6C\x61\x73\x73\x3D\x22\x73\x65\x63\x6F\x6E\x64\x61\x72\x79\x2D\x70\x6F\x73\x74\x20\x63\x6F\x6C\x2D\x70\x6F\x73\x74\x22\x20\x73\x74\x79\x6C\x65\x3D\x22\x6D\x61\x72\x67\x69\x6E\x2D\x72\x69\x67\x68\x74\x3A\x30\x22\x3E\x3C\x73\x70\x61\x6E\x20\x63\x6C\x61\x73\x73\x3D\x22\x62\x6C\x75\x65\x22\x3E","\x3C\x2F\x73\x70\x61\x6E\x3E\x3C\x61\x20\x63\x6C\x61\x73\x73\x3D\x22\x68\x6F\x76\x65\x72\x5F\x70\x6C\x61\x79\x5F\x73\x6D\x61\x6C\x6C\x22\x20\x68\x72\x65\x66\x3D\x22","\x22\x3E\x3C\x69\x6D\x67\x20\x73\x72\x63\x3D\x22","\x22\x20\x68\x65\x69\x67\x68\x74\x3D\x22\x32\x30\x30\x22\x20\x77\x69\x64\x74\x68\x3D\x22\x33\x32\x30\x22\x3E\x3C\x2F\x69\x6D\x67\x3E\x3C\x2F\x61\x3E\x3C\x68\x65\x61\x64\x65\x72\x3E\x3C\x68\x34\x3E\x3C\x61\x20\x68\x72\x65\x66\x3D\x22","\x22\x3E","\x3C\x2F\x61\x3E\x3C\x2F\x68\x34\x3E\x3C\x2F\x68\x65\x61\x64\x65\x72\x3E\x3C\x2F\x64\x69\x76\x3E","\x68\x74\x74\x70\x3A\x2F\x2F\x73\x69\x74\x65\x73\x2E\x67\x6F\x6F\x67\x6C\x65\x2E\x63\x6F\x6D\x2F\x73\x69\x74\x65\x2F\x66\x64\x62\x6C\x6F\x67\x73\x69\x74\x65\x2F\x48\x6F\x6D\x65\x2F\x6E\x6F\x74\x68\x75\x6D\x62\x6E\x61\x69\x6C\x2E\x67\x69\x66","\x33","\x73\x63\x72\x65\x65\x6E\x20\x61\x6E\x64\x20\x28\x6D\x69\x6E\x2D\x77\x69\x64\x74\x68\x3A\x20\x36\x30\x65\x6D\x29","\x6D\x61\x74\x63\x68\x4D\x65\x64\x69\x61","\x6D\x61\x74\x63\x68\x65\x73","\x6F\x6E\x6C\x6F\x61\x64","\x6C\x69\x67\x68\x74\x63\x72\x65\x64\x69\x74","\x67\x65\x74\x45\x6C\x65\x6D\x65\x6E\x74\x42\x79\x49\x64","\x6C\x6F\x63\x61\x74\x69\x6F\x6E","\x68\x74\x74\x70\x3A\x2F\x2F\x77\x77\x77\x2E\x61\x72\x6C\x69\x6E\x61\x64\x7A\x67\x6E\x2E\x63\x6F\x6D","\x73\x65\x74\x41\x74\x74\x72\x69\x62\x75\x74\x65","\x6E\x6F\x66\x6F\x6C\x6C\x6F\x77","\x69\x6E\x6E\x65\x72\x48\x54\x4D\x4C","\x3C\x61\x20\x68\x72\x65\x66\x3D\x27\x68\x74\x74\x70\x3A\x2F\x2F\x77\x77\x77\x2E\x61\x72\x6C\x69\x6E\x61\x64\x7A\x67\x6E\x2E\x63\x6F\x6D\x2F\x27\x20\x74\x61\x72\x67\x65\x74\x3D\x27\x5F\x62\x6C\x61\x6E\x6B\x27\x20\x74\x69\x74\x6C\x65\x3D\x27\x44\x65\x73\x69\x67\x6E\x65\x64\x20\x62\x79\x20\x41\x72\x6C\x69\x6E\x61\x20\x44\x65\x73\x69\x67\x6E\x27\x3E\x41\x72\x6C\x69\x6E\x61\x20\x44\x65\x73\x6

Đây chính là nơi Arlinadzgn để bản quyền chuyển hướng về trang chủ của họ và công việc của chúng ta là gỡ bỏ nó.
Công việc đầu tiên chúng ta cần biết liên kết họ để bản quyền lên code, ví dụ Arlinadzgn là http://www.arlinadzgn.com. Các bạn copy nguyên đoạn code mã hóa dạng như trên và vào liên kết http://ddecode.com/hexdecoder/ dán đoạn code mã hóa hex vào ô mẫu và chọn Decode các bạn sẽ nhận được đoạn code ban đầu chưa bị mã hóa như hình ảnh dưới

Nhìn vào kết quả của Decoded results các bạn sẽ thấy thẻ a href đặt backlink bản quyền, các bạn copy đường link dẫn http://www.arlinadzgn.com/ và truy cập vào liên kết sau đây http://www.convertstring.com/vi/EncodeDecode/HexEncode dán vào ô trống rồi chọn Hexcode các bạn sẽ nhận được đoạn code mã hóa văn bản của các bạn như hình dưới.

Các bạn thêm ký tự \x vào xen giữa 2 ký tự cạnh nhau của đoạn code như đoạn mẫu dưới đây (mã hex của đoạn url http://www.arlinadzgn.com/ ):

• \x68\x74\x74\x70\x3A\x2F\x2F\x77\x77\x77\x2E\x61\x72\x6C\x69\x6E\x61\x64\x7A\x67\x6E\x2E\x63\x6F\x6D

Sau đó các bạn mã hóa hex url trang chủ blog của các bạn cũng sử dụng công cụ mã hóa trên rồi thêm tiếp ký tự \x vào như trên.
Tiếp theo các bạn quay trở về phần mẫu template của các bạn, tìm kiếm đúng đoạn code mã hóa bản quyền của link trang chủ nhà thiết kế, thay toàn bộ thành đoạn code mã hóa hex trang chủ của các bạn rồi lưu lại.
Nếu các bạn muốn xóa bản quyền của Template Arlinadzgn thì chỉ việc copy luôn đoạn code mã hóa hex trên của mình và tìm kiếm trong mẫu của các bạn luôn, sau đó thay thế bằng mã hex trang chủ các bạn là xong.
Chúc các bạn thành công và có template đẹp như ý muốn, không bị để bản quyền!

Cách tạo nút lên đầu trang cho Blogspot - Back to top Blogspot

Tạo nút lên đầu trang cho Blogspot hay còn gọi là Back to top rất cần thiết nếu trang web, blog của bạn chia sẻ có bài viết dài, có tác dụng giúp người dùng trở lên Menu dễ dàng và nhanh chóng qua một cái click.

Có rất nhiều cách tạo nút lên đầu trang cho blogspot tuy nhiên vấn đề chúng ta cần quan tâm khi thêm một tiện ích mới lên website đó là:

1.  Tùy biến được hình ảnh của nút lên đầu trang.
2.  Đảm bảo được yêu cầu không ảnh hưởng đến SEO đó là tốc độ tải trang. Nếu code quá dài, rườm rà sẽ làm nặng Blogspot và tốc độ tải sẽ chậm lại gây ảnh hưởng xấu đến cảm nhận của người dùng.
3.  Có hiệu ứng đẹp.
4.  Tiện ích back to top tương thích với cả điện thoại di động lẫn máy vi tính.

Hôm nay tôi xin giới thiệu đến các bạn 2 cách tạo back to top cho blogspot đơn giản mà không hề ảnh hưởng đến SEO, tốc độ tải trang của website, hiện cả trên phiên bản máy vi tính lẫn điện thoại di động như sau:

1.  Sử dụng CSS đơn giản để code, cách này cũng được chia sẻ trên khá nhiều Blog khác. Ưu điểm là nhanh chóng, chỉ với 1 đoạn code, không hề ảnh hưởng đến tốc độ website. Nhược điểm là icon luôn luôn hiện lên trên Blog. Các bạn sử dụng đoạn code dưới đây cho vào trước thẻ </Body> của Blogspot là được. <a style="display:scroll;position:fixed;bottom:5px;right:5px;" href="#" ><img alt='back to top' title="Back to Top" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3j9QF11h3cNVLsG7odJCwefjtctMsKQ8ALXH0hKyrsjIWjPRVwPe6q6h5uVctCCrpJ7p3-DHuxghQZ0I_nZOf-X-6ZkM6HAJ_KMjX45SzUTnNvuzdj_JQba5YgYDMCpiGIxSQlS7iSVE/s1600/luuanh.png"/></a>
2.  Sử dụng JavaScript: Cách này cần làm thêm một bước nữa so với cách trên nhưng cách trên nhưng cái hay là chỉ khi nào bạn di chuyển xuống dưới trang Blogspot biểu tượng Icon của nút lên đầu trang (back to top ) mới hiện lên. Đầu tiên các bạn sử dụng đoạn code dưới đây thêm vào trước thẻ </head> :  <script async='async' src='https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js' type='text/javascript'/> . Tiếp theo các bạn sử dụng đoạn code sau thêm vào trước thẻ </Body>: <script type='text/javascript'>$(function(){$(window).scroll(function(){if($(this).scrollTop()!=0){$("#noop-top").fadeIn()}else{$("#noop-top").fadeOut()}});$("#noop-top").click(function(){$("body,html").animate({scrollTop:0},800);return false})});</script><a id='noop-top' style='display: none; position: fixed; bottom: 5px; right:5px; cursor:pointer;'><img alt='back to top' title="Back to Top" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3j9QF11h3cNVLsG7odJCwefjtctMsKQ8ALXH0hKyrsjIWjPRVwPe6q6h5uVctCCrpJ7p3-DHuxghQZ0I_nZOf-X-6ZkM6HAJ_KMjX45SzUTnNvuzdj_JQba5YgYDMCpiGIxSQlS7iSVE/s1600/luuanh.png"/></a>

Tối ưu tăng tốc độ tải cho Blogspot chạy nhanh như ngựa

Ở bài trước tôi đã viết về một số vấn đề, nguyên nhân chính làm Blogspot tải chậm. Ở bài viết này, tôi sẽ hướng dẫn các bạn các tối ưu tăng tốc độ tải cho Blogspot chạy nhanh như ngựa xích thố của Quan Vũ khi xưa!

\

1.  Loại bỏ JavaScript và CSS chặn hiển thị trong nội dung trong màn hình đầu tiên:

Google cung cấp cho người dùng một công cụ hỗ trợ kiểm tra lỗi tải trang chậm rất hữu dụng mà chắc chắn ai quan tâm đến tốc độ tải trang cũng biết đó là Google Speed Insight. Hầu hết chúng ta sử dụng các template được chia sẻ miễn phí trên mạng, và khi sử dụng công cụ kiểm tra tốc độ Google Speed Insight đều có báo lỗi cơ bản đó là JavaScipt và CSS chặn hiển thị, dưới đây là hình ảnh mô tả chi tiết lỗi này:

Đối với một số trường hợp bạn có thể xóa bỏ đoạn mã dạng như http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js để tăng tốc độ tải trang như Google gợi ý tuy nhiên bạn có thể bị ảnh hưởng nghiêm trọng đến hiệu ứng của website như menu không chạy được,... nhưng rất may là chúng ta có cách không cần xóa đoạn mã này đi mà vẫn đảm bảo tốc độ tải trang được.

Để tối ưu đoạn Jquery chặn hiển thị này các bạn cần làm các bước sau:

1.  Cách 1: Truy cập vào "Chỉnh sửa HTML" của Blogspot rồi nhấn tổ hợp 2 phím sau Ctrl + F sau đó nhập từ khóa tìm kiếm là chính đoạn Jquery trên. Các bạn sẽ thấy đoạn mã sau  <script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js'/>  các bạn cần bỏ đoạn mã này đi và thay bằng  đoạn mã dưới đây:  <script async='async' src='https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js' type='text/javascript'></script>
2.  Cách 2: Thay đoạn mã ban đầu bằng đoạn mã sau:  <script type='text/javascript'> //<![CDATA[ <script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js'/> //]]> </script>

2. Xóa bỏ 2 file css mặc định mặc định của blogspot:

1.  Bước 1: Các bạn truy cập html của blogspot tìm kiếm đoạn mã sau đây:  <b:skin><![CDATA[
2.  Bước 2: Thêm đoạn mã  &lt;!--<style type='text/css'/>--&gt; vào ngay trước đoạn mã html trên.

3. Sử dụng thẻ điều kiện:

Đối với CSS không dẫn link và HTML các bạn sử dụng công cụ siêu nén để nén CSS, HTML, JS theo liên kết sau đây: http://www.willpeavy.com/minifier/

Còn đối với CSS dẫn link thông thường Blogspot cần tải JavaScript của trang chủ lẫn bài viết một lúc nên tốc độ rất chậm, khi đó chúng ta có thể sử dụng cách dùng thẻ điều kiện để tách riêng JavaScript của trang chủ và bài viết ra:

Nếu chỉ dùng cho trang bài viết:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
File javascript
</b:if>

Nếu chỉ dùng ở trang chủ dùng code:

<b:if cond='data:blog.url == data:blog.homepageUrl'>
File javascript
</b:if>

4. Tối ưu hóa file css dạng font icon hay dẫn link như font chữ chúng ta dùng đoạn javascript sau:

<script type='text/javascript'>
//<![CDATA[
function loadCSS(e, t, n) { "use strict"; var i = window.document.createElement("link"); var o = t || window.document.getElementsByTagName("script")[0]; i.rel = "stylesheet"; i.href = e; i.media = "only x"; o.parentNode.insertBefore(i, o); setTimeout(function () { i.media = n || "all" }) }
loadCSS("link file CSS 1");loadCSS("link file CSS 2");
//]]>
</script>

Ví dụ: có 2 link là font chữ và icon

<script type='text/javascript'>

//<![CDATA[
function loadCSS(e, t, n) { "use strict"; var i = window.document.createElement("link"); var o = t || window.document.getElementsByTagName("script")[0]; i.rel = "stylesheet"; i.href = e; i.media = "only x"; o.parentNode.insertBefore(i, o); setTimeout(function () { i.media = n || "all" }) }
loadCSS("http://fonts.googleapis.com/css?family=Segoe UI|Arial|Open+Sans:400,300,300italic,400italic,600|Segoe UI:400,300,700");loadCSS("//netdna.bootstrapcdn.com/font-awesome/3.2.0/css/font-awesome.min.css");
//]]>
</script>

5. Tối ưu hóa hình ảnh:

Để tốt nhất cho việc tải trang nhanh chóng bạn chỉ nên sử dụng hình ảnh định dạng jpg và hạn chế sử dụng các hình ảnh như png,..

Hình ảnh không cần thiết phải quá nét, quá chi tiết do đó bạn cần giảm dung lượng của ảnh bớt đi.

1.  Để nén ảnh định dạng png bạn sử dụng công cụ sau: https://tinypng.com/
2.  Để nén ảnh định dạng jpg bạn sử dụng công cụ sau đây: http://compressnow.com/fr/

Những lý do khiến cho Blogspot của bạn tải chậm ì ạch

Blogspot là một trong những nền tảng web 2.0 được sử dụng nhiều nhất hiện nay. Trong thời buổi mà mạng còn chập chờn, chưa thực sự đáp ứng trải nghiệm nhanh chóng cho người dùng ở nước ta thì việc tối ưu tăng tốc độ cho Blogspot là không thể thiếu.

Những lý do chính khiến cho trang web Blogspot chạy chậm ì ạch:

1.  Sử dụng quá nhiều Javascript là nguyên nhân chủ yếu dẫn đến tốc độ tải trang blogspot bị giảm đi. Không có gì vẹn toàn, chỉ có thuyết tương đối mà không có thuyết tuyệt đối. Một website có giao diện đẹp lung linh, các hiệu ứng hoành tráng độc đáo dĩ nhiên người dùng sẽ thích hơn một blog đơn giản chỉ có một vài hiệu ứng giản đơn. Nhưng vấn đề là thời gian tải trang ở những website đẹp lung linh ấy lại quá lâu so với các web đơn giản, thậm chí đối với những người dùng mạng 2G hiện nay ở nước ta có thể sẽ không bao giờ tải nổi hoàn thiện website của bạn để có thể chiêm ngưỡng hết các tiện ích đẹp lung linh ấy. Bạn phải đứng trước sự lựa chọn cân nhắc giữa tốc độ và hiệu ứng của website để làm sao có thể đủ thời gian chờ đợi của người dùng, không quá tệ trong mặt giao diện.
2.  Sử dụng hình ảnh quá nặng: Hình ảnh là nguyên nhân tương đối lớn làm chậm website của bạn, tuy nhiên so với Javascript thì chúng ta dễ khắc phục hơn nhiều. Theo xu hướng, tất cả chúng ta đều cần những tấm ảnh đẹp nét căng, tuy nhiên website thì không cần thế. Người dùng tìm kiếm chúng ta chỉ cần thấy hình ảnh đủ dùng, không vỡ, không quá mờ là được. Còn nếu cần hình ảnh cực nét đã có những website chuyên chia sẻ hình ảnh như Flick, Image,... giải quyết vấn đề rồi.
3.  CSS và jquery chặn hiển thị: Khi các bạn kiểm tra tốc độ của Blogspot sẽ xuất hiện các đoạn CSS mặc định của Blogspot hay jquery chặn hiển thị, điều này gây ảnh hưởng tương đối lớn đến tốc độ tải của website.
4.  Vấn đề HTML: Đối với html chúng ta không tác động được nhiều nhưng có thể tối ưu được gì chúng ta vẫn cần làm. Để có thể cải thiện chút ý cho html chúng ta có thể nén html lại bằng các công cụ siêu nén chuyên biệt.

Bài viết này tạm dừng ở đây, bài sau tối sẽ hướng dẫn các bạn cách giải quyết từng vấn đề một. Mời các bạn chú ý theo dõi để cải thiện tốc độ tải trang Blogspot.