Schema 教学

Schema 是什么?

Schema 是用来加强搜索引擎对网页内容的认知. 如果你有一个产品页面, 产品页面里面有评论, 价钱, 图片, 简介, 这些资料对搜索引擎都是很宝贵的, 但是搜索引擎并没有办法认知到所有资讯的种类.Schema 的用途就是让搜索引擎抓取可用的资讯, 在搜索的结果上显示更多的资料, 来得到更多的浏览量. 这是 schema 官方网站提供的基本教学: https://schema.org/docs/gs.html

Schema 的用途?

以下是搜索引擎的一个食谱的搜索结果: schema01 我们可以看到前2个网页显示了图片, 但下面的2个没有. 因为Schema 的设定, 让搜索结果的链接更加漂亮了. 所以我们现在知道 Schema 的重要性, 我们要知道如何设定

Schema 的最基本教学 - Logo

每个网站上都会有标志, 所以我们要先从基本的公司资料学起. 这是简单的标志 HTML
<a href="http://domain.com">
    <img src="logo.jpg" alt="" />
</a>
如果我们加入了 Schema, 就变成:
<section itemscope itemtype="http://schema.org/Organization">
    <a href="http://domain.com" itemprop="url">
        <img src="logo.jpg" alt="" itemprop="image" />
    </a>
</section>
我们在一个最上层加了一个 <section>, 并加入了 itemscope. itemscope 是指这个代码元素的资料属于什么种类. 这一系列的种类可以从 schema.org 获取, 在这里我们用的是组织 - http://schema.org/Organization. itemscope 之后要加 itemtype="种类的网址". 之后的子元素就可以设定属性. 从 organization 的属性页面上, 子元素的属性有 name, image, text, description 和许多种类, 我们采用了 url 跟 image (网址和图片). 这样搜索引擎在搜索的时候, 就可以获取你的 logo 图片跟网址了. 当然, 这需要点时间让搜索引擎去抓取.

Schema - 互联网网址

除了标志, 我们还可以加 schema 到互联网网址里面, 这也可以让搜索引擎更简单的抓取所有相关网址. 这是我们的基本代码:
<div>
    <a href="http://facebook.com">Facebook</a>
    <a href="http://twitter.com">Twitter</a>
    <a href="http://linkedin.com">Linkedin</a>
</div>
带人 schema:
<div itemscope itemtype="http://schema.org/Organization">
    <link itemprop="url" href="http://www.mydomain.com">
    <a itemprop="sameAs" href="http://facebook.com">Facebook</a>
    <a itemprop="sameAs" href="http://twitter.com">Twitter</a>
    <a itemprop="sameAs" href="http://linkedin.com">Linkedin</a>
</div>

Schema - 文章的设定

以上的 Schema 是比较关于网站连接和图片的设定. 再来是基本文章的 Schema 设定. 文章通常会有标题, 内容, 日期, 图片等资讯. 这是我们基本的代码构造:
<article class="article">
    <img src="" alt="" />
    <h1 class="title"></h1>
    <time class="date"></time>
    <div class="description"></div>
    <div class="body"></div>
</article>
带人 Schema, 基本的种类为 Article. 你可以从这里看到所有相关的文章属性:
<article class="article" itemscope itemtype="http://schema.org/Article">
    <img src="" alt="" itemprop="image" />
    <h1 class="title" itemprop="name headline"></h1>
    <time class="date" itemprop="datePublished"></time>
    <div class="description" itemprop="description"></div>
    <div class="body" itemprop="articleBody text"></div>
</article>
如果你不确定要带人哪个字段, 你也可以用多个属性来说明该资讯, 用空格来分开.   这些都可以从官方网站上学到. 以上是felicoz 给予的基本教学, 我们会陆续加入其他特别的 schema 设定.
本文由 Felicoz https://felicoz.com/ 原创发布,转载请保留地址!
html html5 schema seo 搜索优化