Home » Thủ Thuật Blogger
Giới hạn của Blogger
11:19 AM |
Tổng hợp code Popup quảng cáo cho blog/web
9:04 PM |Các loại Code Popup trong bài viết
Sửa link http://dxoan.blogspot.com/ thành đường link của web mà bạn muốn đặt Popup
Đọc thêm
Xem thêm…
- Code Popup xuất hiện nhiều tab mỗi khi click chuột
- Code Popup-under hiện sau trình duyệt cho blog/web
- Code Popup mở tab mới khi click vào vị trí bất kỳ trên web
- Code Popup mở cửa sổ quảng cáo nhỏ dưới góc màn hình
- Code Popup: Xuất hiện popup khi click chuột lần đầu tiên
- Code Popup : Xuất hiện nhiều cửa sổ khi click lần đầu tiên
- Code tạo quảng cáo popup xuất hiện 1 lần/1 ngày/1 ip
Đọc thêm
[Thủ thuật Blogger] SEO hiệu quả với Title Tag và Meta Tag
7:07 PM |![[Thủ thuật Blogger] SEO hiệu quả với Title Tag và Meta Tag](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIuJ6wNnDp4o5iF6wuMOPJxOPx_3KWcxz84fC9iDC6JvtNOZsofTu2BlKEonjWVLAPp1Gi7Dq11gXzWfRxurtfr2jirNN6LzFXXSbSbxonWOCQDbgnQ0MFsI17pzX-S0N0D2Hu2Nvmv2E/s1600/seo.jpg "[Thủ thuật Blogger] SEO hiệu quả với Title Tag và Meta Tag")
Nếu bạn muốn blogspot của mình có thứ hạng cao trên các công cụ tìm kiếm thì bạn phải đầu tư SEO ngay từ buổi đầu thành lập blog. Đầu tư SEO phải bắt đầu từ việc tùy biến Meta Tag. Vậy tùy biến Meta Tag như thế nào mới hiệu quả? Với bài viết này, tôi hy vọng bạn đọc sẽ hiểu rõ hơn về Meta Tag và biết thêm về một thủ thuật “độc” về phương diện Meta Tag SEO cho blogspot.
Meta Tag chưa bao giờ được xem là một cách đảm bảo để giành được thứ hạng hàng đầu cho trang web của bạn trên các công cụ tìm kiếm. Tuy nhiên, hiện nay, đặc trưng giá trị nhất mà các Meta Tag mang lại cho người sở hữu website là khả năng kiểm soát đến một mức độ nào đó đối với cách thức mà các trang web được mô tả bởi các công cụ tìm kiếm. Chúng cũng cho khả năng ngăn chặn các trang web không được đánh chỉ mục. Vậy Meta Tag là gì?
Meta Tag cung cấp thông tin được chèn vào phần đầu (head) của các trang web. Khác với Title Tag (xem giải thích bên dưới), thông tin trong phần đầu của các trang web không được nhìn thấy bởi người xem trang web trên các trình duyệt. Thay vào đó, thông tin Meta trong vùng này được dùng để truyền tải thông tin chuyên biệt như mô tả trang, từ khóa, tác giả…
Chúng ta hãy xem hai loại Meta Tag phổ biến dưới đây.
<head><title>Huynh Nhat Ha on Blogger</title><meta content='Blogger tips, CSS, HTML, Javascript' name='description'/><meta content=' Blogger tips, CSS, HTML, Javascript, jQuery, Mootools, Scriptaculous' name='keywords'/></head>
Trong ví dụ trên, có thể thấy, Meta Tag nằm giữa thẻ mở <head>và thẻ đóng </head> trong phần đầu của trang web. Theo ví dụ trên thì gồm Title Tag rồi đến Meta Description Tag và đến Meta Keywords Tag.
Title Tag
Title Tag không phải là Meta Tag song cũng rất quan trọng. Bất cứ nội dung gì bạn đặt giữa thẻ <title> và thẻ </title> sẽ xuất hiện trên thanh tiêu đề của công cụ tìm kiếm. Theo như ví dụ dưới đây, Title Tag là tiêu đề của bài viết mà bạn đang xem.
Title Tag rất quan trọng đối với các công cụ tìm kiếm. Đoạn text bạn sử dụng trong Title Tag là một trong những yếu tố quan trọng đối với cách thức mà công cụ tìm kiếm quyết định xếp hạng trang web của bạn.Meta Description Tag
Meta Description Tag cho phép bạn tác động phần mô tả trang web của bạn trên các trình duyệt hỗ trợ Tag.
Xem lại ví dụ về Meta Tag ở trên thì thẻ Meta đầu tiên là Meta Description Tag. Đoạn text bạn muốn được hiển thị làm phần mô tả nằm giữa các dấu trích dẫn sau phần "content=" (nói chung trong khoảng 200 đến 250 ký tự có thể được đánh chỉ mục, cho dù một phần nhỏ trong lượng từ đó có thể được hiển thị mà thôi).
Meta Keywords Tag
Meta Keywords Tag cho phép bạn cung cấp thêm thông tin về từ khóa liên quan để các công cụ tìm kiếm đánh chỉ mục.
Xem lại ví dụ về Meta Tag ở trên thì thẻ Meta thứ hai là Meta Keywords Tag. Những từ khóa bạn muốn liên quan đến trang web sẽ được đặt giữa các dấu trích dẫn sau phần "content=" (nói chung phần này nên gồm khoảng 25 từ hoặc cụm từ là tốt nhất, các từ hoặc cụm từ được đặt cách nhau bởi dấu phẩy).
Meta Robots Tag
Ngoài hai thẻ Meta quan trọng nói trên, còn có thẻ Meta khác như Robots Tag. Thẻ này cho phép bạn xác định một trang đặc biệt nào đó có được công cụ tìm kiếm đánh chỉ mục hay không.
Nếu bạn muốn trang web của bạn không được đánh chỉ mục thì dùng thẻ như thế này.
<meta content='noindex' name='robots'/>
Ngược lại thì dùng thế này.
<meta content='index' name='robots'/>
Tuy nhiên bạn không cần sử dụng biến thể Meta Robots Tag để giúp trang của bạn được đánh chỉ mục bởi vì về mặc định thì một công cụ tìm kiếm sẽ cố gắng đánh chỉ mục tất cả các trang của bạn.
Ngoài những thẻ Meta quan trọng nói trên, còn có một số thẻ Meta khác như author, channel, date … song những thẻ này không quan trọng đối với công cụ tìm kiếm lớn như Google.
Phần giới thiệu trên đây giúp bạn hiểu khái quát về Title Tag và Meta Tag. Vậy chúng ta áp dụng như thế nào mới hiệu quả cho blogspot.
Chúng ta cần biết một quy tắc quan trọng là nếu các kiểu trang trên blogspot đều có Meta Tag giống nhau thì dễ dẫn đến tình trạng lặp nội dung (duplicate contents) gây hạn chế về SEO. Vì thế chúng ta nên định Meta Tag khác nhau cho mỗi kiểu trang trên blogspot.
Blogspot có 3 kiểu trang (pageType) là index (trang chủ, trang nhãn và trang lưu trữ), item (trang bài viết) và static page (trang tĩnh). Trong 3 kiểu trang này thì static page là có khả năng được Google cho tính năng sitelinks. Qua quá trình thử nghiệm, tôi áp dụng code cho Meta Tag của trang mình như sau.
<!-- Meta Tags SEO Full Pack by http://www.tinhocvp123.blogspot.com for Bloggers --><b:if cond='data:blog.pageType == "index"'><meta content='Description 1, Description 2, Description 3' name='description'/><meta content='Keyword, Keyword 2, Keyword 3' name='keywords'/><meta content='global' name='distribution'/><meta content='7 days' name='revisit'/><meta content='7 days' name='revisit-after'/><meta content='document' name='resource-type'/><meta content='all' name='audience'/><meta content='general' name='rating'/><meta content='index, follow' name='robots'/><meta content='Huynh Nhat Ha' name='author'/><meta content='Vietnamese, English' name='language'/><meta content='Vietnam' name='country'/><meta content='blogger' name='generator'/><b:else/><b:if cond='data:blog.pageType == "static_page"'><meta expr:content='data:blog.pageName' name='description'/><meta expr:content='data:blog.pageName + ", " + "Keyword A, Keyword B, Keyword C"' name='keywords'/><b:else/><meta expr:content='data:blog.pageName' name='description'/><meta expr:content='data:blog.pageName + ", " + "Keyword X, Keyword Y, Keyword Z"' name='keywords'/></b:if></b:if>
Ý nghĩa của đoạn code trên như sau.
Nếu ở kiểu trang index, thì dùng Meta Tag như một website thông thường, nếu ở kiểu trang static page thì Meta Description Tag là tên trang, Meta Keywords Tag là tên trang cộng với đoạn từ khóa định riêng cho kiểu trang tĩnh; kiểu trang còn lại (item) thì dùng Meta Description Tag là tên trang và Meta Keywords Tag là tên trang cộng với đoạn từ khóa định tiêng cho kiểu trang bài viết.
Ngoài ra còn có thể định dạng Meta Tag riêng cho từng trang có URL riêng song một blogspot thường có rất nhiều bài viết nên việc làm này rất mệt nhọc, thiết nghĩ chỉ cần định dạng Meta Tag như trên là quá tốt rồi.
Đối với phần Title Tag, tôi áp dụng code như sau.
<b:if cond='data:blog.pageType == "index"'><title><data:blog.title/></title><b:else/><title><data:blog.pageName/> | <data:blog.title/></title></b:if>
Đoạn code trên nói rằng, đối với kiểu trang index thì Title Tag là tiêu đề blog, còn đối với kiểu trang còn lại sẽ gồm tên trang và tiêu đề blog.
Vậy phải đặt code như thế nào trong Template của bạn? Đăng nhập Blogger, vào Design >> Edit HTML. Đặt đoạn code Meta Tag trên đoạn code Title Tag và đặt toàn bộ hai đoạn code này dưới dòng
<b:include data='blog' name='all-head-content'/>
Hy vọng, sau khi áp dụng thủ thuật này, sau một thời gian theo dõi, thứ hạng blog của bạn sẽ được cải thiện đáng kể trên các công cụ tìm kiếm.
Table tag - Tạo bảng biểu trong blogspot
6:15 PM |
Trong Word, table được tạo nên bởi hàng và cột thì trong HTML table cũng được tạo nên khi có 2 yếu tố đó. Trước đây, khi lập trình web, đa số đều sử dụng table để dàn trang vì dễ và tính hiệu quả của nó tương đối ổn. Ở Blogspot, không có nút như Word để tạo bảng nhanh, vì vậy, vì đặc thù công việc thì việc nhớ code tạo bảng sẽ rất có ích.
Cú pháp:
<table>...</table>
- Mỗi dòng trong bảng được tạo ra bởi thẻ <tr>...</tr>
- Mỗi ô được định nghĩa bởi thẻ <td>...</td>
- Tiêu đề của dòng hoặc cột được định nghĩa bởi thẻ <th>...</th>
* Dữ liệu trong các ô có thể là hình ảnh, âm thanh, văn bản, hoặc cũng có thể chứa một bảng khác.
Mình xét một ví dụ:
<table border="1">
<tr><!-- dòng 1 -->
<td>Buổi</td> <!-- ô 1-->
<th>Sáng</th>
<th>Chiều</th>
<th>Tối</th>
</tr>
<tr><!-- dòng 2 -->
<th>Công việc</th>
<td>Đi học</td>
<td>Học tiếng anh</td>
<td>Làm bài tập</td>
</tr>
</table>
| Buổi | Sáng | Chiều | Tối |
|---|---|---|---|
| Công việc | Đi học | Học tiếng anh | Làm bài tập |
Nhìn vào bảng hiển thị, các bạn có thể sẽ rõ hơn chức năng của từng thẻ trong bảng, tuy nhiên vẫn còn những thuộc tính chúng ta cần nắm:
Thẻ <TABLE> bao gồm các thuộc tính:
border : xác định độ dày đường kẻ bảng, như ví dụ trên là 1px.
align : dùng để căn lề, có 3 giá trị: left, center, right. Không hỗ trợ trong HTML5
background: xác định ảnh nền.
bgcolor : xác định màu nền.Không hỗ trợ trong HTML5
height, width : xác định chiều cao và độ rộng bảng, giá trị có thể là px(pixels) hoặc %.
cellspacing : xác định khoảng cách giữa các ô. Không hỗ trợ trong HTML5
cellpadding: xác định khoảng cách giữa dữ liệu trong ô và các cạnh của ô.Không hỗ trợ trong HTML5
Trong thẻ table có các thẻ con cấu thành nó, bao gồm:
Thẻ <TR> : (Table Rows): tạo ra các dòng cho bảng.
*Thuộc tính:
align: căn lề cho các ô trong cùng một dòng. Không hỗ trợ trong HTML5.
valign: căn lề theo chiều dọc. có các giá trị : "top" - trên ; "middle" - trung tâm ; "bottom" - dưới.; "baseline" - viết cách trên 1 dòng cơ bản. Không hỗ trợ trong HTML5.
bgcolor: xác định màu nền cho dòng. Không hỗ trợ trong HTML5.
Thẻ <TH> : (Table Heading cell) - Tạo tiêu đề cho 1 ô hoặc 1 dòng.
Thẻ <TD> : (Table Data) - Tạo 1 ô dữ liệu.
* Thuộc tính:
align, valign: căn lề cho dữ liệu theo chiều ngang, chiều dọc. Không hỗ trợ trong HTML5.
background, bgcolor: xác định ảnh nền, màu nền cho ô dữ liệu. Không hỗ trợ trong HTML5.
height, width: xác định chiều cao, chiều dài của ô. Không hỗ trợ trong HTML5.
rowspan: xác định phạm vi mở rộng của ô theo hàng. Không hỗ trợ trong HTML5.
colspan: xác định phạm vi mở rộng của ô theo cột. Không hỗ trợ trong HTML5.
Hiện nay, thẻ table còn có các thẻ con quy định vị trí của từng phần trong bảng:
<thead> : quy định dữ liệu sẽ luôn ở trên cùng của bảng, thường làm tiêu đề của cột.
<tbody>: quy định dữ liệu phần giữa bảng, sau thẻ </thead>
<tfoot>: quy định dữ liệu cuối bảng.
* Thuộc tính:
align, valign: căn lề cho dữ liệu theo chiều ngang, chiều dọc. Không hỗ trợ trong HTML5.
background, bgcolor: xác định ảnh nền, màu nền cho phần tử bảng. Không hỗ trợ trong HTML5.
height, width: xác định chiều cao, chiều dài của phần tử bảng. Không hỗ trợ trong HTML5.
Để phân biệt các thẻ này, trình duyệt tự động tạo ra đường viền lớn hơn giao giữa 3 phần và đặc biệt, dù bạn có sắp xếp lộn xộn các thẻ này cho nhau thì trình duyệt sẽ vẫn hiện đúng
