Blog mới của Nguyễn Lâm Blog. Welcome
Home
Blogger
SEO

Chia Sẻ Bộ Meta SEO Chuẩn Cho Blogspot Update 2021

chia-se-bo-meta-seo-chuan-cho-blogspot

Định nghĩa thẻ meta: Thẻ meta là gì?

Thẻ meta là một phần của thẻ HTML, nó mô tả nội dung trang của bạn cho các công cụ tìm kiếm và khách truy cập trang web. Các thẻ Meta chỉ xuất hiện trong mã của trang và bất kỳ ai cũng có thể kiểm tra chúng thông qua mã nguồn (Ctrl + U).

xem-meta-website-bang-cach-xem-nguon-trang
Meta của Nguyễn Lâm Blog

Thẻ meta có thể ảnh hưởng đến cách người dùng nhìn thấy trang web của bạn trong kết quả tìm kiếm và liệu họ có thực sự nhấp qua trang web của bạn hay không.

Mỗi nền tảng đều có các giải pháp khác nhau để thêm thẻ Meta, giống như WordPress có các plugin miễn phí để bạn lựa chọn, ví dụ như: All in One SEO Pack, Yoast SEO... Còn Blogger thì chúng ta phải tự thêm nó vào bằng HTML.

Cách kiểm tra thẻ Meta trên một trang web

Nếu bạn muốn kiểm tra các thẻ Meta cho bất kỳ trang nào, chỉ cần nhấp chuột phải vào bất kỳ đâu trên trang và chọn “Xem Nguồn Trang”. Bạn cũng có thể sử dụng các công cụ như SEMrush (cụ thể là SEMrush Audit Tool) và Screaming Frog để kiểm tra các thẻ Meta trên bất kỳ trang web nào.

Các thẻ meta quan trọng nhất cho SEO vào năm 2021

Theo mình nghĩ thì sẽ có 7 thẻ meta chính dưới đây

  1. Title tag
  2. Meta description
  3. Canonical Tag
  4. Alternative text (Alt) Tag
  5. Robots meta tag
  6. Social Media Meta Tags (Open Graph and Twitter Cards)
  7. Header tags
  8. Responsive Design Meta Tag


Title tag

Thẻ Title là phần tử HTML đầu tiên chỉ định trang web của bạn cho các công cụ tìm kiếm và cho khách truy cập. Title tag hỗ trợ tất cả các trình duyệt bao gồm Chrome, Firefox, Safari, v.v.

Title tag luôn nằm trong phần <head> trên trang web của bạn.

Ví dụ về Title tag:

<head>
<title>This is Title Sample</title>
</head>

Độ dài tối ưu cho thẻ Tiêu đề: Google thường hiển thị 55-64 ký tự (Nên để dưới 60 ký tự)

title-va-description

Thẻ tiêu đề là yếu tố trên trang quan trọng thứ hai đối với SEO, sau nội dung. - MOZ -

Meta description

Mô tả meta là một phần tử HTML tóm tắt trang web của bạn. Các công cụ tìm kiếm thường hiển thị mô tả Meta trong kết quả tìm kiếm bên dưới Tiêu đề của bạn.

Ví dụ về Meta description

<head>
<meta name="description" content="This is a meta description sample. We can add up to 160 characters.">
</head>

Google không sử dụng mô tả Meta cho xếp hạng; tuy nhiên, nó có ảnh hưởng lớn đến CTR trang của bạn vì nó hiển thị trong kết quả tìm kiếm.

Canonical Tag

Thẻ Canonical là một thẻ liên kết HTML có thuộc tính “rel = canonical” được sử dụng nếu bạn có một URL trang duy nhất có cùng nội dung với nhiều URL trang khác.

Bằng cách triển khai thẻ Canonical trong HTML, nó sẽ khai báo với các công cụ tìm kiếm rằng URL này là trang chính và tránh lập chỉ mục các URL trang trùng lặp khác.

Ví dụ về Canonical Tag

<link rel="canonical" href="http://example.com/" />

