SEO优化怎样做才能快速上手?让前端工程师告诉你小秘诀!
要做好SEO优化其实一点也不难!弄懂语意标记就可以更上手!
之前提过：前端工程师善用 Schema 语意标记，能帮忙 Google 搜寻引擎爬虫更快速地理解网页的内容，以提升网页的 SEO。这一篇，我们就来列举一些 Schema 语意标记的范例，帮助所有 SEO 优化师们、或是需要做SEO优化 的前端工程师们更快上手！
以下的 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>
推荐阅读:
你知道SEO优化最佳帮手的正确打开方式吗? 看这篇就对了!!
人人都能是工程师！台湾 IT 培训中心推「找到工作再付学费」专案，要试试吗？
上完UI 课程了吗? 再来看看工程师们都在学哪些程式语言吧!
