你们公司的官网被搜索引擎收录了吗？
前言
前段时间，我司的官网要改版。老板们手一挥，提出了以下几点需求
- 网站要大气，炫酷，有科技感
- 图片文字要高大上
- 注重SEA、SEO优化，用户查找关键字后，我们公司的网站排名要显示在前列
为此，我们还专门买了一个SEO优化的课程，大张旗鼓的学习了一通。至于效果如何，1个月见分晓
那么如何编写 JavaScript 代码以有利于 SEO 和 SEA 呢？
下面仅展示被被谷歌搜索引擎收录的
SEA、SEO优化
保持好的网页结构
- 使用语义化的 HTML结构
HTML语义化是指使用恰当的HTML标签来描述网页内容的结构和含义，以提高网页的可读性、可访问性和搜索引擎优化。
- header: 网站的页眉部分
- nav: 定义网站的主要导航链接
- main: 定义页面的主要内容区域，
每个页面应该只有一个<main>标签 - section: 定义页面中的独立区块, 例如文章、产品列表等
- article: 定义独立的文章内容，通常包含标题、作者、发布日期等信息
- aside: 定义页面的侧边栏或附属信息区域
- footer: 网站的页脚部分
<header>
<h1>官网</h1>
<nav>
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">关于我们</a></li>
<li><a href="#">联系我们</a></li>
</ul>
</nav>
</header>
<main>
<div>欢迎来到我们的网站</div>
<p>这里是网站的主要内容。</p>
</main>
<section>
<h2>最新文章</h2>
<article>
<h3>文章标题</h3>
<p>文章内容...</p>
</article>
<article>
...
</article>
</section>
<aside>
<h3>最新消息</h3>
<ul>
<li><a href="#">链接1</a></li>
...
</ul>
</aside>
<article>
<h2>消息1</h2>
<p>文章内容...</p>
</article>
<footer>
<p>版权所有 © 2023</p>
<p>联系我们：info@example.com</p>
</footer>
- 提供准确且吸引人的页面标题和描述
准确且简洁的标题和描述，有利于吸引访问者和搜索引擎的注意
- 页面标题: Title
- 页面描述: Meta Description
<head>
<title>精美手工艺品——手工制作的独特艺术品</title>
<meta name="description" content="我们提供精美手工艺品的设计与制作，包括陶瓷、木雕、织物等。每件艺术品都是独一无二的，以精湛的工艺和创造力打动您的心灵。欢迎浏览我们的作品集。">
</head>
标题要小于50个字符，描述要小于150字符
-
在关键位置使用
关键字: 包括标题、段落文本、链接文本和图片的alt属性。- 段落文本: 自然的使用
关键字，有助于搜索引擎收录 - 链接文本: 使用描述性的链接文本，并在其中包含关键字，这有助于搜索引擎理解链接指向的内容
- 图片的
alt属性: 对于每个图像，使用描述性的alt属性来说明图像内容，并在其中包含关键字。这不仅有助于视力障碍用户理解图像，还可以提供关键字相关的图像描述给搜索引擎。
- 段落文本: 自然的使用
<h1>欢迎来到精美手工艺品网店</h1>
<p>我们提供各种精美手工艺品，包括陶瓷、木雕、织物等。每个艺术品都是由我们经验丰富的工匠手工制作而成，展现了精湛的工艺和创造力。</p>
<p>浏览我们的<a href="/products" title="手工艺品产品列表">产品列表</a>，您将发现独特的艺术品，适合作为礼物或收藏。</p>
<img src="product.jpg" alt="陶瓷花瓶 - 手工制作的精美艺术品" />
一个页面要保证有且只有h1标签
使用友好的 URL 结构
使用友好的URL结构是一个重要的优化策略，它可以提升网站的可读性、可维护性和用户体验
- 使用关键字: 在URL中使用关键字，以便用户和搜索引擎可以更好地理解页面的主题和内容, URL中多个关键词使用
连字符字符 "-"进行分隔。 - 结构层次化: 层次化的URL结构来反映内容的结构和关系
- 避免使用参数: 尽量避免在URL中使用过多的参数，特别是使用随机字符串或数字作为参数
- 尽量使用永久链接: 尽可能使用永久链接，避免频繁更改URL
- 尽量保持URL简洁: 避免过长的URL。短连接更易于分享和记忆
<!-- 不友好的URL -->
https://example.com/index.html?category=7&product=12345
https://example.com/qinghua/porcelain
<!-- 友好的URL -->
https://example.com/porcelain/qinghua
https://example.com/blog/friendly-urls
- 重要链接不要用JS
搜索引擎爬虫通常不会执行 JavaScript，并且依赖 JavaScript 的链接可能无法被爬虫正确解析和索引
使用标准的
<a>标签进行跳转，避免使用 JavaScript 跳转
- 使用W3C规范
使用W3C规范是确保你的网页符合Web标准并具有良好可访问性的重要方式
不符合W3C的规范：
- 未闭合的标签
- 未正确嵌套的元素
- 行内元素包裹块状元素
<!-- 未闭合的标签 -->
<p>This is a paragraph with no closing tag.
<!-- 未正确嵌套的元素 -->
<div><p>This paragraph is inside a div but not closed properly.</div></p>
<!-- 行内元素包裹块状元素 -->
<span><p>This paragraph is inside a div but not closed properly.</p></span>
响应式设计和移动优化
Google 现在使用了移动优先索引, 搜索引擎更倾向于优先索引和显示移动友好的网页。
使用响应式设计，使你的网页在各种设备上都能正确显示。
- 响应式设计：确保网页具有响应式设计，能够适应不同设备的屏幕尺寸
- 关注移动友好性：确保网页在移动设备上加载和显示良好
JavaScript使用和加载优化
搜索引擎爬虫通常不会执行 JavaScript，并且在抓取和索引页面时可能会忽略其中的动态内容
-
加载时间优化: 通过
压缩和合并 JavaScript文件，减小文件大小，以及使用异步加载和延迟加载的方式，可以提高网页的加载速度 -
避免使用AJAX技术加载核心内容: 对于核心内容，避免使用 AJAX 或动态加载方式，而是在初始页面加载时就呈现。这样可以确保搜索引擎能够正确抓取和索引核心内容，提高网页的可见性和相关性。
-
减少懒加载、瀑布流、上拉刷新、下载加载、点击更多等互动加载: 这些常见的页面优化方式虽然有利于用户体验。但搜索引擎爬虫不会执行 JavaScript，并且在抓取和索引页面时可能会忽略其中的动态内容。
-
js阻塞后保证页面正常运行: 确保网站在没有 JavaScript 的情况下仍然能够正常运行。这有助于搜索引擎爬虫能够正确索引你的网页内容。
性能和体验优化
- 提高网站加载速度: 搜索引擎和用户都更喜欢快速加载的网页，提高页面的转加载速度，会对搜索引擎排名产生积极影响。
- 优化移动体验: 在移动设备上，用户的粘性和耐心被放大，优化移动体验，减少用户的流失率，会对移动搜索排名产生积极影响。
- 无障碍: 在 Web 开发无障碍性意味着使尽可能多的人能够使用 Web 站点, 增加用户人群的受众，会提高搜索引擎排名
内容更新
- 内容持续更新: 搜索引擎比较喜欢新鲜的内容，如果网站内容长期不更新的话，搜索引擎就会厌烦我们的网站。反之，我们频繁的更新新闻、博客等内容，会大大的提高
- 网页数量尽可能的多： 尽可能的让网页超过15个，
频繁修改或调整网站结构的话就相当于修改了搜索引擎爬取网站的路径，导致网站即使更新再多的内容也难以得到收录
监测
索引
在浏览器中输入 site:你的地址（此方法仅适合谷歌，百度则直接搜索URL地址）
查看是否被索引
- 进入Google Search Console
- 进入URL检测工具。
- 将需要索引的URL粘贴到搜索框中。
- 等待谷歌检测URL。
- 点击“请求编入索引”按钮。
收录
点击网址检查: 如果页面被索引，那么会显示“URL is on Google（URL在谷歌中）”。
如何去收录
但是，请求编入收录索引不太可能解决旧页面的索引问题，并且这只是一个最原始的方式，提交链接不能确保你的URL一定被收录，尤其是百度。
总结
持续的优化和监测是关键，以确保你的策略和实践符合不断变化的搜索引擎算法和用户需求。
期待一个月后见分晓啦！