think in SEO

chapters/chapter-08.md

@@ -1,4 +1,4 @@
-身为一个前端工程师，你居然不懂 SEO 
+前端工程师，必知的三个基本 SEO 技巧
 ===
 
 自打我开始写博客起（大概是在 2011 年左右），便开始研究搜索引擎优化（Search Engine Optimization），这项看似不重要的技术为我的博客带来 了大量的流量。工作之后，我才发现是一门大生意——为了排在搜索引擎靠前的位置，每个网站每天都在不断的送钱给Google、百度 等搜索引擎公司。当我们在 Google、百度上点击一下，首页上的某个推广链接，可能就会为它们带去几十美刀的收入。
@@ -7,15 +7,56 @@
 
 内部 SEO
 
-URL 设计——以 id 作为 URL
+如何设计一个高质量的 URL
 ---
 
-Title Description Keyword
----
+如我的博客的正常 URL 是这样的，https://www.phodal.com/blog/use-jenkinsfile-blue-ocean-visualization-pipeline/，对应的标题是：Jenkins 2.0 里使用 Jenkinsfile 设计更好的 Pipeline
+
+如我的专栏：https://read.douban.com/column/5945187/ 《我的职业是前端工程师》 这真是一个不好记的东西
+
+知乎上 https://zhuanlan.zhihu.com/beafe
+
+这里的 use-jenkinsfile-blue-ocean-visualization-pipeline 就是优化的部分，而为了设计方便，大部分的单页面应用都会做成 /blog/123
+
+这样做并没有啥问题，但是当用户搜索 jenkinsfile 和 pipline 时，劣势就出现了。
+
+而当搜索条件更加复杂时，想搜索一个 100~150 元左右的 移动电源时，不应该是 product/12345678 ，product/mobilebank-range-100-150-city-shenzhen
 
-内链管理
+如果有后台渲染时，数据直接由后台处理：
+
+在前端处理逻辑就会比较复杂，需要用正则去：(\S+)-range-(\d+)-(\d+)-city-(\S+)
+
+![SEO URL](../images/seo-match-example.png)
+
+![ZOL Example](../images/zol-example.png)
+
+高质量的标题：
 ---
 