Nhiều URL:

  • http://www.example.com
  • https://www.example.com
  • http://example.com
  • http://example.com/index.php

Google coi tất cả các URL ở trên là các phiên bản trùng lặp của Trang chủ. Và để khắc phục sự cố này, thẻ chuẩn (rel = canonical) đã được phát minh.

Alternative text (Alt) Tag

Thẻ Alt rất quan trọng đối với bất kỳ hình ảnh nào, vì công cụ tìm kiếm không thể đọc chúng, vì vậy bạn cần thêm văn bản thay thế thích hợp vào hình ảnh để công cụ tìm kiếm có thể xem xét chúng.

Ví dụ về Alt

<img src="http://example.com/xyz.jpg" alt="xyz"/>

Robots Meta tag

Thẻ Robots Meta là một thẻ HTML cung cấp hướng dẫn cho trình thu thập dữ liệu web về việc lập chỉ mục hay ngăn lập chỉ mục một trang web.

Thẻ Meta Robots có bốn giá trị chính cho trình thu thập thông tin của công cụ tìm kiếm:

  • FOLLOW: Trình thu thập thông tin của công cụ tìm kiếm sẽ theo dõi tất cả các liên kết trong trang web đó.
  • INDEX: Trình thu thập thông tin của công cụ tìm kiếm sẽ lập chỉ mục toàn bộ trang web.
  • NOFOLLOW: Trình thu thập thông tin của công cụ tìm kiếm sẽ KHÔNG theo dõi trang và bất kỳ liên kết nào trong trang web đó.
  • NOINDEX: Trình thu thập thông tin của công cụ tìm kiếm sẽ KHÔNG lập chỉ mục trang web đó.

Ví dụ về Robots Meta tag

<meta name="robots" content="noindex, nofollow"> – Có nghĩa là không lập chỉ mục hoặc không theo dõi trang web này.

<meta name="robots" content="index, follow"> – Có nghĩa là lập chỉ mục và theo dõi trang web này.

Lưu ý: Thẻ Meta rô bốt phải được đặt trong phần <head> trên trang web của bạn.

Social Media Meta Tags (Open Graph and Twitter Cards)

Open Graph Tags:

Thẻ Open Graph Meta được thiết kế để thúc đẩy tích hợp giữa Facebook, LinkedIn, Google và các URL trang web mà bạn đã chia sẻ trên các nền tảng này.

Dưới đây là ví dụ về cách các thẻ Open Graph trông như thế nào trong HTML chuẩn: 

<meta property="og:type" content="article"/>

<meta property="og:title" content="TITLE OF YOUR POST OR PAGE"/>

<meta property="og:description" content="DESCRIPTION OF PAGE CONTENT"/>

<meta property="og:image" content="LINK TO THE IMAGE FILE"/>

<meta property="og:url" content="PERMALINK"/>

<meta property="og:site_name" content="SITE NAME"/>

Twitter Cards:

Thẻ Twitter hoạt động theo cách tương tự như Open Graph, ngoại trừ việc bạn thêm các thẻ Meta đặc biệt này chỉ dành cho Twitter. Twitter sẽ sử dụng các thẻ này để tăng cường hiển thị trang của bạn khi được chia sẻ trên nền tảng của họ.

Dưới đây là một ví dụ về cách thẻ Twitter trông như thế nào trong HTML chuẩn: 

<meta name="twitter:title" content="TITLE OF POST OR PAGE"/>

<meta name="twitter:description" content="DESCRIPTION OF PAGE CONTENT"/>

<meta name="twitter:image" content="LINK TO IMAGE"/>

<meta name="twitter:site" content="@USERNAME"/>

<meta name="twitter:creator" content="@USERNAME"/>

Đây là khi cả 2 thẻ trên thêm vào website:

open-graph-va-twitter-cards

Header tags

Thẻ Header được sử dụng cho các sáng tạo tiêu đề, tức là bằng cách sử dụng các thẻ này, chúng ta có thể áp dụng các thay đổi về phông chữ.

