Hướng dẫn tạo schema markup & structured Data trong SEO P1

Chắc hẳn là có rất nhiều bạn đã từng thắc mắc và thấy qua các kết quả tìm kiếm trên google hiện thanh search box, 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 làm cho website chúng ta trở nên chuyên nghiệp và 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 Công cụ tìm kiếm. Vậy làm sao để cho website hiển thị Rich Snipet một cách nhanh và chính xác nhất, thì hôm nay mình sẽ hướng dẫn các bạn tạo schema cho website trong hai phần dưới đây.

Phần 1: Hướng dẫn tạo schema markup & structured Data trong SEO P1
Phần 2: Hướng dẫn tạo schema markup & structured Data trong SEO P2

Hiển thị logo thương hiệu khi tìm kiếm

Google dành 1 vùng khá rộng phía bên phải của 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.

Các bạn có thể tham khảo đoạn code dưới đây để 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” : “https://linkerpt.com“,
“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>

Hướng dẫn tạo của 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ị.

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>

Xem hướng dẫn của google:

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, theo lượng thống kê 2017 cho thấy điều đó. 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, nó và cũng giúp người dùng không bị lạc khi vào trang web mà không biết mình đang ở đâu.

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>

Xem hướng dẫn của google :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..

Code tham khảo, các bạn có thể thêm list theo ý cho đúng cấu trúc website nhé:

<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>

Xem hướng dẫn từ google: SiteNavigationElement

Video Schema Markup

Rich Snippet này thì thường được các site làm video như site xem 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, vimeo… hơn là video từ trang cá nhân nên Rich Snippet này vì nó uy tín hơn và cái này cũng chỉ làm đa dạng hiển thị trên google hơn thôi, biết đâu nội dung của bạn độc thì nó rất hữu ích đó.

Đoạn code cho các bạn 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>