-Sitemap
+不算太差的标题
+
+ - 我的职业是前端工程师 - 知乎专栏
+
+移动电源 -【美创70-100元移动电源(充电宝)】美创70-100元移动电源(充电宝)报价及图片大全-ZOL中关村在线
+
+【Phodal牌 100-150 元移动电源】Phodal 100- 150 元移动电源 - SITE INFO
+
+![Phodal's COM SEO](../images/phodal-com-seo.png)
+
+Description 和 Keywords
 ---
 
+Keywords 比较常见的作法就是重复杂 100-150 元移动电源之类的，再按用户的搜索习惯
+
+Description 就比较复杂了，如 
+
+> 太平洋电脑网提供100元及以下移动电源大全全面服务信息，包含100元及以下移动电源报价、参数、评测、比较、点评、论坛等，帮您全面了解100元及以下移动电源。
+
+像京东这种的就弱爆了：
+
+![京东 SEO](../images/jd-examples.png)
+
+![百度搜索 Phodal](../images/baidu-phodal.png)
+
+
+

ebook.md

@@ -790,7 +790,7 @@ Chrome 里的开发者工具中的 Network 不仅可以查看页面的加速速
 
 于是乎在这个时候，这些逻辑就被无可避免地放到前台里了。
 
-身为一个前端工程师，你居然不懂 SEO 
+前端工程师，必知的三个基本 SEO 技巧
 ===
 
 自打我开始写博客起（大概是在 2011 年左右），便开始研究搜索引擎优化（Search Engine Optimization），这项看似不重要的技术为我的博客带来 了大量的流量。工作之后，我才发现是一门大生意——为了排在搜索引擎靠前的位置，每个网站每天都在不断的送钱给Google、百度 等搜索引擎公司。当我们在 Google、百度上点击一下，首页上的某个推广链接，可能就会为它们带去几十美刀的收入。
@@ -799,18 +799,59 @@ Chrome 里的开发者工具中的 Network 不仅可以查看页面的加速速
 
 内部 SEO
 
-URL 设计——以 id 作为 URL
+如何设计一个高质量的 URL
 ---
 
-Title Description Keyword
----
+如我的博客的正常 URL 是这样的，https://www.phodal.com/blog/use-jenkinsfile-blue-ocean-visualization-pipeline/，对应的标题是：Jenkins 2.0 里使用 Jenkinsfile 设计更好的 Pipeline
+
+如我的专栏：https://read.douban.com/column/5945187/ 《我的职业是前端工程师》 这真是一个不好记的东西
+
+知乎上 https://zhuanlan.zhihu.com/beafe
+
+这里的 use-jenkinsfile-blue-ocean-visualization-pipeline 就是优化的部分，而为了设计方便，大部分的单页面应用都会做成 /blog/123
+
+这样做并没有啥问题，但是当用户搜索 jenkinsfile 和 pipline 时，劣势就出现了。
+
+而当搜索条件更加复杂时，想搜索一个 100~150 元左右的 移动电源时，不应该是 product/12345678 ，product/mobilebank-range-100-150-city-shenzhen
 
-内链管理
+如果有后台渲染时，数据直接由后台处理：
+
+在前端处理逻辑就会比较复杂，需要用正则去：(\S+)-range-(\d+)-(\d+)-city-(\S+)
+
+![SEO URL](images/seo-match-example.png)
+
+![ZOL Example](images/zol-example.png)
+
+高质量的标题：
 ---
 
-Sitemap
+不算太差的标题
+
+ - 我的职业是前端工程师 - 知乎专栏
+
+移动电源 -【美创70-100元移动电源(充电宝)】美创70-100元移动电源(充电宝)报价及图片大全-ZOL中关村在线
+
+【Phodal牌 100-150 元移动电源】Phodal 100- 150 元移动电源 - SITE INFO
+
+![Phodal's COM SEO](images/phodal-com-seo.png)
+
+Description 和 Keywords
 ---
 
+Keywords 比较常见的作法就是重复杂 100-150 元移动电源之类的，再按用户的搜索习惯
+
+Description 就比较复杂了，如 
+
+> 太平洋电脑网提供100元及以下移动电源大全全面服务信息，包含100元及以下移动电源报价、参数、评测、比较、点评、论坛等，帮您全面了解100元及以下移动电源。
+
+像京东这种的就弱爆了：
+
+![京东 SEO](images/jd-examples.png)
+
+![百度搜索 Phodal](images/baidu-phodal.png)
+
+
+
 
 你应该知道的单页面应用的五要素 
 ===

index.html

@@ -162,11 +162,10 @@ <h1>我的职业是前端工程师</h1>
 <li><a href="#不可避免的前端逻辑表单">不可避免的前端逻辑：表单</a></li>
 </ul></li>
 </ul></li>
-<li><a href="#身为一个前端工程师你居然不懂-seo">身为一个前端工程师，你居然不懂 SEO</a><ul>
-<li><a href="#url-设计以-id-作为-url">URL 设计——以 id 作为 URL</a></li>
-<li><a href="#title-description-keyword">Title Description Keyword</a></li>
-<li><a href="#内链管理">内链管理</a></li>
-<li><a href="#sitemap">Sitemap</a></li>
+<li><a href="#前端工程师必知的三个基本-seo-技巧">前端工程师，必知的三个基本 SEO 技巧</a><ul>
+<li><a href="#如何设计一个高质量的-url">如何设计一个高质量的 URL</a></li>
+<li><a href="#高质量的标题">高质量的标题：</a></li>
+<li><a href="#description-和-keywords">Description 和 Keywords</a></li>
 </ul></li>
 <li><a href="#你应该知道的单页面应用的五要素">你应该知道的单页面应用的五要素</a><ul>
 <li><a href="#router页面跳转">Router：页面跳转</a></li>
@@ -708,14 +707,48 @@ <h3 id="不可避免的前端逻辑表单">不可避免的前端逻辑：表单<
 <p>前端在用户输入的过程中就需要实时地检查，是否带有特殊符号、值是否是在允许的范围内、是不是符合相应的规范等等。而不是等用户填写完内容并提交后，再由服务端来告诉用户说，“你的用户名不符合规范”。</p>
 <p>服务在收到前端收到的数据后，不管前端有没有进行验证，都应该按后台的逻辑进行验证。</p>
 <p>于是乎在这个时候，这些逻辑就被无可避免地放到前台里了。</p>
-<h1 id="身为一个前端工程师你居然不懂-seo">身为一个前端工程师，你居然不懂 SEO</h1>
+<h1 id="前端工程师必知的三个基本-seo-技巧">前端工程师，必知的三个基本 SEO 技巧</h1>
 <p>自打我开始写博客起（大概是在 2011 年左右），便开始研究搜索引擎优化（Search Engine Optimization），这项看似不重要的技术为我的博客带来 了大量的流量。工作之后，我才发现是一门大生意——为了排在搜索引擎靠前的位置，每个网站每天都在不断的送钱给Google、百度 等搜索引擎公司。当我们在 Google、百度上点击一下，首页上的某个推广链接，可能就会为它们带去几十美刀的收入。</p>
 <p>要是能竞争到此，那说明这个行业相当的赚钱。同时，处在这个行业的人呐也越来越不赚钱了——他们都把钱交给了科技公司了。</p>
 <p>内部 SEO</p>
-<h2 id="url-设计以-id-作为-url">URL 设计——以 id 作为 URL</h2>
-<h2 id="title-description-keyword">Title Description Keyword</h2>
-<h2 id="内链管理">内链管理</h2>
-<h2 id="sitemap">Sitemap</h2>
+<h2 id="如何设计一个高质量的-url">如何设计一个高质量的 URL</h2>
+<p>如我的博客的正常 URL 是这样的，https://www.phodal.com/blog/use-jenkinsfile-blue-ocean-visualization-pipeline/，对应的标题是：Jenkins 2.0 里使用 Jenkinsfile 设计更好的 Pipeline</p>
+<p>如我的专栏：https://read.douban.com/column/5945187/ 《我的职业是前端工程师》 这真是一个不好记的东西</p>
+<p>知乎上 https://zhuanlan.zhihu.com/beafe</p>
+<p>这里的 use-jenkinsfile-blue-ocean-visualization-pipeline 就是优化的部分，而为了设计方便，大部分的单页面应用都会做成 /blog/123</p>
+<p>这样做并没有啥问题，但是当用户搜索 jenkinsfile 和 pipline 时，劣势就出现了。</p>
+<p>而当搜索条件更加复杂时，想搜索一个 100~150 元左右的 移动电源时，不应该是 product/12345678 ，product/mobilebank-range-100-150-city-shenzhen</p>
+<p>如果有后台渲染时，数据直接由后台处理：</p>
+<p>在前端处理逻辑就会比较复杂，需要用正则去：(+)-range-(+)-(+)-city-(+)</p>
+<figure>
+<img src="images/seo-match-example.png" alt="SEO URL" /><figcaption>SEO URL</figcaption>
+</figure>
+<figure>
+<img src="images/zol-example.png" alt="ZOL Example" /><figcaption>ZOL Example</figcaption>
+</figure>
+<h2 id="高质量的标题">高质量的标题：</h2>
+<p>不算太差的标题</p>
+<ul>
+<li>我的职业是前端工程师 - 知乎专栏</li>
+</ul>
+<p>移动电源 -【美创70-100元移动电源(充电宝)】美创70-100元移动电源(充电宝)报价及图片大全-ZOL中关村在线</p>
+<p>【Phodal牌 100-150 元移动电源】Phodal 100- 150 元移动电源 - SITE INFO</p>
+<figure>
+<img src="images/phodal-com-seo.png" alt="Phodal’s COM SEO" /><figcaption>Phodal’s COM SEO</figcaption>
+</figure>
+<h2 id="description-和-keywords">Description 和 Keywords</h2>
+<p>Keywords 比较常见的作法就是重复杂 100-150 元移动电源之类的，再按用户的搜索习惯</p>
+<p>Description 就比较复杂了，如</p>
+<blockquote>
+<p>太平洋电脑网提供100元及以下移动电源大全全面服务信息，包含100元及以下移动电源报价、参数、评测、比较、点评、论坛等，帮您全面了解100元及以下移动电源。</p>
+</blockquote>
+<p>像京东这种的就弱爆了：</p>
+<figure>
+<img src="images/jd-examples.png" alt="京东 SEO" /><figcaption>京东 SEO</figcaption>
+</figure>
+<figure>
+<img src="images/baidu-phodal.png" alt="百度搜索 Phodal" /><figcaption>百度搜索 Phodal</figcaption>
+</figure>
 <h1 id="你应该知道的单页面应用的五要素">你应该知道的单页面应用的五要素</h1>
 <h2 id="router页面跳转">Router：页面跳转</h2>
 <p>URL 设计 列表，详细</p>