Tìm hiểu về cấu trúc Schema Markup
Cấu trúc Schema.org có thể được sử dụng với nhiều bảng mã khác nhau, bao gồm RDFa, Microdata và JSON-LD. Những cấu trúc này bao gồm các thực thể, mối quan hệ giữa các thực thể và hành động và có thể dễ dàng được mở rộng thông qua một mô hình mở rộng được ghi chép đầy đủ. Hơn 10 triệu trang web sử dụng Schema.org để đánh dấu các trang web và email của họ. Nhiều ứng dụng từ Google, Microsoft, Pinterest, Yandex và các ứng dụng khác đã sử dụng những từ vựng này để mang lại trải nghiệm phong phú, có thể mở rộng.Nguồn gốc Schema Markup
Được thành lập bởi Google, Microsoft, Yahoo và Yandex, các thẻ cấu trúc Schema.org được phát triển bởi một quy trình cộng đồng mở, sử dụng danh sách gửi thư công khai-schemaorg@w3.org và thông qua GitHub.Schema.org được chia sẻ giúp quản trị viên web và nhà phát triển dễ dàng hơn trong việc quyết định lược đồ và nhận được lợi ích tối đa cho những nỗ lực của họ. Theo tinh thần này, những người sáng lập, cùng với cộng đồng lớn hơn đã cùng nhau - để cung cấp một bộ sưu tập các lược đồ được chia sẻ.
Cách thiết lập Schema Markup
Giờ chúng ta chỉ cần thêm các thẻ cấu trúc lược đồ phù hợp này phía sau vị trí các thẻ <div " các thẻ Schema.org " > trong các phân vùng gốc cơ bản của Khung trang web
<body class='index' itemscope='itemscope' itemtype='http://schema.org/WebPage'>
<header id='header-wrapper' itemscope='itemscope' itemtype='http://schema.org/WPHeader'> <nav id='navigation' itemscope='itemscope' itemtype='http://schema.org/SiteNavigationElement' role='navigation'> <article id='article-wrapper' itemscope='itemscope' itemtype='http://schema.org/Blog' role='main'> <aside id='sidebar-wrapper' itemscope='itemscope' itemtype='http://schema.org/WPSideBar'> <footer id='footer-wrapper' itemscope='itemscope' itemtype='http://schema.org/WPFooter'>
Cùng xem ví dụ vị trí thêm các thẻ Schema.org trong khung web nền tảng Blogger sau đây:
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html b:version='2' class='v2' expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr' xmlns:og='http://ogp.me/ns#'>
<head>
<meta charset='UTF-8'/>
<title><data:blog.title/></title>
<b:skin><![CDATA[
/* Variable definitions
=======================
]]></b:skin>
<style type='text/css'>
/*
-----------------------------------------------
Blogger Template Style
Name : Basic Blogger Template
Designer : Agus Purwantoro
Release : April 2018
Version : 1.0
License : MIT
Email : me@aguspurwantoro.com
-----------------------------------------------
Thanks to:
- Eric Meyer (CSS Reset)
*/
/* Eric Meyer's Reset CSS v2.0 (http://meyerweb.com/eric/tools/css/reset/)
--------------------------------------------------------------------------------------- */
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}table{border-collapse:collapse;border-spacing:0}
</style>
</head>
<body class='index' itemscope='itemscope' itemtype='http://schema.org/WebPage'>
<div id='wrapper'>
<header id='header-wrapper' itemscope='itemscope' itemtype='http://schema.org/WPHeader'>
<b:section class='header' id='header' maxwidgets='1'>
<b:widget id='Header1' locked='true' title='Basic Blogger Template (Header)' type='Header'></b:widget>
</b:section>
</header>
<nav id='navigation' itemscope='itemscope' itemtype='http://schema.org/SiteNavigationElement' role='navigation'>
<ul>
<li><a href=''>Home</a></li>
<li><a href=''>About</a></li>
</ul>
</nav>
<div class='clearfix'/>
<section id='outer-wrapper'>
<article id='article-wrapper' itemscope='itemscope' itemtype='http://schema.org/Blog' role='main'>
<b:section class='main' id='main'>
<b:widget id='Blog1' locked='true' title='Blog Posting' type='Blog'></b:widget>
</b:section>
</article>
</section>
<div class='clearfix'/>
<aside id='sidebar-wrapper' itemscope='itemscope' itemtype='http://schema.org/WPSideBar'>
<b:section class='sidebar' id='sidebar' showaddelement='yes'></b:section>
</aside>
<div class='clearfix'/>
<footer id='footer-wrapper' itemscope='itemscope' itemtype='http://schema.org/WPFooter'>
<b:section class='footer' id='footer' showaddelement='yes'/>
<footer class='footer-left'>
Copyright © <script>new Date().getFullYear()>2010&&document.write(""+new Date().getFullYear());</script> <a href='/' rel='copyright'><data:blog.title/></a>
</footer>
<footer class='footer-right'>
Design by <a href='https://www.aguspurwantoro.com/' target='_blank' title='Blogger'>Agus Purwantoro</a>
</footer>
</footer>
</div>
</body>
</html>
Sau khi hoàn thành, các bạn chỉ cần vào công cụ Google Structured Data Testing Tool. để kiểm tra kết quả:
www.Uviet.net