关于前端:独立网站SEO之路

对于 SEO

搜索引擎优化（SEO）通常指对网站的局部内容进行轻微的批改。独自来看，这些批改是十分渺小的，但与其余优化联合后，可能会对网站的用户体验以及再天然搜寻
后果中的体现产生很显著的影响。SEO旨在帮忙搜索引擎理解并发现相干网站内容。

简略术语

• 索引- 搜索引擎会将其晓得的所有网页存储在其索引中
• 抓取- 寻找新网页或更新后的网页的过程
• 抓取工具- 一种从网络中抓取网页并将网页编入索引的自动化软件

• Googlebot-Google 抓取工具的通用名称

  如何确认网站是否在 Google 的索引中？

• 对指标网站执行 site: 搜寻，如果可能看到相干后果，则表明网站在索引中

  site:ucalendar.cn

• 造成未能抓取到后果可能的起因

  • 此网站与其余网站严密关联
  • 是刚刚推出的新网站，Google 未来得及抓取
  • 网站设计导致 Google 难以抓取
  • Google 在抓取网站是收到了谬误的信息
  • 相干策略阻止了 Google 抓取网站

如何让指标网站在 Google 搜寻中显示

通常无需任何操作，只需将网站公布到网网络上即可. 理解抓取过程

帮忙 Google 找到站点内容

提交站点地图. 站点地图是网站上的一种文件。可告知搜索引擎网站上新增了哪些网页
或者有哪些网页进行了更改。同时 Google 也会通过其余网页上的连贯找到你的网站。理解网站推广。

阻止 Google 抓取局部网页

对于无关信息，能够应用 robots.txt 阻止不必要的抓取；robots.txt会通知搜索引擎是否能够拜访该网站并抓取网站内容

// 通知 google 禁止爬取 img 和 assets 文件夹下的内容

User-agent: googlebot
Disallow: /img/
Disallow: /assets/

SEO 相干措施

• 创立独特精确的网页题目。title会通知用户和搜索引擎特定网页的主题是什么。

  <title>UCalendar、日历、日程、你的日历 </title>

• 应用 meta 进行标记。能够让搜索引擎理解该网页的大抵内容。网页的题目能够是几个词或一句话，而网页的 meta 标记能够是一两个句子甚至一小段话。

<meta name="description" content="UCalendar, 让生存更简略，让工作更轻松; 行程安顿、出行打算、工作总结的好帮手; 作者林 Round;">

• 增加结构化数据标记。结构化数据是能够增加到网站网页中的代码，用于想搜索引擎形容内容，以便搜索引擎更好的理解网页上的信息。

  {
  "@context": "https://ucalendar.cn/",
    "@type": "日历",
    "url": "https://ucalendar.cn/",
    "logo": "https://ucalendar.cn/img/UCalendar.png"
  }

• 在网站 url 中应用字词

• 为每个网页提供仅一种拜访网址。避免将不同的用户链接到不同的网页中；如果发现用户通过多个网址拜访雷同的内容，能够设置一个非首选网址到主导网址的 301 重定向。如果无奈重定向，能够应用rel="canonical"
  的 link 元素；

  <link rel="canonical" href="https://ucalendar.cn/" />

让网站更加的实用

• 提供文笔优良、易于了解的内容
• 合理安排内容构造，让用户分明的领导内容咱不提的起止地位
• 建设陈腐独特的内容，吸引新的用户
• 针对用户而非搜索引擎来优化内容
• 以造就用户信赖为指标
• 彰显专业性和权威性
• 防止投放无关广告
• 投放广告后，关注与应用广告拦截器的用户之间的互动
• 定位文字提供无关链接到的网页的根本阐明
• 尽量应用具备描述性的简短文字
• 设置链接格局，进步链接的辨认度。从而避免用户没有看到或意外的点击，从而升高内容的实用性

• 关注链接时，网站名誉之间的影响。如果应用第三方软件来丰盛网站的体验及吸引用户，
  查看该网站是否会蕴含不想放到本人网站上的链接。如果无奈从中移除某些垃圾链接，能够应用 nofollow 进行跟踪这些链接，如果是本人为本人提供的性能或内容的链接，务必应用 nofollow；

  <a href="https://www.example.com" rel="nofollow"> 无关链接 </a>

• 如果不心愿搜索引擎跟踪网页中的所有链接，能够在网页的 head 标签中增加以下内容：

  <meta name="robots" content="nofollow">

• 如果不违心本人的网站为别的网站背书，将 nofollow 增加到对应的链接即可；

• 优化图片

  • 应用 img 或picture元素，语义标记有助于抓取工具并解决图片；针对不同屏幕尺寸为自适应图片指定多个选项；
  • 应用 loading=lazy 属性进步用户的网页加载速度
  • 应用 alt 属性提供文件名或阐明
  • 应用图片作为链接时，提供相干的文本阐明
  • 图片站点地图可提供更多的与网站无关的图片信息

构建挪动设施网站

• 智能手机
• 平板电脑
• 多媒体手机。大多数带有 3g 性能的非智能手机

• 非智能手机

  抉择挪动策略

• 自适应设计 举荐 。应用 meta name=viewport 标记通知浏览器如何调整内容。

  通过同一网址提供雷同的 HTML 代码，不思考用户所应用的设施。这是最容易实现和保护的一种设计模式

• 动静提供内容。

  无论用户应用何种设施，都应用雷同的 网址 。这种配置依赖user-agent 嗅探和 Vary:user-agentHTTP
  响应头来向不同的设施提供不同版本的 HTML

• 独自的网站。能够通过向网页增加蕴含 rel="canonical" 和 rel="alternate" 元素的 <link> 标记，指明网址之间的关系

  利用独自的网站向每一种设施提供不同的 html。与动静提供内容一样，依赖 user-agent 和vary http 标头将用户重定向到适宜设施的相应版本

• 对于具备大量动态资源（博文或商品页）的网站，思考应用 AMP 实现动态内容

搜寻后果剖析

• 理解 Googlebot 无奈抓取网站的那些局部
• 测试及提交站点地图
• 剖析或生成 robots.txt 文件
• 移除 Googlebot 曾经抓取的网址
• 指定首选网域
• 找出 title 和description meta标记相干的问题
• 理解 Google 看到的网页外观

• 剖析网站用户行为

  • 理解用户如何找到你的网站以及在网站上的行为
  • 发现网站上最受欢迎的内容
  • 掂量对网站所做的优化带来的影响，例如更改 title 和description meta 标记是否进步了搜索引擎带来的流量