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/AVvXsEhWg7gz4J7ZWKyGpJIeiGzZo5yn70CmUc09zJwfUZElbTYgjaApfO3zNOdpbIcloRZZtwqKC0I-LyRWo5xIPW11JIbYFMGr8Fv66ecEanb2waEmImhCaseegaMHXmAtpNvX0TCMHMPr4BnG/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/AVvXsEhWg7gz4J7ZWKyGpJIeiGzZo5yn70CmUc09zJwfUZElbTYgjaApfO3zNOdpbIcloRZZtwqKC0I-LyRWo5xIPW11JIbYFMGr8Fv66ecEanb2waEmImhCaseegaMHXmAtpNvX0TCMHMPr4BnG/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/AVvXsEhWg7gz4J7ZWKyGpJIeiGzZo5yn70CmUc09zJwfUZElbTYgjaApfO3zNOdpbIcloRZZtwqKC0I-LyRWo5xIPW11JIbYFMGr8Fv66ecEanb2waEmImhCaseegaMHXmAtpNvX0TCMHMPr4BnG/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/AVvXsEiSm8TqcCIv550o3KRyv-yYjrtKtjgtEX7YcQqJ8YdbOpmZa4lzxtwdf0ejKBUKLgCS2MhOQM81mi3tvg1zHu-3aPEslsnt1GPgbsLPAQwDvmqZA3OjmYfvA2Lo_nhYZ5Vu7go_EZ556V8/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/AVvXsEiSm8TqcCIv550o3KRyv-yYjrtKtjgtEX7YcQqJ8YdbOpmZa4lzxtwdf0ejKBUKLgCS2MhOQM81mi3tvg1zHu-3aPEslsnt1GPgbsLPAQwDvmqZA3OjmYfvA2Lo_nhYZ5Vu7go_EZ556V8/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.

Hướng dẫn thêm đánh giá KK Star ratings 5 ngôi sao cho Blogspot

- Đối với người dùng Wordpress thì việc sử dụng Plugin đánh giá KK Star Rating làm nổi bật bài viết trên Google Seach rất đơn giản chỉ cần cài đặt Plugin là được. Tuy nhiên, đối với người dùng Blogspot lại không thế, trước đây tính năng đánh giá bài viết có sẵn trên Bogspot nhưng bây giờ đã bị xóa bỏ, không có sẵn Plugin nào  cho các Blogger cài đặt cả, tất cả chúng ta cần tự Code. 

- Hôm nay tôi xin gửi đến các bạn cách code để thêm đánh giá 5 ngôi sao vào Blogspot:

•  Demo: tại đây

1. Tính năng của code này là các bạn có thể thêm ngôi sao đánh giá bài viết vào Blogspot giống y hệt như trên Wordpress, với 5 ngôi sao màu vàng, đầy đủ cảm xúc về bài viết như:

1.  Đánh giá 1 ngôi sao: Ghét bài này
2.  Đánh giá 2 ngôi sao:  Không thích bài này
3.  Đánh giá 3 ngôi sao: Thích bài này
4.  Đánh giá 4 ngôi sao: Rất thích
5.  Đánh giá 5 ngôi sao: Yêu thích.

- 5 trạng thái này được bố trí ở iframe bên phải tương ứng với 5 ngôi sao hoạt hình. Nhìn thì nó không được hoành tráng như kk star ratings của Wordpress nhưng cũng đủ chức năng.
+ Ưu điểm khi sử dụng code đánh giá 5 sao:

• Bài viết trên Blog của bạn sẽ chuyên nghiệp hơn, được người dùng tin tưởng hơn vì có đánh giá, Google cũng sẽ đánh giá bạn cao hơn so với các Blog khác.
• Kết quả hiển thị trên công cụ tìm kiếm Google Seach nổi bật hơn, nhìn vào hình ảnh dưới đây rõ ràng bài viết của các bạn là nổi bật hơn rồi!
  

+ Nhược điểm khi sử dụng đánh giá 5 sao:

• Nếu có ai đó cố tình phá hại Blog của bạn, cho hàng loạt đánh giá 1 sao để hạ uy tín thì sẽ thật phiền phức!

