谷歌开始推出其移动优先索引已经有一段时间了。
首次宣布这一消息时,SEO 专业人士正四处奔波,以确保他们的网站符合 Google 的核心 Web Vitals 和最佳实践移动开发指南。
针对移动网络进行优化是 SEO 中一个完全全面的子领域,需要专家级知识和自己的最佳实践才能取得成功。
如此之多,以至于许多行业都需要在移动设备上全面、高质量地实施其网站。并不是每个人都能做到。
在许多情况下,有时大多数网站未能实现其合规目标。
显然,这是一个错误,因为移动设计是我们数字社会如此普遍的一部分:
- 96% 的 18-29 岁美国人拥有智能手机。
- 截至 2020 年,全球有超过 36 亿用户使用智能手机设备。到2023年将达到43亿。
- 2020 年,移动用户将 90% 的时间花在应用程序上,而不是移动浏览器。
- 谷歌在 2021 年占据美国移动搜索市场份额的 93.22%。
- Google 上的初始移动搜索结果往往会达到 26.9% 的自然点击率(点击率)。
为了利用绝对最佳的在线状态,您必须针对许多不同类型的设备和屏幕分辨率进行优化。不仅适用于台式机。
现在,谷歌正在推出他们的桌面页面体验更新。但是该更新超出了本文的范围,尽管它确实影响了整体的页面体验。
要实现绝对最佳的移动实施,重要的是要确保您创建的移动网站符合这些最佳实践,并且这也为增加您的 Core Web Vitals 数量创造了机会。
通过使用响应式设计而不是 m-dot 子域,观察图像创建和优化的最佳实践,并观察压缩和缩小,您可以实现一个高质量的移动网站,让尽可能多的观众接触。
这就是您的移动网站将取得成功的地方。
1. 确保桌面和移动设备上的所有内容都相同
这种最佳实践背后的想法是避免重复内容和伪装指控。
为了安全起见,请始终确保桌面版网站上的所有内容与移动版网站上的内容相同。
用于确保发生这种情况的最佳技术之一是响应式设计。
对于那些不知道的人来说,响应式设计涉及创建一个样式表,该样式表使用“媒体查询”在各种平台和设备之间自动转换设计。
如果您想尽可能提高速度并使您的设计精益求精,请考虑研究 CSS sprite 以减少服务器端请求。
2. 首屏并没有完全消失
重要的是要记住,在移动环境中,事物无休止地滚动,首屏并没有完全消失。
在移动设计上,至少有一些文本内容在首屏上方仍然是可取的,以向某人展示有滚动的理由。
希望看到您提供的产品的心理好处和愿望并未完全消失,因此您仍然需要在许多不同的移动设备上对此进行一些优化。
3. 使用“自上而下”的开发方法
“自上而下”的开发方法意味着您从头到尾考虑设计中每个决策的所有潜在后果。
您首先开发移动设备,而不是桌面设备,然后再进行移动设计。这种开发方法是理想的,因为您不会在最终设计中引入问题。
这是一个示例:您创建了一个桌面网站。大约四分之三的过程中,您决定要在此基础上创建一个移动网站。
您创建模型。但是,在对模型进行编码并在整个过渡过程中移动之后,您会在这里发现一个错误。你在那里发现了一个错误。然后你在那里发现了一个错误。这是因为自下而上的方法不起作用并导致范围蔓延。
这种现象会在最后一刻突然出现无法预见的问题,从而导致无法预见的错误和项目最初确定时未提供的小时数增加。
事实是,如果从一开始就直接考虑移动响应式设计的自上而下的方法,那么这些错误和需要解决的事情最终不会出现,从而导致这个可怕的问题。
4. 不要只关注移动消费者
随着移动设备和桌面设备的融合,这些平台用户的目标和愿望也随之而来。
当您专注于用户希望基于平台实现的目标时,您将创建一种更有效地通过您的网站吸引客户的整体方法。
无论用户是购买产品还是对您提供的服务进行研究,用户目标和客户获取业务的结合将继续存在。
因此,特别关注这些理想和价值观的必要性将变得不那么重要。
请注意,同样重要的是,随着移动和桌面的继续融合,它的必要性也有所降低。
5. 使用响应式设计技术
独立的 m-dot 网站 (m.example.com) 的时代已经结束。
在移动优先时代使用这样的实现没有可能的可赎回理由。
结构可能非常混乱,如果没有正确优化,多个 URL 会产生重复的内容问题。
有许多技术可用于确保完成有效的转换,但除此之外,随着新技术的出现,m-dot 实现已经走上了渡渡鸟的道路。
今天,理想的实现涉及响应式设计。这些设计使用所谓的媒体查询来定义设计将支持的显示分辨率。
每个单独的解决方案都是设计中的“断点”,或响应式设计从一个解决方案转换到下一个解决方案的点。
使用这种结构的好处是您不会遇到在 m-dot 实现中遇到的重复内容问题。
此外,您的移动实施将采用最新技术。
6. 考虑“代码”而不是“无处不在的图像”来提高网站速度
你真的需要使用双色背景作为 2 像素宽 x 1200 像素高的重复背景吗?
如果您不这样做,并且您可以对其进行编码,请改为对其进行编码。
虽然如此小的东西不会对网站速度产生重大影响,但优化可以在完成时加起来。
下次您执行站点审核或以其他方式创建网站时,请想一想:“我真的需要此图像还是可以简单地对其进行编码?”
如果确实不需要图像,则对对象进行编码可以帮助以指数方式提高站点速度,尤其是利用过多图形的现场设计。
7. 为移动设备定制 WordPress
有许多可用于 WordPress 的插件。
如此之多,以至于有些甚至提供了提高移动兼容性的功能。
最有用的插件是 Duda Mobile、W3 Total Cache,以及用于缩小 HTML 和 CSS 的插件。
8. 不要使用侵入性的插页式广告来销售您的产品
是的。我们知道。你的产品是为这个星球增光添彩的最伟大、最棒的东西。这就是为什么我们可能会在购买之前访问您的网站并对其进行研究。
但是,我们不需要有侵入性的广告来阻止我们在您的网站上的活动,从而在销售中给我们带来麻烦。
在可能的情况下,将侵入性插页式广告保持在最低限度,并将广告保持在底部或侧面,并可选择点击广告并至少将其删除。
需要注意的是,谷歌确实会惩罚侵入性插页式广告。
值得阅读他们的开发人员指南以及他们关于这个问题的网站管理员指南,以及他们关于这个主题的博客文章。
9. 在多个操作系统和显示系统上检查您的站点
任何 SEO 都应该知道如何识别网站现有实施中的弱点,包括在各种显示器和设备上发现问题的位置和方法。
您想在多个操作系统以及多个显示设备上检查您的站点。这样做可确保您的网站与尽可能广泛的显示器和平台兼容。
但是,如果您买不起一千台设备来检查它们怎么办?
这一切都归结为一些应用程序。是的!可以使用多个应用程序检查这些类型的问题。
谷歌的 Web 开发者 Chrome 扩展
如果您的预算有限,使用 Google 的 Web Developer Chrome 扩展程序可以帮助您检查您的网站在许多不同的屏幕尺寸和分辨率下的外观。
它还提供了通过不同的设备方向查看您的站点的外观、触摸输入如何通过模拟进行交互等等的能力。
也可以使用他们的调试工具来检查站点的代码是否存在问题。
浏览器堆栈
BrowserStack.com 是一个很好的工具,可以在许多不同的浏览器、操作系统和显示分辨率上进行测试。他们还有一个 Google Chrome 扩展程序,您可以利用它来实现此目的。
您可以在 2,000 多种真实设备、浏览器和操作系统上测试任何网站。
通过拥有付费帐户,您可以无限制地访问他们的浏览器扩展以进行测试。
跨浏览器测试
CrossBrowserTesting.com 是 BrowserStack 的替代品,可用于测试浏览器和设备。
提供超过 1,500 种浏览器和平台进行测试,其产品供应不乏您能做的。
他们的工具可以进行屏幕截图比较,并且能够模拟您的网站在真实设备上的行为方式。
10. 遵循移动视频最佳实践
是的,有移动视频 SEO 最佳实践!谷歌仍然需要在页面上嵌入一些信号,以便其搜索引擎更好地理解该页面上的视频。
来自 Search Engine Journal 自己的 Matt Southern 的这篇文章详细介绍了 Google 推荐的五种视频 SEO 最佳实践。
页面文本、推荐链接、结构化数据和视频文件等内容很重要。
在制作视频时,您还需要注意其他事项
例如,您希望确保公众可以访问您的视频。这意味着确保您的 YouTube 隐私设置设置为公开,并且您应该有一个包含该视频的 Google 可访问网页。
对于结构化数据,建议使用 Schema.org 上的 VideoObject 数据类型。
Google 建议使用以下移动视频最佳做法来实现完美的移动视频:
- 使用带有 div 根元素、视频媒体元素和专用于视频控件的 div 子元素的自定义控件。
- 使用播放/暂停视频按钮。
- 确保用户可以向后和向前搜索。
- 他们对移动视频的全面技术实施是首屈一指的,并逐步引导您完成整个过程。
正如谷歌所说:
“如果用户访问的主要目的是观看视频,那么这种用户体验必须变得身临其境并重新吸引人。”
除了显而易见的,其他移动视频 SEO 最佳实践包括:
让 Google 尽可能轻松地实际找到您的视频。这表示:
- 使用视频站点地图:如果您不提交视频站点地图,Google 可能无法直接找到您的视频。视频站点地图使您可以更轻松地在 Google Search Console 中提交此站点地图,从而使 Google 更容易抓取您的视频并可能将其编入索引。
- 不要使用复杂的用户操作或 URL 片段:如果这些用于加载您的视频,Google 可能根本找不到您的视频,因为您页面上的这些内容太复杂,Google 无法理解。
- 使用易于识别的 HTML 标记:一些有效的标记包括视频、iframe、对象或嵌入。当视频嵌入到常见标签中时,Google 更容易识别这些视频。
- 确保您的视频实际上可以被编入索引。它发生了:有时有人可能会更改 robots.txt 文件,阻止视频文件被抓取(这不是你自己的过错……希望如此)。如果您的视频已被编入索引,而现在突然没有了,则值得查看您的 robots.txt 文件以确保它们没有被阻止。
- 使用 Google 支持的缩略图格式:您还需要遵循上述 Google Web 开发人员文档中的缩略图最佳做法
移动视频搜索引擎优化并不总是像人们想象的那么容易。
虽然不需要检查每个框,但如果不检查,有些事情可能会对您的移动视频抓取和索引产生不利影响。
11. 使用 Schema.org 结构化数据
Schema.org 结构化数据不仅对于识别您网站上具有搜索引擎需要查看的特殊结构化信息的页面很重要,而且当移动索引充分发挥作用时,预计会看到对 Schema 的依赖增加。
这是一种理解信息的简洁、简单的方法,然后可以将其转换为移动搜索结果中的丰富片段。
但是,无论哪种方式,作者认为架构结构化数据甚至可以在桌面实现中使用,因为它可以帮助您根据目标关键字出现在丰富的摘要结果中。正确实施后,这有助于提高您网站的知名度。
12. 不要阻止支持 JavaScript、CSS 或图像之类的脚本
在为任何平台(无论是桌面还是移动设备)开发网站时,这应该是常识,但有些人仍然这样做。
确保您的移动设计的支持脚本不被阻止很重要,因为这种阻止可能导致诸如移动软 404 之类的问题。它还可能导致桌面 404。
但是,如果您阻止这些文件被 Google 抓取,他们就无法抓取这些文件来查看您的网站是否正常运行。
当他们不能这样做时,这可能会导致排名较低,因为他们无法完全了解您的网站。
13. 图像压缩与优化
对于移动网络,图像优化是正确的关键组成部分。这意味着您必须确保在所有可能的分辨率上针对所有图像尺寸正确优化图像。
不可能创建一个图像并确保它在任何地方都可见。嗯,你可以。但它会在它不是为它制定的分辨率上看起来扭曲。
相反,建议使用整体 SEO 最佳实践并确保您创建的图像在每种分辨率下都具有高质量,但加载速度也很快。
这就是为什么 Google 建议使用几种响应式设计最佳实践来优化移动平台的图像的原因。他们推荐以下内容:
- 使用相对图像尺寸。如果您使用相对图像大小,最终会阻止它们溢出包含图像的容器标签。
- 使用内嵌图像。通过确保使用内联图像来减少文件请求,可以降低页面速度。这些应该用于可能不会在您网站的其他地方使用的页面。
- 对于更高 DPI 的设备,请对图像使用 srcset 属性。这有助于您为不同的设备添加多个图像文件。
- 如果您正在做电子商务 SEO,您可能希望使您的产品图像可扩展。客户可能希望放大他们可能在其设备上购买的图像,以便更好地查看。因此,提供此选项是有意义的。
在您的移动优化中集成图像的技巧是:在图像大小、将它们加载到移动设备上以及确保正确的页面速度而不降低受众正在搜索的任何主要设备上的图像质量之间取得平衡。
14.优化整体页面大小
页面大小是移动友好型网站的主要考虑因素。为了真正适合移动设备,页面大小必须快速加载。为此,有必要优化整体 DOM 大小。
为了有效地做到这一点,您不仅要考虑我在上面的链接中讨论的内容,还要考虑以下内容:
不要使用不必要的自定义字体
使用不必要的自定义字体会使页面加载过程复杂化,并增加处理页面所需的脚本数量。
这会转化为页面加载时间增加,并且会使您的 Core Web Vitals 得分超出理想范围。
在可能的情况下,请改用系统字体,您可以将由此造成的影响降到最低。
优化您的图像
您还希望确保在优化图像的同时保持图像质量。如果有人到达您的网站并且您的图像质量由于过度压缩而变得粗糙,这不是一个专业的结果,您还没有达到最佳效果。
理想情况下,您应该使用与在您的网站优化的移动设备上产生最高质量的图像文件大小一致,同时确保您不会低于该质量点。
这是一种微妙的平衡行为,需要具有优化图像专业知识的人才能达到预期的结果。
减少整体 DOM 和关键渲染路径所需的资源量
您的页面需要渲染的资源越多,您的页面下载速度就会越高。为了处理网页,您永远不需要超过 10 个插件(最多)和三到四个脚本文件。
这位作者看到了加载 160 个插件并且页面文件大小为 10 MB 的情况。这绝对不是你想去的地方。
为了最有效,作者的观点是 WordPress 网站上的页面不应超过 150-250 KB——平均而言——并且最多不应包含超过 5 到 7 个资源(CSS、外部字体(如果需要)、广告文件、一个 JavaScript 文件和三个插件)。如果你需要更多,那么你可能没有你想象的那么优化。
而且,不要低估使用系统字体而不是外部网络字体可以节省的成本。
缩小你的页面
缩小页面的过程涉及压缩文件以节省空间并因此减少其整体页面加载时间。
使用缩小作为一个过程将帮助您摆脱代码中不需要的空白,并压缩该代码,使其占用绝对最少的必要空间。
理想情况下,最好的过程不涉及任何插件。您可能想聘请开发人员手动缩小您的页面。
如果您的插件已经超载,那么添加另一个插件来缩小您的页面是个坏主意。在这些情况下,您可能希望使用专业级别的开发人员以确保获得最佳结果。
如果您已经拥有最少的插件,那么使用专业开发人员来完成此任务将帮助您获得更好的页面加载时间和 Core Web Vitals 分数。
如果您绝对必须使用插件,请务必将其用作临时措施,直到您可以让专业开发人员进入并手动缩小您的代码。
移动优先就在这里;实施的必要性已达到临界点
随着谷歌移动优先索引的到来,实现您的跨平台、跨设备、跨兼容的网站现在已成为重中之重。
这意味着您延迟的时间越长,不仅仅是移动实施,而是没有正确的移动实施,您在很多方面都会付出更多的代价。
不仅仅是排名。
如果您还没有跳到移动端,为什么不呢?