深色背景下的白色文本会损害您的 SEO 吗?

2021-07-27

深色背景下的白色文本会损害您的 SEO 吗?在您的网站上使用颜色时需要考虑的数量惊人。你的颜色一致吗?它们与您的品牌相符吗?您是否在网站的不同部分使用了奇怪的渐变或奇怪的阴影?

这些问题中的大多数都非常小众,但其中一个问题在过去几年中越来越受到关注。在深色或黑色背景上使用浅色或白色文本是否会损害您的 SEO?

一个简单的答案

我会继续,与我写的大多数其他帖子不同,我会立即给你一个简单而简单的答案。,在深色背景上使用浅色文本不会损害您的 SEO,前提是您做得对。做对了是什么意思?好吧,为此,您必须阅读本文的其余部分,不是吗?

可用性问题

谷歌在他们使用搜索算法做出的几乎每一个选择背后都有两个驱动因素。首先是信任的确认。该算法的主要目标之一是提升可信内容并降低可信度较低的内容。当然,它并不总是按预期工作。有大量广为流传的假新闻和各种反气候变化或反疫苗接种内容或其他内容,他们自己的人际网络相信它会增强其“信任”,即使它在客观上是虚假的。

顺便说一句,这是谷歌迟早要处理的问题。到目前为止,他们采取了公正的立场,允许信息根据受欢迎程度而不是事实过滤到顶部。他们决定不做真理的仲裁者。然而,我们正在到达人类历史的一个转折点,在这个转折点上,广为流传的错误信息正在直接损害社会、自然和人们的生活。Google 将如何处理他们作为信息经纪人的角色?好吧,也许这就是为什么他们悄悄删除了“不作恶”的使命宣言

无论如何,谷歌分析的第二个要素是用户体验。您会注意到,几乎每个在 Google 中排名靠前的网站都具有良好的可用性。您不会发现奇怪的平铺动画 gif 背景、黄色背景上的白色文本、隐藏在按钮后面的按钮或其他可用性问题。

谷歌认为用户体验是他们所做工作的一个非常重要的部分,这就是为什么谷歌的大量网站管理员推荐——以及他们的许多分析工具——都专注于为可用性提供提示和帮助。

历史观点

我们认为白底黑字是非常标准的网络默认设置。除了,我们为什么?这些天您访问的网站中有多少实际上是白色背景?我知道我访问的很多人都有灰白色、微妙的灰色背景,甚至是彩色背景。事实上,谷歌本身就是少数仍然使用纯白色的公司之一。

我们将白底黑字视为默认设置的原因是因为计算机技术出现之前。没错,宝贝,是纸!大多数情况下,纸张是白色的,打印机、印刷机甚至手动工具通常默认使用黑色墨水。从书籍到报纸再到杂志,所有东西都默认使用白底黑字。

这样做的原因当然是纸张自然呈现白色、米色或其他灰白色。我们习惯于打印纸的纯亮白色实际上是因为在制造过程中漂白了它,但它仍然是一种浅色。同时,最容易为墨水制作深色颜料。大量可能的染料可用于制造深色墨水,而浅色染料则更难。

因此,当计算机出现并且互联网从一些聪明人的头脑中自发地爆发时,默认设置变成了一个漂亮的、可用的白底黑字。忽略那个小黑时代,不是吗?实际上,请记住这一点;我稍后会提到。

转向现在默认的白底黑字有几个原因,但我们都普遍习惯了这种格式的事实是其中很大的一部分。

现代设计

在计算机出现和过去十年之间的时代,是否使用黑白或黑白的话题一直是激烈讨论的问题。大多数网站管理员使用黑白配色只是因为它更容易,这是默认设置,它不那么陌生,用户更熟悉。当您打开一个网站并看到黑色亮起时,它会给您片刻的停顿,您必须花点时间进行调整。

然而,在过去几年里,很多事情都发生了变化,尤其是随着移动计算的出现。不管你信不信,手机对网页设计产生了巨大的影响,我的意思不仅仅是谷歌专注于移动优先索引等等。

你猜到我在说什么了吗?我说的是夜间模式。夜间模式在不同的应用程序和设计类型上有一些不同的含义。

第一种来自现代人的理解,即蓝光对您的眼睛有害,尤其是在晚上。一些应用程序,如F.LuxAndroid 夜间模式会将您的屏幕染成橙色,以在一天中较暗的时间降低蓝色和亮度。这是一种更自然的光影,对眼睛的潜在伤害更小。不过,我并不真正关心这种夜间模式。

另一种夜间模式是您在现代应用程序中看到的那种。Reddit 将其作为帐户设置。推特也是如此。它改变了网站的颜色设计。想想你看到的 Twitter 截图。有些是带有黑色和蓝色文本的白色背景。有些是带有白色文字的海军蓝色背景。

这些网站的两个版本在一般情况下都同样可用,对吗?夜间模式的作用与 f.lux 应用程序相同;使晚上看屏幕更容易。

看,这就是移动计算给设计带来的最大变化。人们越来越多地在黑暗中使用他们的设备。您可能会在晚上坐车时看手机。您可能会在睡前在床上玩平板电脑。你可能只是工作到很晚,一直到深夜,白天的大部分时间都在睡觉。谁知道!

关键是,在某些方面,夜间模式设计已成为一种辅助功能。您可以在晚上打开夜间模式,减轻眼睛疲劳并减少可能伤害眼睛和睡眠质量的蓝光。