Rõ ràng đây là một tính năng rất thú vị, đặc biệt với các Blog bán hàng cần niềm tin từ người dùng. Tuy nhiên, không hiểu vì lý do gì mà Google lại loại bỏ tính năng này trên Blogspot kể từ năm 2010. Đối với các Blog đã được tạo từ trước năm 2010 thì vẫn được duy trì tính năng này, các bạn sẽ có sẵn đoạn javascript cho tiện ích đánh giá 5 ngôi sao này cho Blogspot của mình.

Trong ảnh phần khoanh đỏ chính là sự hiện diện của nó trước đây

Để dùng lại tính năng đánh giá bài viết này, các bạn chỉ cần kích hoạt lại là được.

2. Do vậy khi cài đặt tiện ích này sẽ có 2 trường hợp bạn phải giải quyết:

Trường hợp 1
Blogspot không còn thẻ <b:include name='feedLinks'/> và không còn đoạn javascript ngay sau nó.
Bước 1
Cách 1: Sử dụng tiếng Anh cho đánh giá:
Các bạn dán đoạn javascript sau vào trước thẻ </body> 

<script src='http://www.google.com/jsapi' type='text/javascript'/>
    <script type='text/javascript'>
      google.load("annotations", "1", {"locale": "<data:top.languageCode/>"});
      function initialize() {
        google.annotations.setApplicationId(<data:top.blogspotReviews/>);
        google.annotations.createAll();
        google.annotations.fetch();
      }
      google.setOnLoadCallback(initialize);
    </script>

Cách 2: Sử dụng tiếng Việt cho đánh giá:
Trả lại <b:include name='feedLinks'/> và thêm javascript.
Bạn mở rộng thẻ <b:includable id='main' var='top'> ở cuối gần thẻ đóng nó có dạng: 

<b:else/>
    <b:include name='mobile-main'/>
  </b:if>
  <b:if cond='data:top.showPlusOne'>
    <data:top.googlePlusBootstrap/>
  </b:if>
</b:includable>

Bạn thêm đoạn code sau vào ngay trên <b:else/>

<!-- feed links -->
    <b:include name='feedLinks'/>
<script src='http://www.google.com/jsapi' type='text/javascript'/>
    <script type='text/javascript'>
      google.load("annotations", "1", {"locale": "<data:top.languageCode/>"});
      function initialize() {
        google.annotations.setApplicationId(<data:top.blogspotReviews/>);
        google.annotations.createAll();
        google.annotations.fetch();
      }
      google.setOnLoadCallback(initialize);
    </script>

Bước 2: Chung cho cả 2 cách trên:
Tìm tới thẻ <div class='post-footer'> và dán đoạn code sau vào sau nó

<b:if cond='data:blog.pageType == &quot;item&quot;'>
   <span class='star-ratings'>
      <div expr:g:text-color='data:textColor' expr:g:url='data:post.absoluteUrl' g:background-color='#fff' g:height='35' g:type='RatingPanel' g:width='155' />
   </span>
   <div style='clear: both;'/>
</b:if>

Nếu sử dụng cách 2 thì trị số g:width='155' sửa lại thành 220 cho vừa với tiếng việt.
Lưu mẫu và xem kết quả.
Trường hợp 2
Bước 1
+ Nếu blogspot đang sử dụng mẫu cơ bản có từ trước những năm 2010 thì vẫn còn thẻ <b:include name='feedLinks'/> và ngay sau nó là đoạn javascript:

<b:if cond='data:top.showStars'>
    <script src='http://www.google.com/jsapi' type='text/javascript'/>
    <script type='text/javascript'>
      google.load("annotations", "1", {"locale": "<data:top.languageCode/>"});
      function initialize() {
        google.annotations.setApplicationId(<data:top.blogspotReviews/>);
        google.annotations.createAll();
        google.annotations.fetch();
      }
      google.setOnLoadCallback(initialize);
    </script>
</b:if>

Bạn chỉ cần bỏ thẻ điều kiện là 2 dòng tô màu vàng là xong bước 1.
Tiện ích sẽ có ngôn ngữ là tiếng Việt vì là blog tiếng Việt.
+ Nếu blogspot sử dụng HTML dựa trên nền tảng HTML mới của blogger thì vẫn có thẻ <b:include name='feedLinks'/> nhưng không có đoạn javascript thì bạn cứ thêm vào sau nó đoạn javascript đã bỏ thẻ điều kiện.
Bước 2
Tìm tới thẻ <div class='post-footer'> và dán đoạn code sau vào sau nó