Các phần tử tiêu đề là H1, H2, H3, H4, H5 và H6 với H1 là cấp cao nhất (hoặc quan trọng nhất) và H6 là cấp thấp nhất.

Dưới đây là một ví dụ về Header tags:

<h1> 9 mẹo để tăng tốc độ trang web của bạn </h1>

<p>Paragraph of content</p>

<p>another paragraph of content</p>

<h2>Performance Analysis</h2>

<p>Paragraph of content</p>

<h3>Phân tích hiệu suất trên thiết bị di động và máy tính để bàn với PageSpeed ​​Insights</h3>

Responsive Design Meta Tag

Thẻ Meta quan trọng cuối cùng là Responsive Design Meta Tag. Bằng cách sử dụng thẻ meta viewport, chúng ta có thể kiểm soát bố cục cho các trang web trên trình duyệt di động.

Ví dụ về Responsive Design Meta Tag:

<meta name="viewport" content="width=device-width,initial-scale=1"/>

Lưu ý: Không sử dụng Responsive Design Meta Tag này nếu các trang trên trang web của bạn không đáp ứng, vì nó sẽ làm cho trải nghiệm người dùng tồi tệ hơn.

Một số thẻ có thể bỏ qua

Những thẻ meta này có thể bỏ qua:
  • Keywords tag: Google không sử dụng thẻ Meta từ khóa trong xếp hạng web.
  • Revisit after: Thẻ HTML này là lệnh để rô bốt quay lại trang sau một khoảng thời gian cụ thể. Thẻ này không được sử dụng bởi bất kỳ công cụ tìm kiếm chính nào và không có giá trị trong SEO. Tốt hơn là nên tránh thẻ này và để nó cho các công cụ tìm kiếm quyết định cách thu thập dữ liệu trang web của bạn. Cú pháp: <meta name="revisit-after" content ="7 days" />
  • Expiration/date: Thẻ này xác định ngày hết hạn trên trang của bạn. Cá nhân tôi sẽ không giới thiệu cái này, chỉ cần loại bỏ cái này nếu bạn đang sử dụng nó. Cú pháp: <meta content='sat, 02 jun 2021 00:00:00 GMT' http-equiv='expires'/>
  • Site verification: Chỉ cần bỏ qua điều này. Bạn có thể xác minh trang web của mình bằng Google Search Console và công cụ Bing Webmaster.
  • Copyright: Mỗi trang web đều đặt bản quyền của họ ở chân trang, vì vậy bạn không cần một thẻ riêng.
  • Distribution: Giá trị "Distribution" được cho là được sử dụng để kiểm soát ai có thể truy cập tài liệu, thường được đặt thành "global".
  • Generator: Thẻ vô dụng.
  • Cache control: Thẻ này cho phép các nhà xuất bản web xác định tần suất một trang được lưu vào bộ nhớ cache. Nói chung, những điều này không bắt buộc; chúng ta chỉ có thể sử dụng tiêu đề HTTP thay vì thẻ HTML này.
  • The ODP Robots Meta Tag: Google không còn sử dụng thẻ Meta này nữa.
  • Geo Meta Tag: Google không sử dụng thẻ Geo Meta để xếp hạng các trang.

Chia Sẻ Bộ Meta SEO Chuẩn Cho Blogspot