黑暗设计的问题

较暗的设计,如夜间模式——以及旧的黑色设计——都有自己的问题。一方面,散光患者可能会因此而受苦。散光是眼睛中的一种常见缺陷,它会扭曲眼睛本身的形状。戴眼镜或隐形眼镜很容易矫正,但它仍然会影响视力。用黑底绿字设计发现的一件事是,散光用户发现在深色背景上阅读浅色文本更加困难。

从本质上讲,这很简单,浅色背景会导致您的瞳孔缩小,而深色设置会使瞳孔扩大以让更多光线进入。这很好,除了散光的人。更宽的瞳孔允许畸形的镜头对文本产生更多影响,使其更加模糊。

显然,我们在设计网站时通常不会考虑有视力问题的用户。移动使用在这里更重要。夜间模式非常适合夜间使用,但在白天,它可能会导致很难在屏幕上看到应用程序,尤其是当您在户外并与强光作斗争时。

这就是为什么所有这些功能都是选项的原因。Twitter 和 Reddit 有夜间模式,你可以随心所欲地打开和关闭,只需轻点几下或点击几下。f.lux 应用程序根据一天中的时间甚至地理位置进行动态调整,以计算有阳光的时间。

这里的关键是将事情与谷歌对可用性的关注联系起来,是选择。用户可以选择是在白天还是夜间模式下查看站点。谷歌会在任何默认模式下索引网站,通常是白天模式,就是这样。

正确使用夜间格式

如果您想使用夜间模式,或者您只想为您的网站采用明暗对比色方案,那绝对没问题。除非您做的事情会损害用户体验,否则您不会受到 Google 的惩罚。

虽然从技术上讲,始终对所有用户强制使用夜间模式可能会伤害其中的一些人——前面提到的视力问题,或者白天浏览网站的问题——谷歌并没有真正考虑到这一点。谷歌有数十亿用户需要考虑,一小部分人口不会对设计进行大规模改变。

在深色背景上使用浅色文本时,您需要做的是确保它始终会加载。这意味着直接在代码中指定浅色字体颜色和深色背景色。不要使用外部 CSS 文件、脚本或图像来设置任一属性。

例如,我看到的一个问题是一个网站使用深色图像作为背景,顶部有白色文本。这对于一些餐厅、一些以太空为主题的网站和其他类型的夜间网站来说是比较常见的。

那么,如果背景图像没有加载会发生什么?如果您没有指定任何其他内容,该站点将呈现后备颜色,即白色。然后你会在白色背景上有浅色文本,这是网页设计的一大禁忌。您需要做的是指定后备颜色,甚至是简单的黑色。像这样的东西足以覆盖它:

背景:url(yourimage.jpg) #000000;

如果图像未加载,则默认为黑色。当然,如果它更适合您的设计,您可以指定不同的颜色。

什么不该做

我已经提出了解决用户可访问性和用户体验的问题,这应该指导您的设计。

这里有一些你绝对不应该做的事情

  • 切勿使用光对光或暗对暗。您需要足够的对比度,以便用户可以看到您的内容。太相似的颜色会导致谷歌因试图隐藏内容而受到惩罚,因为它在多年前是一种滥用 SEO 技术。
  • 永远不要使用冲突的颜色。明亮的粉红色背景上的淡黄色对于 4 岁儿童的生日聚会来说可能看起来不错,但大约五分钟后会让任何成年人头疼。
  • 决不允许出现站点不可用的故障状态。使用脚本拦截器或元素拦截器来玩你的设计来拦截特定的图像、广告或脚本,看看你的网站的外观。如果它坏了,修理它。

如果可能,请让您的用户在白天和夜间模式之间进行选择。实现一个切换 CSS 样式表和一个改变它的脚本并不是那么困难。只需为用户提供选择,您就可以两全其美。

正在为您的企业或网站寻求 SEO 方面的帮助?我们为您服务。查看我们全面的 SEO 目录,找到适合您需求的 SEO 代理机构。

--- END ---


( ! ) Warning: realpath(): open_basedir restriction in effect. File(/www/server/panel/tmp) is not within the allowed path(s): (/www/wwwroot/www.hqtweb.com/:/tmp/) in /www/wwwroot/www.hqtweb.com/wp-includes/functions.php on line 2124
Call Stack
#TimeMemoryFunctionLocation
12.305549894680shutdown_action_hook( ).../load.php:0
22.305549894680do_action( $hook_name = 'shutdown' ).../load.php:1260
32.305549895056WP_Hook->do_action( $args = [0 => ''] ).../plugin.php:517
42.305549895056WP_Hook->apply_filters( $value = '', $args = [0 => ''] ).../class-wp-hook.php:348
52.307149855664wpcf7_cleanup_captcha_files( ).../class-wp-hook.php:322
62.307149855664wpcf7_init_captcha( ).../really-simple-captcha.php:555
72.307149855952ReallySimpleCaptcha->__construct( ).../really-simple-captcha.php:396
82.307249856968path_join( $base = '/www/wwwroot/www.hqtweb.com/wp-content/plugins/really-simple-captcha', $path = 'tmp' ).../really-simple-captcha.php:46
92.307249856968path_is_absolute( $path = 'tmp' ).../functions.php:2154
102.307249856968realpath( $path = 'tmp' ).../functions.php:2124