<b:if cond='data:blog.pageType == &quot;item&quot;'>
   <span class='star-ratings'>
      <div expr:g:text-color='data:textColor' expr:g:url='data:post.absoluteUrl' g:background-color='#fff' g:height='35' g:type='RatingPanel' g:width='220' />
   </span>
   <div style='clear: both;'/>
</b:if>

Lưu mẫu và xem kết quả.
- Chú ý: Tiện ích chỉ có hiệu lực trên:
- Blogspot sử dụng tên miền riêng.
- Blogspot (blogspot.com) không sử dụng giao thức https.

- Tham khảo thêm nhiều thủ thuật về Blogspot tại: http://blog.doisong24.com

Xóa bản quyền Blogger trên Blogspot

- Blogger là một nền tảng web 2.0 miễn phí nổi tiếng hàng đầu thế giới cùng với Wordpress. Cho người dùng tùy chỉnh nhiều hơn về giao diện, thoải mái mua tên miền ngoài trỏ về Blog. 

Template có giao diện đẹp, thiết kế chuyên nghiệp rất nhiều tuy nhiên cũng tồn tại một vấn đề gây khó chịu cho người dùng đó là liên kết bản quyền. Người thiết kế, chia sẻ Template không thật sự muốn chia sẻ cho chúng ta miễn phí hoặc đơn giản chỉ là để lại bản quyền thiết kế thôi, họ dùng thủ thuật mã hóa chèn liên kết về website chính của họ. Liên kết này thường để cuối trang Blogspot, nó sẽ rất tốt cho website chính của người đặt liên kết vì vô hình dung chúng ta đang SEO, đặt liên kết và câu view miễn phí cho họ, dĩ nhiên nó lại là không tốt cho chúng ta. Một website mà có link out ra sẽ làm ảnh hưởng đến toàn site, càng nhiều link out sẽ càng bị ảnh hưởng.

- Có 2 hình thức liên kết bản quyền chính mà chúng ta muốn xóa đó là:

1.  Bản quyền của Blogger: Đây là liên kết Dofollow trỏ trực tiếp về trang chủ của Blogger.com. Bạn không thấy chỗ xóa bản quyền cung cấp bởi blogger.
   
2.  Bản quyền của người chia sẻ Template: Người chia sẻ giao diện Template chèn backlink vào cuối trang để bạn SEO, quảng bá website cho họ. Nếu bạn xóa đi backlink ở cuối chân trang này sẽ bị tự động chuyển website của bạn về website của họ khi có khách truy cập website của bạn.
   

- Bây giờ chúng ta sẽ đi giải quyết từng vấn đề:

1.  Đầu tiên là xóa bản quyền cung cấp bởi Blogger: Bước 1: 

Các bạn truy cập vào trang quản trị Blogspot rồi chọn Mẫu, sau đó chọn chỉnh sữa HTML.

 Bước 2: Nhấn tổ hợp 2 phím Ctrl và F rồi nhập từ khóa tìm kiếm sau đây:  Attribution1

Bước 3: Tại dòng code sau đây:   <b:widget id='Attribution1' locked='true' title='' type='Attribution' visible='true'> các bạn tiến hành thay bằng dòng code mới:   <b:widget id='Attribution1' locked='false' title='' type='Attribution' visible='false'> tức là thay true bằng false hết và lưu lại.

Bước 4: Các bạn di chuyền qua trang chủ Blogspot của bạn và chọn xóa như các widget khác thông thường,

2. Xóa bản quyền của người chia sẻ Template:

Cái này sẽ khó hơn kiểu 1 một chút, tuy nhiên các bạn đừng lo chúng ta sẽ xóa được hết. Các dòng lệnh HTML được chủ nhân mã hóa và cài vào code nên nếu ai xóa bản quyền liên kết cuối chân trang của họ, khi truy cập blog của mình sẽ tự chuyển hướng về website của người mã hóa HTML.