Từ những tài liệu trên, mình đã tổng hợp và tạo ra bộ meta chuẩn SEO cho blogger, các bạn copy về thay thế bộ meta cũ của các bạn nhé. 

  <b:if cond='data:view.isError'><title>Error 404: Page Not Found</title></b:if>
  <b:if cond='!data:view.isMultipleItems'><title><data:blog.pageName/></title></b:if>
  <b:if cond='data:view.isMultipleItems'>
    <b:if cond='data:view.isHomepage'><title><data:blog.pageTitle/></title>
    <b:else/>
      <b:if cond='data:view.search.query'><title><data:messages.search/>: <data:view.search.query/></title></b:if>
      <b:if cond='data:view.search.label'>
        <title><data:blog.pageName/> - <data:blog.title/></title>
        <b:else/>
        <title>Recent post: <data:blog.title/></title>
      </b:if>
      <b:if cond='data:view.isArchive'><title>Blog archive in: <data:blog.pageName/></title></b:if>
    </b:if>
  </b:if>

  <b:if cond='!data:view.isError'>
    <!-- Meta Title -->
    <b:if cond='data:view.isMultipleItems'>
      <meta expr:content='data:blog.pageTitle' property='og:title'/>
      <meta expr:content='data:blog.pageTitle' property='og:image:alt'/>
      <meta expr:content='data:blog.pageTitle' name='twitter:title'/>
      <meta expr:content='data:blog.pageTitle' name='twitter:image:alt'/>
      <b:else/>
      <meta expr:content='data:blog.pageName' property='og:title'/>
      <meta expr:content='data:blog.pageName' property='og:image:alt'/>
      <meta expr:content='data:blog.pageName' name='twitter:title'/>
      <meta expr:content='data:blog.pageName' name='twitter:image:alt'/>
    </b:if>
    <meta expr:content='data:blog.title' property='og:site_name'/>
  
    <!-- Meta Image -->
    <b:if cond='data:blog.postImageUrl'>
      <meta expr:content='resizeImage(data:blog.postImageUrl, 0)' property='og:image'/>
      <b:else/>
      <meta content='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3Wtucvaq232B0k1xRRODLfMPlnXjgi7tfQqA0M3S7euJPApVAAhxOmf7NjXol8pByWNdNOvOfGQNl4SOnUCTiMdpxbWt7WtYCnSsy4gi9-00iFllD5doEYWPvXK6eb4rcvyCAsu0E5Phu/s16000/nguyenlamblog-img.jpg' property='og:image'/>
    </b:if>
    <b:if cond='data:view.isMultipleItems'>
      <meta content='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3Wtucvaq232B0k1xRRODLfMPlnXjgi7tfQqA0M3S7euJPApVAAhxOmf7NjXol8pByWNdNOvOfGQNl4SOnUCTiMdpxbWt7WtYCnSsy4gi9-00iFllD5doEYWPvXK6eb4rcvyCAsu0E5Phu/s16000/nguyenlamblog-img.jpg' name='twitter:image'/>
      <b:else/>
      <meta expr:content='resizeImage(data:blog.postImageUrl, 0)' name='twitter:image'/>
    </b:if>
    <b:if cond='data:view.isPost'>
      <link expr:href='resizeImage(data:blog.postImageUrl, 0)' rel='image_src'/>
    </b:if>
  
    <!-- Meta Description -->
    <b:if cond='data:blog.metaDescription'>
      <meta expr:content='data:blog.metaDescription' name='description'/>
      <meta expr:content='data:blog.metaDescription' property='og:description'/>
      <meta expr:content='data:blog.metaDescription' name='twitter:description'/>
      <b:else/>
      <meta expr:content='data:post.snippet' name='description'/>
      <meta expr:content='data:post.snippet' property='og:description'/>
      <meta expr:content='data:post.snippet' name='twitter:description'/>
    </b:if>
  
    <!-- Meta Keywords -->
    <meta expr:content='data:blog.title + &quot;, &quot; + data:blog.pageName + &quot;, Add_your_addtional_keyword_here &quot;' name='keywords'/>
    <meta expr:content='data:blog.title' property='article:tag'/>
  
    <!-- Link Canonical -->
    <link expr:href='data:blog.url.canonical' rel='canonical'/>
    <link expr:href='data:view.url' hreflang='x-default' rel='alternate'/>
    <meta expr:content='data:blog.canonicalUrl' property='og:url'/>
  
    <!-- Site Owner -->
    <meta content='' name='Author'/>
    <link href='#' rel='author'/>
    <link href='#' rel='publisher'/>
    <meta content='' property='article:author'/>
    <meta content='' property='article:publisher'/>
    <meta content='' name='twitter:site'/>
    <meta content='' name='twitter:creator'/>

    <!-- Theme Color -->
    <meta content='#005af0' name='theme-color'/>
    <meta content='#005af0' name='msapplication-navbutton-color'/>
    <meta content='#005af0' name='apple-mobile-web-app-status-bar-style'/>
    <meta content='yes' name='apple-mobile-web-app-capable'/>
  
    <!-- Blogger Rss -->
    <meta content='blogger' name='generator'/>
    <link href='https://www.blogger.com/openid-server.g' rel='openid.server'/>
    <link expr:href='data:blog.url' rel='openid.delegate'/>
    <link expr:href='data:blog.homepageUrl.canonical + &quot;feeds/posts/default&quot;' expr:title='data:blog.title + &quot; - Atom&quot;' rel='alternate' type='application/atom+xml'/>
    <link expr:href='&quot;//www.blogger.com/feeds/&quot; + data:blog.blogId + &quot;/posts/default&quot;' expr:title='data:blog.title + &quot; - Atom&quot;' rel='alternate' type='application/atom+xml'/>
    <link expr:href='data:blog.homepageUrl.canonical + &quot;feeds/posts/default?alt=rss&quot;' expr:title='data:blog.title + &quot; - RSS&quot;' rel='alternate' type='application/rss+xml'/>
  
    <!-- Open Graph -->
    <meta content='article' property='og:type'/>
    <meta content='id_ID' property='og:locale'/>
    <meta content='en_US' property='og:locale:alternate'/>
    <meta content='summary_large_image' name='twitter:card'/>
    
    <!-- Robots Search -->
    <meta content='width=device-width, initial-scale=1.0, user-scalable=1.0, minimum-scale=1.0, maximum-scale=5.0' name='viewport'/>
    <meta content='text/html; charset=UTF-8' http-equiv='Content-Type'/>
    <meta content='IE=Edge' http-equiv='X-UA-Compatible'/>
    <meta content='true' name='MSSmartTagsPreventParsing'/>
    <meta content='index, follow' name='googlebot'/>
    <meta content='follow, all' name='Googlebot-Image'/>
    <meta content='follow, all' name='msnbot'/>
  
    <!-- Sife Verification -->
    <meta content='' name='google-site-verification'/>
    <meta content='' name='msvalidate.01'/>
    <meta content='' name='p:domain_verify'/>
    <meta content='' name='majestic-site-verification'/>
    <meta content='Jago Desain' name='copyright'/>
    
