Hướng dẫn sử dụng schema markup & structured Data SEO

SEO Nino24 - Hướng dẫn sử dụng schema markup & structured Data SEO – Phần 1

Chắc hẳn nhiều bạn đã từng thấy qua các kết quả tìm kiếm trên google có hiện ngôi sao , hình ảnh hoặc các đường link đi kèm rất nổi bật. Điều này tăng tỉ lệ CTR (Click through rate) vào website và làm nổi bật trang web của mình trên Search engine. Vậy làm sao để cho website hiển thị Rich Snipet nhanh nhất thì mình sẽ hướng dẫn các bạn trong bài viết mở đầu của blog dưới đây

Hiển thị logo thương hiệu khi search

Google dành 1 vùng khá rộng phía bên phải kết quả tìm kiếm để hiển thị các thông tin của doanh nghiệp, công ty như logo, tên doanh nghiệp, số điện thoại, các tài khoản mạng xã hội…. mỗi khi search theo từ khóa thương hiệu của họ.

Điều này sẽ giúp cho các doanh nghiệp nâng cao được giá trị thương hiệu, giúp người dùng nắm bắt được thông tin cơ bản về công ty, các số điện thoại liên lạc hoặc đơn giản nhất là giúp tăng lượng người dùng tương tác trên các trang mạng xã hội.

Hiển thị thông tin thương hiệu khi search

Các bạn tham khảo đoạn code sau để làm xuất hiện logo thương hiệu trên google nhé :

<script type="application/ld+json">
{ "@context" : "http://schema.org",
  "@type" : "Organization",
  "legalName" : "Tên thương hiệu",
  "url" : "địa chỉ liên kết trang web",
  "contactPoint" : [{
    "@type" : "ContactPoint",
    "telephone" : "Số điện thoại",
    "contactType" : "customer service"
  }]
  "logo" : "đường dẫn file logo của bạn",
  "sameAs" : [ "đường dẫn fanpage facebook",
    "Đường dẫn twitter",
    "Đường dẫn google plus",
    "Đường dẫn youtube"]
}
</script>

Copy

Hướng dẫn trên google : Customizing Your Knowledge Graph

Website Schema Markup

Website schema markup sẽ giúp bạn hiển thị khung search box trong kết quả tìm kiếm cũng như hiển thị tên thương hiệu bên cạnh đường link trên công cụ tìm kiếm. Schema này yêu cầu trang web của bạn phải có 1 page tìm kiếm thì nó mới hiển thị. Ví dụ như wordpress thì có page tìm kiếm dạng url sau :

domain/?s=keyword

Hiển thị search box và tên công ty

Code tạo Website Schema Markup :

<script type="application/ld+json">
{
  "@context" : "http://schema.org",
  "@type" : "WebSite", 
  "name" : "Tên công ty",
  "url" : "url của bạn",
  "potentialAction" : {
    "@type" : "SearchAction",
    "target" : "http://domain của bạn/?s={search_term}",
    "query-input" : "required name=search_term"
  }                     
}
</script>


Copy

Google Resource Pages:

BreadCrumbs Markup

Rich Snippet này chắc hẳn khá quen thuộc với nhiều bạn và có lẽ là BreadCrumbs Markup được sử dụng nhiều nhất trong SEO. Tác dụng của Markup này là giúp bạn hiển thị đường dẫn gọn hơn và đẹp hơn trên công cụ tìm kiếm.

BreadCrumbs Markup

Code tạo Bread Crumbs:

<ol itemscope itemtype="http://schema.org/BreadcrumbList">
  <li itemprop="itemListElement" itemscope
      itemtype="http://schema.org/ListItem">
    <a itemprop="item" href="https://example.com/">
        <span itemprop="name">Home</span></a>
    <meta itemprop="position" content="1" />
  </li>
  ›
  <li itemprop="itemListElement" itemscope
      itemtype="http://schema.org/ListItem">
    <a itemprop="item" href="https://example.com/activewear/">
      <span itemprop="name">Activewear</span></a>
    <meta itemprop="position" content="2" />
  </li>
  ›
  <li itemprop="itemListElement" itemscope
      itemtype="http://schema.org/ListItem">
    <a itemprop="item" href="https://example.com/activewear/tops/">
      <span itemprop="name">Tops</span></a>
    <meta itemprop="position" content="3" />
  </li>
</ol>



Copy

Google Resource :BreadCrumbs

Site Navigation Schema Markup

Site navigation schema markup ngoài tác dụng giúp google hiểu rõ cấu trúc trong website của bạn thì nó còn có tác dụng nữa là giúp bạn định hướng được những nội dung nào nổi bật nhất trong trang web của bạn mà bạn muốn hiển thị trên công cụ tìm kiếm.

Như hình ảnh bên dưới , trang web này hiển thị thêm các thông tin như liên hệ, thông tin về trang web, các post nổi bật..

Site navigation schema markup


<ul itemscope itemtype="http://www.schema.org/SiteNavigationElement">
  <li itemprop="name"><a itemprop="url" href="liên kết của bạn">tiêu đề của liên kết</a></li>
  <li itemprop="name"><a itemprop="url" href="liên kết của bạn">tiêu đề của liên kết</a></li> 
<li itemprop="name"><a itemprop="url" href="liên kết của bạn">tiêu đề của liên kết</a></li> 
<li itemprop="name"><a itemprop="url" href="liên kết của bạn">Tiêu đề của liên kết</a></li> 
<li itemprop="name"><a itemprop="url" href="liên kết của bạn">tiêu đề của liên kết</a></li> 
<li itemprop="name"><a itemprop="url" href="liên kết của bạn">Tiêu đề của liên kết</a></li> 
<li itemprop="name"><a itemprop="url" href="liên kết của bạn">Tiêu đề của liên kết</a></li> 
</ul>



Copy

Resource page : SiteNavigationElement

Video Schema Markup

Rich Snippet này thì thường được các site làm video như site phim, site phim hoạt hình quan tâm vì mục đích chủ yếu của nó là hiển thị video trên video search của google.

Tuy nhiên, google vẫn ưu tiên các video từ youtube hơn là video từ trang cá nhân nên Rich Snippet này cũng chỉ làm đa dạng hiển thị trên google hơn thôi

Video Schema Markup

Đoạn code tham khảo :

<div itemscope itemtype="http://schema.org/VideoObject">
 <link itemprop="url" href="Link trang web">
 <meta itemprop="name" content="Tên video" />
 <meta itemprop="description" content="Đoạn mô tả video" />
 <meta itemprop="uploadDate" content="Ngày upload" />
 <meta itemprop="duration" content="PT10M25S - thời gian video">
 <img itemprop="thumbnailUrl" src="Ảnh thumb của video" />
</div>

Copy

Google Resource : Enabling Rich Snippets for Videos

Author Description