利用SEO优化,增加被搜寻的机会!
SEO优化百百款,为了增加被搜寻的机会,运用Schema 语意标记是很好的方法!
在这篇中有提到:善用SEO优化的 Schema 语意标记,可以帮助 Google 搜寻引擎爬虫更快理解网页的内容,以提升网页的 SEO。这一篇,我们就来列举一些 Schema 语意标记的范例,帮助所有 SEO优化师们、或是需要做 SEO 的前端工程师们更快上手!
▶ 参考资料:如何善用Schema语意标记,提升网页的SEO? (http://bit.ly/2NhPjHs)
以下的 Schema 语意标记,虽是取自某些特定网站的范例,但是同样的方法,也适用于各种网站:
适用于介绍公司/组织的 Schema Markup
这类的 Schema Markup 除了可以帮助 Google 爬虫可以透过前端工程师的网站而抓取贵公司/组织的资讯外,还可以增加在 Google 搜寻结果页面显示贵公司的「Google知识图谱 (Knowledge Graph)」的机率喔!
什么是知识图谱?
如下图的例子所示,当我们在 Google 输入关键字「Adobe」时, Google 右侧会出现简介,包含「Adobe」的标志、URL、客服专线、总部位置与社群网站的连结。
这是因为 Adobe 的官网有做公司/组织类的结构化资料标记,有助于 Google 搜寻引擎抓取,而在使用者在搜寻相关关键字时,资讯会在搜寻结果页右方显示其资讯卡。
当我们在搜寻引擎输入关键字后,有时知识图谱会出现在搜寻结果页的右方,非常醒目。 |
以下为此范例的业主「Adobe」在网页的 HTML 原始码中,所置入的原始码:
<script type="application/ld+json">
{
<!--↓↓↓宣告要使用 schema.org 的 Organization(公司/组织)类来呈现资料↓↓↓-->
"@context": "https://schema.org",
"@type": "Organization",
<!--↓↓↓标记公司网址↓↓↓-->
"url": "https://www.adobe.com",
<!--↓↓↓标记公司名称↓↓↓-->
"name": "Adobe",
<!--↓↓↓标记公司登记名称↓↓↓-->
"legalName": "Adobe Systems Incorporated",
<!--↓↓↓标记公司其他的名称↓↓↓-->
"alternateName": "Adobe.com",
<!--↓↓↓标记公司的LOGO↓↓↓-->
"logo": "https://www.adobe.com/favicon.ico",
<!--↓↓↓标记公司的其他官方网站或社群,如FB、推特、IG、linkdin等等↓↓↓-->
"sameAs": [
"https://www.facebook.com/Adobe/",
"https://twitter.com/Adobe/",
"https://www.linkedin.com/company/adobe/",
"https://www.instagram.com/adobe/"
],
<!--↓↓↓标记公司的联络资讯,如电话、连络类型等等↓↓↓-->
"contactPoint": [
{
"@type": "ContactPoint",
<!--↓↓↓标记公司的联络电话↓↓↓-->
"telephone": "+1-800-833-6687",
<!--↓↓↓标记公司的联络类型为「客户服务」↓↓↓-->
"contactType": "customer service",
<!--↓↓↓标记公司的联络选项为「免付费」↓↓↓-->
"contactOption": "TollFree",
<!--↓↓↓标记公司的联络地区为「美国」↓↓↓-->
"areaServed": "US",
<!--↓↓↓标记公司的服务语言为「美式英文」↓↓↓-->
"availableLanguage": "US"
}
]
}
</script>
网站连结专用之 Schema Markup
如果你的网站中有「站内搜寻」的功能,你可以针对它做标记,使搜寻框出现在搜寻结果页中,如下图所示:
以下为此范例的业主「Apple」在网页的 HTML 原始码中,所置入的原始码:
<script type="application/ld+json">
{
<!--↓↓↓宣告要使用 schema.org 的 WebSite (网站)类来呈现资料↓↓↓-->
"@context": "https://schema.org",
"@type": "WebSite",
<!--↓↓↓蓝色字体可替换为贵公司网址↓↓↓-->
"url": "https://www.apple.com",
<!--↓↓↓蓝色字体可替换为贵公司名称↓↓↓-->
"name": "Apple",
"potentialAction": {
"@type": "SearchAction",
<!--↓↓↓蓝色字体部分为公司站内搜寻页面,而{search_term_string}的意思为搜寻字串↓↓↓-->
"target": "https://www.apple.com/us/search?q={search_term_string}",
"query-input": "required name=search_term_string" }
}
</script>
若贵公司的网站没有站内搜寻,则可以以 Google 搜寻引擎的方式取代之如下:
<script type="application/ld+json">
{
<!--↓↓↓宣告要使用 schema.org 的 WebSite (网站)类来呈现资料↓↓↓-->
"@context": "https://schema.org",
"@type": "WebSite",
<!--↓↓↓蓝色字体可替换为贵公司网址↓↓↓-->
"url": "贵公司的网址",
<!--↓↓↓蓝色字体可替换为贵公司名称↓↓↓-->
"name": "贵公司名称",
"potentialAction": {
"@type": "SearchAction",
<!--↓↓↓蓝色字体部分为公司站内搜寻页面,而{search_term_string}的意思为搜寻字串↓↓↓-->
"target": "https://www.google.com/search?q={search_term_string}+site:贵公司的网址",
"query-input": "required name=search_term_string" }
}
</script>