<script type='application/ld+json'>
  {
    &quot;@context&quot;: &quot;https://schema.org&quot;,
    &quot;@type&quot;: &quot;WebSite&quot;,
    &quot;url&quot;: &quot;<data:blog.homepageUrl.canonical/>&quot;,
    &quot;name&quot;: &quot;<data:blog.title/>&quot;,
    &quot;alternateName&quot;: &quot;<data:blog.title/>&quot;,
    &quot;potentialAction&quot;: {
      &quot;@type&quot;: &quot;SearchAction&quot;,
      &quot;target&quot;: &quot;<data:blog.homepageUrl.canonical/>search?q={search_term_string}&amp;max-results=12&quot;,
      &quot;query-input&quot;: &quot;required name=search_term_string&quot;
    }
  }
</script>
  </b:if>

Thay thế những thứ cần thiết với nhé.

Kết luận

Vậy là mình đã chia sẻ cho các bạn các tài liệu về meta seo mà mình đã tổng hợp trên Google và các nơi khác về. Giờ đây, bạn có thể dễ dàng sử dụng các thẻ Meta HTML một cách thông minh.

Đừng quên bình luận bên dưới và chia sẻ quan điểm của bạn về Thẻ HTML. Cảm ơn vì đã đọc!

7 comments

  1. Welcome to blog
  2. Chéo nè
  3. Good Content
  4. share cái đoạn chia sẻ mạng xã hội của ông đc hok, nếu đc mong có post hướng dẫn chèn ^^
    1. Là sao á
  5. Đây là 1 Bài viết đầy đủ của bạn
    1. Cảm ơn bạn đã ghé thăm.