Rails 新上线 Rails 网站的 SEO 优化要点
原文链接，原文展示效果更佳哦～
什么是 SEO
新网站上线的下一个课题
当你的网站开发辛辛苦苦开发上线了，你的会遇到的下一个问题是如何推广，如何让用户发现有你这么个网站，解决思路主要有：
- 出钱去做推广，比如出钱在百度上买某些关键字，用户在搜索这些关键字的时候就会优先把你的网站展现出来，但是用 rails 开发的主要都是创业公司，每一分钱都很宝贵。
- SEO 是另一个解决思路，SEO 的全名是（Search Engine Optimization），也就是让自己的网站符合搜索引擎的规则，提高网站权重，理想目标是能夠在搜尋页面前几笔就能被曝光。
SEO 权重要点
虽然 SEO 的权重规则基本上一直在变化，权重的給分也随着技术升级而有了新的规则，像以往的网站只是网站，現在的网站还要能能够支持 RWD（responsive web design 响应式网站设计）來让移动端的浏览时能够更加轻松，也免去了做 mobile app 的工作（有能力两个都做当然更好）。
搜索引擎如 google 会定时派爬虫來爬网站，爬完之后依照权重重新去排名，权重大致上要在乎的就是几点：
- 善用 Meta Tag / Meta Data 帮网址划重点
- Url 具有意义
- HTML tag 沒有乱用，例如一大堆 h1
- 采用 HTTPS 连接
- 支持 RWD（Responsive Web Design）
- 网站开启速度快
- 语系和国家
- Sitemap
- 爬虫
- 浏览量
SEO 优化参考标准
Meta Tag / Meta Data 优化
Title Tag: 当前页面的标题，关键字要往前放，字数不宜过长，否則有可能被认为是权重作弊，建议
- 英文字数 70 以內
- 中文字数 40 以內
范例：
<title> Rails 好用常用的gem汇总 | 结构化写作网</title>
Meta Description Tag: 每个页面的敘述，文案好坏间接影响点阅率
- 含标点符号的英文在 150 字內
- 中文十二字內，关键字往前放
范例：
<meta name="description" content="rails社区丰富的gem，是帮助rails工程师快速、快乐开发的好帮手，其中好用常用的已帮大家收集">
以上兩個标签非常重要，每一個頁面一定要不一樣，如果过多重复，搜索引擎会认为你在作弊，是会扣分的哦
如：Facebook Open Graph: 这是专门給 Facebook 抓取用的，可以在这些 meta tag 里面调整你要分享出去的內容长什麼樣子，如果都沒有设定，他会默认抓取你的 title description tag 來作为参考。
可以用 Facebook debug tools 來作为侦查改善的工具
Facebook 分享缩略图设定范例：
<meta property="og:image" content="https://example.me/img/about.jpg">
Twitter Cards: 这个就是专门给 Twitter 抓的，一样可以调整分享后的的样式。
在 Rails 實作部分可以用
- seo_helper
- meta-tags
网址优化
Canonical Url 告诉搜索引擎关于这个页面的标准网址，有时候我們一个页面会带很多参数，可能是语系、搜索参数等等，這個标签可以让搜索引擎只收录正确的网址就可以了。
例如：
https://www.example.com/products?category=dresses&color=green
后面就带了 category 和 color 的传递参数，这样的网址看起來会非常不舒服。
那么 Canonical Url 这个 tag 就可以这样写：
<link rel="canonical" href="https://www.example.com/products" />。
这样子就不会把一些带有参数的网址收录到搜索引擎下了
让 URL 具有意义 禁用链接，如果有一些链接你不想被计入 SEO，那么你可以使用 nofollow 标签。
情況大概会是，付费链接、留言里的链接，或是登入登出这种沒有必要被收入的链接会用到
范例：
link_to "不想被收录", awesome_path, rel: 'nofollow'
在一般 CRUD 出來的网址，通常都会是
http://example.com/products/1
那这个产品的 URL 是用数据库的 ID 作为依据，这样以来光看 URL 是沒有任何意义的，也无法提升权重，比较好的作法是让网址具有意义
http://example.com/products/aeron-chair http://example.com/products/xbox-360-white
这样一來，不仅一眼就能够看得出來这个 product 是什么，也能提升搜索的权重。
怎么做呢？
在 Rails 上面可以使用 friendly_id 这个 Gem，
详细的实作我在之前有写过一篇 使用 Friendly_id 与 Babosa 美化你的 Rails 网址
在这里面的教学還可以让 URL 带中文的 slug。
几点需要注意的是，如果要提升网域的权威性，请在主网域使用 例如：
http://example.com/products/aeron-chair
会比
http://shop.example.com/products/aeron-chair
来的更好，因为他可以直接提升 http://example.com 的网域分数。
HTML 标签优化
慎用 HTML tag，HTML tag 如果乱用，例如在同一个页面有一大堆 h1，是相当扣分的行为。
因为 HTML tag 其实就是拿来替你的网页画清楚重点，他是一個具有意义的語言
HTML 当初在设计时，本身就带有「语意」
你可以这样理解
- h1 是大标题
- h2, h3 是中标题
- h4, h5, h6 是小标题
- p 是指 paragraph (段落)
- strong 是重点部分，他与 b 不同的是，b 只有粗体，但 strong 是加重语气，如果是盲人使用阅读器在观看你的网站时，加重语气可以让辅助导读的软体能够正确的念出这段话
- img 中的 alt 是指替代文字，title 是标题
开发者希望他的网站能正确被收录，那么你就应该正确的使用 HTML 语意标签。
补充一点，
是对 SEO 沒有特別的加分或扣分效果，因为从以前就很流行以 div + CSS 来达到网站前端画面开发，毕竟 div 沒什麼包袱，它就是个区块所以
与 是沒有语意的，他只是容器规则标准：
- h1 一个页面只能有 1 个
- h2 一個页面只能有 2~3 个
- h3 一個页面可以有 6~10 个
HTML 标签权重由高至低：
title > meta description > h1 > h2 > h3 > strong > p
连接安全优化
优先采用 HTTPS 连线
因为近年來非常重视资讯安全问题，尤其现在很多金流行为是可以透过网址传输完成的，这当中可能会有信用卡等交易的机密资料，那么用 HTTPS 可以避免被第三方监听，因为这个过程是加密传输的。
HTTPS 是指你的网址有沒有安裝 SSL（Secure Sockets Layer , 传输层安全协议），如果你有确实安裝 SSL 的认证，通訊协定就会从 HTTP 改变为 HTTPS（Hypertext Transfer Protocol Secure , 超文字安全传输协议）。
在 2014 年時，Google 官方正式宣布 HTTPS 已被列入搜索引擎演算法之一
但如果你的网站只是「內容型网站」，沒有涉及到用户资安问题（例如交易），就目前來说，不使用 HTTPS 并不会有「超大的影响」。
不过值得注意的是，从 2017 年 10 月起，从 Chrome 62 开始，只要是需要输入任何资料的网页，若未使用 HTTPS，即会被标示为不安全。
參考 Google Chrome 官方文章
也因为 SSL 的凭证基本上都是要钱的，但也有很好心的公司 Let’s Encrypt 大力推广加密凭证的安全，也有放出三個月免费的版本，过期的话就要重新签名。
申请凭证的流程大致上是：
- 先自己生成一个私钥、一个申请用的凭证 CSR
- 將 CSR 传上去给凭证机构
- 凭证机构审核你真的拥有这个网域
- 下载 SSL 凭证
- 將私钥和 SSL 凭证安裝到网站服务器上
- 如果主要客戶不是在中国，那么可以更简单的申请使用 Cloudflare 这个 CDN 服务，這包含免費的 SSL 憑證，可以免去申請安裝的麻煩。它的 Flexible SSL 模式，可以让終端使用者到 CloudFlare 是加密连线，而你的服务器不需要安裝。使用 Cloudflare 需要將 DNS 也給它管理，在注册的流程中会要求你去修改 Namecheap 改用 Custom DNS。
支持 RWD 响应式网页设计
做 RWD 的好处是可以保有连接单一性，让原本的流量不会因为移动设备而沖散，因为这个链接的浏览量会让他的权重变高，更容易出現在搜索排名上面，但如果分別做 mobile/desktop 版，就会有两种不同的网址链接，会让 SEO 的效果打折。
RWD，也不是有做就好，而是会去依照载入速度有不一样的评分。
详细可以到 Google 提供的简易测试工具来测试一下你的读取秒数吧，依照 Google 說法是人的耐性只有三秒 XD，那就尽可能的压到 3 秒以下吧 XDrz。
网站开启速度
通常一个网站会慢多半不是后端处理 query 的速度，都会是在前端资源情況吃太紧，既然要作最佳化就必須要用科学化的方式测量，这样一来我们才知道最佳化有沒有成功。
Chrome 的除错器本身就很详细，可以观察 Network 在 Load page 花了多长的时间。
对前端来说，重视的是 Page load time, 而不是单一 request 的时间，因为网页的组成有 HTML + CSS + JavaScript
Google 提供的好用工具 PageSpeed Insights
或是用 Chrome 外挂 Lighthouse
都有清楚的报表以及提示你如何改善。
知识点，在 HTTP2 以后，有 async 和 defer 属性可以用。
以往的关键渲染会是把 javascript 移出 head, 让 CSS 优先加载达到画面快速渲染，在载入能够有互动式效果的 JS file。
不过新的属性可以让浏览器知道要异步加载
例如
- <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
+ <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload', :async => true %>
或是
- <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
+ <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload', :defer => true %>
async 与 defer 差別在于
async, 浏览器不会阻挡 HTML 渲染，当 JavaScript 下载完成时就会自动加载，不会等 HTML DOM 加载
defer, 浏览器也不会阻挡 HTML 渲染，但是当 JavaScript 下载完成后，会等 HTML 加载完成，才会执行 JavaScript。如果你的 JavaScript 里面有依赖 DOM 的話，适合用这个方式。
CSS 也被浏览器视为一种 render blocking 的资源，当浏览器解析 HTML 看到 <link href="style.css" rel="stylesheet" 时，就会等待完整解析这个 CSS 后才会继续渲染頁面。
语系与国家
如果你的网站本身有支援多语系，那么沒有设定好的情況会变成说，不论哪个国家的搜索引擎搜到你，进来都还要自己調整语系，而且在 google 搜寻结果上面也会 bian 得怪异，例如：美國 IP 搜出來的标题是中文之类的。
所以別忘記在你的 html tag 裡面加入
<html lang="zh">
可以参考 Apple 官方网站的作法，该网站是很标准的能够支援多语系 SEO 的写法，具体如下
<link rel="canonical" href="https://www.apple.com/">
<link rel="alternate" href="https://www.apple.com/" hreflang="en-US">
<link rel="alternate" href="https://www.apple.com/ae-ar/" hreflang="ar-AE">
<link rel="alternate" href="https://www.apple.com/ae/" hreflang="en-AE">
<link rel="alternate" href="https://www.apple.com/am/" hreflang="en-AM">
...
这样就能够让搜索引擎正确在每个国家直接显示相对应语系的网站了。
这个方法不是唯一，你也可以选择用 Sitemap 的方法來让搜索引擎正确收录。
择一即可。
制定 Sitemap
Sitemap 基本是描述一个网站的架构，它可以是任意形式的网页页面，通常是采用分级或分类的形式，能够消化庞大的网站架构，对于网站的访问者在网站浏览上的资讯需求也能快速获得，且能提高 SEO 搜索引擎优化的效果，对网站的帮助是非常大。
在这部份用 Gem“sitemap_generator”可以轻松帮你完成，并且有 rake task 能够让你每次产生新內容的時候更新上去。
爬虫
在 Rails 的路径public/robots.txt 是专门拿來給搜索引擎爬虫读取的，这只档案会告诉他什么资源不需要被收录。
不过有时候我们除了 Production 环境以外，可能还有 Staging，避免被收录的化可以依照环境动态生成 robots 这只档案。
get '/robots.txt' => 'home#robots'
def robots
robots = File.read(Rails.root + "config/robots.#{Rails.env}.txt")
render :text => robots, :layout => false, :content_type => "text/plain"
end
分別在 public/下生成robots.staging.txt, robots.production.txt
就可以做到根据环境控制生产 robots.txt生成了
浏览量
你的网域权重的提升也会因为浏览量的高低有不一样的排名，所以过时的导流进去，让更多用戶喜欢上这个产品能够不断回访网站，会让权重分数慢慢往上爬，這就跟养小孩一样，需要一点时间才会成长。
Google 是会將大量的垃圾链接或不优质的內容降低权重的，所以非常重视网站经营者生成的內容，他们的演算法会一直更新，阻挡那些尝试作弊欺骗权重的网站，最后一点就是认真经营网站喽。
參考資源
