结合运营角度的前端SEO实现
先了解一下运营角度的seo，对前端同学做seo，会有很大帮助。会更好的理解seo具体要做什么，为什么做
运营角度的seo
- 选准关键词
- 比如用户搜 “安神茶” ，这个就是关键词
- 创建内容
- 需要研究对应关键词下，排名靠前的网站的内容。研究论点，添加哪些独有的理论点。哪些图片视频等媒体资源，可以是独有的，自己加
- 内容的SEO优化
- 和代码靠近一点：TDK（title，description，keyword），内链（
<a href="...">），友情外链（高权重网站背书）
- 和代码靠近一点：TDK（title，description，keyword），内链（
- 分享你的内容，获取初期流量
- 社交媒体社群推广，邮件，付费广告
- 根据数据进行后期优化
- 优化以上各个环节
前端开发角度的发现：
- 我们可以发现一个很大的特点，做SEO是需要经常“变”的。所以对我们开发的挑战是，我们需要做出一个可以让运营很容易去配置的一个CMS管理平台。（否则得经常被运营找，并且经常发布上线，很麻烦的，也容易有上线风险。还不实时）
前端角度的seo
首先是了解seo的游戏规则。既然是在谷歌上玩，那肯定得看谷歌定的游戏规则：（需翻墙） developers.google.com/search?hl=z…
官方文档内容较多，我提几个常见的吧
1. 如何确定您的网站是否在 Google 的索引中？
对您网站的首页网址执行 site: 搜索。如果您能看到相关结果，则表明您的网站在索引中。例如，搜索 site:wikipedia.org 会返回这些结果。
2. 如果您的网站不在 Google 的索引中
造成抓取工具遗漏网站的常见原因如下：
- 此网站未与网络上的其他网站紧密关联（外链）
- 您刚刚推出新的网站，Google 还没来得及抓取
- 网站的设计致使 Google 难以有效抓取其中的内容（比如js延迟返回内容，iframe）
- Google 在尝试抓取网站时收到了错误消息（网站本身错误）
- 您的政策阻止 Google 抓取网站
3. 告诉 Google 您不希望抓取哪些网页？
写在 robots.txt
- 如果您只是希望网页不显示在 Google 中，并不介意任何用户会通过链接访问该网页，则可使用
noindex标记。为了确保绝对安全，请使用合适的授权方法（例如需要用户密码才能访问）或将网页从网站上彻底移除。
4. 用google search console看seo效果
（简称gsc，相当于游戏管理员后台，可以看到你在google上的网站，被多少人搜索。对应搜索关键词下，排名在第几）
- 该工具可让您确切地了解 Google 所看到的内容以及它会如何呈现这些内容，有助于您找出并修复网站上存在的许多索引编制问题
5. TDK + 结构化数据标记（帮助 Google（和用户）了解您的内容）
-
T：title
<title>元素可告诉用户和搜索引擎特定网页的主题是什么。请将<title>元素放在 HTML 文档的<head>元素中，并为您网站上的每个网页创建独一无二的标题文字。如果您的文档会显示在搜索结果页中，则
<title>元素的内容可能会显示为搜索结果的标题链接。<html> <head> <title>Brandon's Baseball Cards - Buy Cards, Baseball News, Card Prices</title> <meta name="description" content="Brandon's Baseball Cards provides a large selection of vintage and modern baseball cards for sale. We also offer daily baseball news and events."> </head> <body> ...title需要注意的点：
- 简短和准确（谷歌喜欢效率高的回答，避免冗余，避免和网页无关的内容）
- 独一无二（谷歌不喜欢重复的内容，希望结果多元化）
-
D：description 描述。 网页的元描述标记可让 Google 和其他搜索引擎了解该网页的大致内容。
网页的标题title可以是几个词或一个短语，而网页的元描述description标记则可以是一两个句子甚至是一小段话。与
<title>元素一样，元描述标记也位于 HTML 文档的<head>元素中。<html> <head> <title>Brandon's Baseball Cards - Buy Cards, Baseball News, Card Prices</title> <meta name="description" content="Brandon's Baseball Cards provides a large selection of vintage and modern baseball cards for sale. We also offer daily baseball news and events."> </head> <body> ...元描述标记很重要，因为 Google 可能会在搜索结果中将其用作网页的摘要。
- 请注意，是“可能”，因为如果网页中有一段可见文本能很好地匹配用户查询，那么 Google 也可能会选择使用这段文本。最好为每个网页添加元描述标记，以防 Google 找不到要在摘要中使用的恰当文本。详细了解如何创建优质元描述。
-
K：keyword 关键字，用户搜索的关键字
- title和description都是要围绕keyword来的。
写TDK的建议：
- 简短和准确
- 独一无二。 为每个网页使用不同的title和description
- 想象您在编写大纲（为内容分清主次，用h标签。重点用
<em>和<strong>等）
除了TDK外，还有 结构化数据标记
- 作用：可以让搜索结果，显示的更加丰富
- 详细介绍的链接 developers.google.com/search/docs…
6. 内容、结构的优化
谷歌在这一块内容中，写了很多，我在此就列几项。更加详细的，可以移步官网原文
结构优化
- 合理规划导航结构（路由）
- 使用面包屑导航列表（链接都用
<a>标签，用js事件的话，seo是拿不到的） - 为用户创建简洁的导航页（menu）
- 简洁流畅的层级结构
- 使用文字进行导航
- 为用户创建导航页，为搜索引擎创建站点地图
- 显示实用的 404 页面
- 语义化且简洁的url
下面的网址可能会造成困惑且不易于使用： https://www.brandonsbaseballcards.com/folder1/22447478/x2/14032015.html 如果您的网址有明确的含义，则该网址在不同上下文中都可能会更实用且更易于理解。 https://www.brandonsbaseballcards.com/article/ten-rarest-baseball-cards.html
内容优化
- 让网站有趣实用
- 了解读者的需求（并满足其需求）
- 针对用户而非搜索引擎来优化内容
- 以培养用户信任为目标（如果用户认为您的网站可靠，就会愿意访问）
- 彰显专业性和权威性
- 避免投放会分散用户注意力的广告
- 合理使用链接（撰写优质链接文字）
7. 内外链
友情外链
在网站内的链接（简称内链）也会网站的声誉而获益。所以提升网站排名的一个点是，可以让有名气的网站里面加入你的网站链接，为你的网站背书（友情外链）
链接都用<a>标签，用js事件的话，seo是拿不到的
站点地图 site map
site map主要的作用是：告诉google，哪些网页和文件需要去爬。还会提供与这些文件有关的重要信息。例如，网页上次更新的时间和网页是否有任何备用的语言版本。
这块可以参考官方文档 developers.google.com/search/docs…
原则是，最好做成配置化。因为，你的网站很有可能会经常变化
使用 nofollow 来打击垃圾评论
如需告知 Google 不要跟踪链接到的网页或链接到的网页不能因您网页的声誉而获益，请将链接的 rel 属性值设为 nofollow 或 ugc。如需让搜索引擎不跟踪某个链接，需要在该链接的锚标记中添加 rel="nofollow" 或更具体的属性，例如 ugc，如下所示：
<a href="http://www.example.com" rel="nofollow" >Anchor text here</a>
或：
<a href="http://www.example.com" rel="ugc" >Anchor text here</a>
什么时候适合使用此标记？
- 如果您网站上的博客启用了公开评论功能，那么这些评论中的链接可能会将您的声誉传递给某些您可能不愿意为其背书的网页。网页上的博客评论区域很容易出现垃圾评论。不跟踪该区域中用户添加的链接可确保您的网页来之不易的声誉不被垃圾网站沾光。
8. 优化图片
-
使用 HTML
<img>或<picture>元素- 避免css background-image图片
-
使用
alt属性- 为图片提供说明性文件名和
alt属性说明。alt属性使您能够为图片指定替代文本，在图片由于某种原因不能显示时起到救场的作用。 - 如果您将图片用作链接，则该图片的替代文本会等同于文字链接的定位文字。
- 但是，如果文字链接可以起到相同的作用，我们建议不要在网站的导航中使用太多图片作为链接。最后，优化图片文件名和替代文本可使图片搜索项目（如 Google 图片）更好地理解您的图片。
- 为图片提供说明性文件名和
-
文件名尽量语义化
-
图片站点地图
图片站点地图可为 Google 提供更多与在您网站上找到的图片有关的信息。这样能够提高您的图片出现在 Google 图片搜索结果中的几率。该文件的结构与您网页的 XML 站点地图文件类似。
9. 构建适合移动设备的网站
当今世界由移动设备主宰。绝大多数人都是在移动设备上使用 Google 进行搜索。
无论您选择使用哪种配置来设置移动网站，都需要注意以下几点：
-
如果您动态提供内容或拥有单独的移动网站，当网页采用适合移动设备的格式时（或当网页拥有所用格式适合移动设备的对等网页时），请告知 Google。这有助于 Google 在搜索结果中准确地向移动设备搜索用户提供内容。
-
如果您使用自适应设计，请使用
meta name="viewport"标记告诉浏览器如何调整内容。如果您使用的是动态提供内容功能，请使用 Vary HTTP 标头，根据用户代理指示您所做的更改。如果您使用单独的网址，则可以通过向网页添加包含rel="canonical"和rel="alternate"元素的<link>标记，指明两个网址之间的关系。 -
避免出现会阻碍移动设备访问者访问网页的常见错误，比如存在无法播放的视频。
-
如果移动版网页无法提供令人满意的搜索体验，那么在移动搜索结果中的排名便会下降，或是在移动搜索结果中显示时伴有警告。这类情况包括但不限于，移动设备上会妨碍用户体验的全页插页式广告。
-
在所有设备上提供所有功能。移动用户希望网站在移动设备上提供和在其他设备上一样的功能（如发布评论和结帐）及内容。除了文字内容，确保所有重要图片和视频都已经嵌入移动版本，并且用户能通过移动设备访问。对于搜索引擎，在所有版本的网页上提供所有结构化数据和其他元数据（例如标题、说明、link 元素和其他元标记）。
-
确保移动网站上也包含桌面网站上所有的结构化数据、图片、视频和元数据。
最佳实践
- 使用移动设备适合性测试测试您的移动版网页，看看 Google 是否认为您的网站适合在移动设备上浏览。
- 如果您的移动版网页有单独的网址，请务必对移动版网址和桌面版网址都进行测试，以确保 Google 可以识别并抓取相关重定向。
10. 推广你的网站
这部分偏运营，但也是非常重要的
11. 分析搜索效果和用户行为
这部分偏运营，但也是非常重要的
分析搜索效果
包括 Google 在内的主流搜索引擎为网站所有者提供了各种工具，可用于分析网站在搜索引擎中的效果。Google 的工具是 Search Console。
Search Console 可提供以下两类重要信息：Google 能够找到我的内容吗？我的网站在 Google 搜索结果中的效果如何？
使用 Search Console 并不会让您的网站获得优先待遇，但它可以帮助您发现问题，如果解决了这些问题，则有助于提高您的网站在搜索结果中的排名。
借助该服务，网站所有者可以：
- 了解 Googlebot 无法抓取网站的哪些部分
- 测试及提交站点地图
- 分析或生成 robots.txt 文件
- 移除 Googlebot 已经抓取的网址
- 指定首选网域
- 找出
title和description元标记中的问题 - 了解用来转向网站的热门搜索
- 了解 Google 看到的网页外观如何
- 接收质量指南违反通知，并请求重新审核网站
微软的 Bing 网站站长工具也为网站所有者提供了工具。
分析网站上的用户行为
如果您已经使用 Google Search Console 或其他服务改进了网站的抓取和索引编制效果，那么您可能想了解关于自己的网站流量的信息。Google Analytics（分析）等网站分析程序是了解这一点的实用来源。您可以使用这些网站分析程序来：
- 洞悉用户如何找到您的网站以及在您的网站上有何行为
- 发现您网站上最受欢迎的内容
- 衡量对网站所做的优化带来的影响，例如，更改
title和description元标记是否提高了搜索引擎带来的流量？
对于高级用户，分析包提供的信息与您的服务器日志文件的数据相结合，可以提供更加全面的关于访问者如何与文档互动的信息（例如，搜索者可能用来查找您网站的其他关键字）。
总结一下
SEO的核心主要还是内容。内容的表现会有一些规范，这些规范就像游戏规则，玩游戏前，需要先充分了解游戏规则。
- 另外一些开发习惯可能也要适配SEO，比如a标签去做路由跳转等等
另外非常重要的一点，SEO肯定是要经常性调整的。所以最好是要做成内容配置化（CMS平台），让运营可以直接配置内容
码字不易，点赞鼓励！