- Có 2 dạng phổ biến nhất của loại mã hóa bản quyền này như sau:

1.  Dạng mã hóa code về googleapis các bạn tìm kiếm từ khóa sau trong code Blogspot: googleapis sẽ xuất hiện 1 trong 2 đoạn code sau đây:  <script src='//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js'/> hoặc  <script src='//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'/> . Có nhiều dạng code nhưng họ hay để tên là jquery.min đó nên ta có thể dễ dàng tìm kiếm hơn. Các bạn tiến hành xóa đoạn code đó đi và quay trở lại xóa liên kết ở chân trang rồi lưu lại là được.
2.  Dạng mã hóa thứ hai đó là sử dụng CDATA các bạn nhập tìm kiếm từ khóa sau: //<![CDATA[ và tiến hành xóa hết đoạn mã hóa ở giữa //<![CDATA[ và  //]]> rồi lưu lại là được, nhớ xóa link ở chân trang như kiểu 1 nhé.

- Chú ý: có nhiều blogger sử dụng cả 2 kiểu mã hóa trên để đánh dấu bản quyền của mình, đặc biệt dạng mã hóa thứ 2 người ta có thể chèn 3 đến 4 đoạn trong HTML của Blogspot do đó các bạn cần tìm và xóa hết các đoạn mới làm mất được bản quyền, không bị chuyển hướng trang. Chúc các bạn thành công.

Xóa bản quyền Template  Blogspot bị mã hóa:

- Tôi có nhận được phản hồi từ một số bạn khi xóa bản quyền theo cách này bị lỗi ảnh hoặc bố cục của Blog, nếu có bị thế thì các bạn không sử dụng cách này nữa mà dùng cách Xóa bản quyền Template của Arlina Design Arlinadzgn nhé!

Thêm đánh giá ngôi sao vào cho website

-Chào các bạn, hôm nay tôi sẽ không nói về các cách đặt backlink chất lượng cao nữa mà nói về tối ưu website, làm website của các bạn đẹp hơn, nổi bật hơn với người dùng và Google. Chắc hẳn ai cũng đã từng nhìn thấy đánh giá 5 ngôi sao ở website, hay fanpage facebook ... rồi, đặc biệt trên kết quả tìm kiếm Google nếu hiện thêm hình đánh giá ngôi sao sẽ giúp website của các bạn nổi bật hơn so với các trang của đối thủ, tạo sự uy tín, niềm tin đối với khách hàng hơn rất nhiều như hình dưới đây :

-Cách thêm đánh giá ngôi sao vào website rất đơn giản như sau :

• Nếu các bạn sử dụng wordpress làm nền tảng website thì có rất nhiều Plugin hỗ trợ rất tốt, tuy nhiên việc sử dụng plugin nhiều cũng làm chậm tốc độ tải của trang do đó tôi không thích lắm. Nếu bạn nào không biết về code có thể sử dụng kk star ratings tôi thấy plugin này là tốt nhất để hiển thị đánh giá.
• Nếu các bạn sử dụng Blogspot sẽ không có Plugin hỗ trợ hoặc bạn nào muốn tự code các bạn chỉ cần thêm đoạn code sau đây vào bất kỳ chỗ nào của website là hôm sau trên kết quả tìm kiếm sẽ hiện đánh giá hình ngôi sao cực đẹp và nổi bật luôn : <script type='application/ld+json'>{  &quot;@context&quot;: &quot;http://schema.org/&quot;,  &quot;@type&quot;: &quot;Review&quot;,  &quot;itemReviewed&quot;: {    &quot;@type&quot;: &quot;Thing&quot;,   &quot;name&quot;: &quot;Super Book&quot;  },  &quot;author&quot;: {    &quot;@type&quot;: &quot;Person&quot;,    &quot;name&quot;: &quot;Joe&quot;  }, &quot;reviewRating&quot;: {    &quot;@type&quot;: &quot;Rating&quot;,    &quot;ratingValue&quot;: &quot;9&quot;,    &quot;bestRating&quot;: &quot;10&quot;  },  &quot;publisher&quot;: {    &quot;@type&quot;: &quot;Organization&quot;,    &quot;name&quot;: &quot;Washington Times&quot;  }}</script>