Может ли белый текст на темном фоне повредить вашему SEO?

  1. Простой ответ
  2. Вопрос юзабилити
  3. Историческая Перспектива
  4. Современный дизайн
  5. Проблемы с темным дизайном
  6. Правильное использование ночного форматирования
  7. Чего не делать
  8. Автор Аманда ДиСильвестро

При использовании цвета на вашем веб-сайте нужно учитывать удивительное количество

При использовании цвета на вашем веб-сайте нужно учитывать удивительное количество. Ваши цвета соответствуют? Они соответствуют вашему бренду? Используете ли вы странные градиенты или странные оттенки в разных частях вашего сайта?

Большинство из этих вопросов довольно нишевые, но в последние несколько лет один из них все больше выходит на первый план. Вредит ли использование SEO светлого или белого текста на темном или черном фоне?

Простой ответ

Я продолжу и, в отличие от большинства других постов, которые я пишу, сразу даст вам хороший и простой ответ. Нет , использование светлого текста на темном фоне не повредит вашему SEO, если вы все сделали правильно. Что значит делать это правильно? Ну, для этого вам придется прочитать остальную часть этого поста, не так ли?

Вопрос юзабилити

У Google есть два движущих фактора, стоящих за практически каждым выбором, который они делают с помощью своего алгоритма поиска. Первое - это подтверждение доверия . Одной из основных целей алгоритма является продвижение заслуживающего доверия контента и демонстрация менее заслуживающего доверия контента. Конечно, это не всегда работает так, как задумано. Есть много распространенных фальшивых новостей и различного контента против изменения климата или анти-вакцинации или чего-то еще, с их собственными сетями людей, которые верят, что это повышает его «доверие», даже когда это объективно ложно.

Кроме того, с этой проблемой Google рано или поздно столкнется. До сих пор они занимали беспристрастную позицию, позволяя фильтровать информацию на основе популярности, а не факта. Они решили не быть арбитрами истины. Тем не менее, мы достигли переломного момента в истории человечества, где чрезвычайно популярная дезинформация наносит прямой ущерб обществу, природе и жизни людей. Как Google будет справляться с их ролью информационных брокеров? Ну, может, поэтому они тихо убрал их миссию «не будь злым» ,

В любом случае, вторым элементом анализа Google является пользовательский опыт . Вы заметите, что практически каждый сайт, который занимает хорошие позиции в Google, имеет хорошее удобство использования. Вы не найдете странных плиточных анимированных фонов GIF, белого текста на желтом фоне, кнопок, спрятанных за кнопками, или других проблем с удобством использования.

Google считает, что пользователь воспринимает чрезвычайно важную часть своей работы, и поэтому тонна рекомендаций Google для веб-мастеров - и многие из их инструментов анализа - сосредоточены на предоставлении советов и помощи для удобства использования.

Историческая Перспектива

Мы думаем, что черный текст на белом фоне является довольно стандартной настройкой по умолчанию для Интернета. Кроме почему мы? Сколько веб-сайтов, которые вы посещаете, сегодня имеют белый фон? Я знаю, что многие из тех, кого я посещаю, имеют не совсем белый, тонкий серый фон или даже цветной фон. Сам Google фактически один из немногих, кто до сих пор использует чистый белый цвет.

Причина, по которой мы считаем черный цвет белым по умолчанию, связана с предкомпьютерными технологиями. Это верно, детка, это бумага! Бумага белая - чаще всего - и принтеры, печатные машины, даже ручные инструменты обычно используют черные чернила по умолчанию. Все, от книг до газет и журналов, по умолчанию использует черный на белом.

Все, от книг до газет и журналов, по умолчанию использует черный на белом

Причина этого, конечно, в том, что бумага получается естественно белого, бежевого или другого не совсем белого цвета. Чисто яркий белый цвет, к которому мы привыкли из бумаги для принтера, на самом деле из-за отбеливания во время производства, но это все еще светлый цвет. Между тем легче всего сделать темные цветные пигменты для чернил. Огромное количество возможных красителей может быть использовано для изготовления темных красок, в то время как более светлые красители сложнее.

Таким образом, когда появились компьютеры, и Интернет спонтанно вспыхнул в умах нескольких блестящих людей, по умолчанию стал красивым, пригодным для использования черным по белому. Просто игнорируй эту маленькую эру зелёных на чёрных, не так ли? На самом деле, имейте это в виду; Я упомяну это позже.

Переход к стандартному режиму «черный на белом» имеет несколько причин, но огромной его частью является тот факт, что мы все привыкли к этому формату.

Современный дизайн

В эпоху между появлением компьютеров и последним десятилетием тема использования «черного на белом» или «белого на черном» стала предметом интенсивной дискуссии. Большинство веб-мастеров используют черное на белом просто потому, что это проще, это по умолчанию, это менее странно и более знакомо пользователям. Когда вы открываете веб-сайт и видите свет на черном, это дает вам паузу, вам нужно время, чтобы приспособиться.

Однако за последние несколько лет многое изменилось, особенно с появлением мобильных компьютеров. Телефоны, хотите верьте, хотите нет, оказали огромное влияние на веб-дизайн, и я не просто имею в виду акцент Google на индексацию с мобильных устройств и все такое.

Вы уже догадались, о чем я говорю? Я говорю о ночном режиме . Ночной режим имеет несколько разных значений для разных приложений и видов дизайна.

Первая разновидность исходит из современного понимания того, что синий свет вреден для ваших глаз, особенно ночью. Несколько приложений, например F.lux и Android ночной режим подкрасит ваш экран оранжевым оттенком, чтобы понизить синий и понизить яркость в темное время суток. Это более естественный оттенок света с меньшим потенциальным повреждением глаз. Однако я не очень заинтересован в таком ночном режиме.

Другой вид ночного режима - это вид, который вы видите в современных приложениях. Reddit имеет его в качестве настройки учетной записи. Как и Твиттер. Это меняет цвет дизайна сайта. Подумайте о скриншотах в Twitter, которые вы видите. Некоторые белые фоны с черным и синим текстом. У некоторых есть темно-синий фон с белым текстом.

Обе версии этих сайтов в целом одинаково удобны, верно? Ночной режим предназначен для того же, что и приложения f.lux; облегчить просмотр экрана ночью.

Понимаете, это самое большое изменение, которое мобильные вычисления внесли в дизайн. Люди все чаще используют свои устройства в темноте . Вы можете посмотреть на свой телефон, когда едете ночью в машине. Вы можете поиграть на планшете в постели перед сном. Вы можете просто работать допоздна, до глубокой ночи и проводить большую часть своего дневного времени во сне. Кто знает!

Дело в том, что в некотором смысле дизайн ночного режима стал функцией доступности . Вы можете включить ночной режим ночью и уменьшить нагрузку на глаза и уменьшить голубое свечение, которое может повредить вашим глазам и качеству вашего сна.

Проблемы с темным дизайном

У более темных дизайнов, таких как ночной режим, - и у старых дизайнов зеленого цвета на черном - есть свои проблемы. Во-первых, люди с астигматизмом могут пострадать за это. Астигматизм является распространенным дефектом глаза, который искажает форму самого глаза. Это достаточно легко исправить с помощью очков или контактов, но это все же может повлиять на зрение. Одна вещь, которая была обнаружена с зеленым на черном дизайне, заключалась в том, что пользователям с астигматизмом было труднее читать светлый текст на темном фоне.

По сути, и это очень просто: светлый фон заставляет ваших зрачков уменьшаться, а темные настройки позволяют зрачку расширяться, чтобы дать больше света. Это хорошо, за исключением людей с астигматизмом. Более широкий зрачок позволяет деформированной линзе оказывать большее влияние на текст, делая его более размытым.

Более широкий зрачок позволяет деформированной линзе оказывать большее влияние на текст, делая его более размытым

Очевидно, что мы не часто думаем о пользователях с проблемами зрения при разработке веб-сайтов. Мобильное использование становится все более значимым. Ночной режим отлично подходит для ночного времени, но в дневное время очень сложно увидеть приложение на экране, особенно если вы находитесь на улице и боретесь с бликами солнца.

Вот почему все эти функции являются опциями. В Twitter и Reddit есть ночной режим, который вы можете включать и выключать по своему усмотрению, всего за пару нажатий или нажатий. Приложение f.lux настраивается динамически в зависимости от времени суток и даже географического положения, чтобы учитывать часы, когда солнечный свет доступен.

Ключом здесь, чтобы связать вещи с акцентом на удобство использования Google, является выбор . Пользователь может выбрать, хотят ли они просматривать сайт в дневном или ночном режиме. Google будет индексировать сайт в любом режиме по умолчанию, обычно в дневном режиме, и все.

Правильное использование ночного форматирования

Если вы хотите использовать ночной режим или просто хотите светлую темную цветовую схему для своего сайта, это совершенно нормально. Вы не будете оштрафованы Google, если не будете делать что-то, что наносит вред пользователю.

Хотя принудительное использование ночного режима для всех пользователей в любое время может повредить некоторым из них - вышеупомянутым проблемам со зрением или проблемам с просмотром сайта в течение дня - Google на самом деле не собирается принимать это во внимание. У Google есть миллиарды пользователей, и небольшие группы населения не собираются вносить масштабные изменения в дизайн.

При использовании светлого текста на темном фоне необходимо убедиться, что он всегда будет загружаться. Это означает, что вы должны указать цвет светлого шрифта и цвет темного фона в вашем коде напрямую. Не используйте внешний CSS-файл, скрипт или изображение для установки любого атрибута.

Например, одна проблема, которую я видел, - это сайт, который использует темное изображение в качестве фона с белым текстом поверх него. Это относительно распространено в некоторых ресторанах, на некоторых космических объектах и ​​других ночных объектах.

Это относительно распространено в некоторых ресторанах, на некоторых космических объектах и ​​других ночных объектах

Ну, что будет, если фоновое изображение не загрузится? Если вы еще ничего не указали, сайт отобразит резервный цвет - белый. Тогда у вас будет светлый текст на белом фоне, и это огромная проблема с веб-дизайном. Что вам нужно сделать, это указать запасной цвет, даже простой черный. Что-то вроде этого более чем достаточно, чтобы покрыть это:

Фон: url (yourimage.jpg) # 000000;

Если изображение не загружается, по умолчанию используется черный цвет. Конечно, вы можете указать другой цвет, если он лучше подходит вашему дизайну.

Чего не делать

Я обратил внимание на доступность и удобство для пользователя, и это должно направлять ваш дизайн.

Вот некоторые вещи, которые вы определенно не должен делать ,

  • Никогда не используйте свет на свету или темноту на темноте. Вам нужно достаточно контраста, чтобы пользователи могли видеть ваш контент. Слишком похожие цвета приведут к штрафу Google за попытку скрыть контент, так как это было злоупотребляющей техникой SEO много лет назад.
  • Никогда не используйте конфликтующие цвета. Ярко-желтый на ярко-розовом фоне может хорошо выглядеть на вечеринке по случаю дня рождения 4-летнего ребенка, но примерно через пять минут у любого взрослого будет головная боль.
  • Никогда не допускайте состояния сбоя, когда сайт не работает. Поиграйте с вашим дизайном, используя блокираторы сценариев или блокировщики элементов, чтобы заблокировать определенные изображения, рекламу или сценарии и посмотреть, как выглядит ваш сайт. Если это сломается, исправьте это.

Если это вообще возможно, предоставьте своим пользователям выбор между дневным и ночным режимом. Не так сложно реализовать переключающую таблицу стилей CSS и скрипт, который ее меняет. Вы можете получить лучшее из обоих миров, просто предоставив своим пользователям выбор.

Автор Аманда ДиСильвестро

Аманда ДиСильвестро

дает малому бизнесу и предпринимателям советы по SEO - от плотности ключевых слов до восстановления после обновлений Panda и Penguin. Она пишет для HigherVisibility.com , одна из ведущих компаний SEO в Соединенных Штатах.

Ваши цвета соответствуют?
Они соответствуют вашему бренду?
Используете ли вы странные градиенты или странные оттенки в разных частях вашего сайта?
Вредит ли использование SEO светлого или белого текста на темном или черном фоне?
Что значит делать это правильно?
Ну, для этого вам придется прочитать остальную часть этого поста, не так ли?
Как Google будет справляться с их ролью информационных брокеров?
Сколько веб-сайтов, которые вы посещаете, сегодня имеют белый фон?
Просто игнорируй эту маленькую эру зелёных на чёрных, не так ли?
Вы уже догадались, о чем я говорю?
Меню сайта
Мини-профиль
  • Регистрация Напомнить пароль?

    Бесплатно можно смотреть фильмы онлайн и не забудьте о шаблоны dle на нашем ресурсе фильмы бесплатно скачать c лучшего сайта
    Опросы
    Топ новости
    Инструкция: как включить подсветку клавиатуры на ноутбуке Asus


    Заблокировалась и отключилась встроенная клавиатура на ноутбуке: как снять блокировку и включить? 


    Ремонт ноутбука ASUS N75S в Санкт-Петербурге (СПб): замена дисплея, замена клавиатуры, ремонт корпуса Асус N75S, замена матрицы
    Услуга Стоимость, руб. Диагностика ASUS N75S Бесплатно (500р при необходимости разбора) Профилактические работы с системой охлаждения + замена кулера 2500 р * Замена чипа (видеочипа) ASUS N75S 6000-6500 Замена

    Как поменять клавиатуру на ноутбуке самостоятельно?
    Владельцы мастерских по ремонту компьютеров часто встречаются со случаями, когда приносят ноутбук, на который была пролита какая-либо жидкость. В некоторых случаях подобная ситуация означает, что понадобится

    Как правильно и быстро снять клавиши с клавиатуры ноутбука
    При продолжительной и тем более неаккуратной эксплуатации ноутбука часто образуются проблемы с клавишами. Они могут залипать, плохо нажиматься, а некоторые клавиши и вовсе могут сломаться. Для решения

    Как почистить клавиатуру компьютера
    С появлением компьютера человек все больше времени проводит за ним. Это и рабочий инструмент, и средство развлечения. Поэтому, совсем неудивительно, что определенные устройства, используемые для ввода

    Замена и ремонт клавиатуры для ноутбука, видео-инструкции
    Замена клавиатуры и кнопок ноутбука показано на видео с подробным объяснением процесса. Цена замены в сервисном центре от 200 рублей . Звоните по тел: +7 (812) 640-03-20 . Замена или ремонт

    4 способа, как отключить клавиатуру на ноутбуке
    Если у вас есть ноутбук, то клавиатура и тачпад на нем являются важными составляющими, без которых работа на устройстве будет вызывать сложности. Конечно есть альтернативы в виде клавиатур и мышей, которые

    Как правильно и быстро снять клавиши с клавиатуры ноутбука
    При продолжительной и тем более неаккуратной эксплуатации ноутбука часто образуются проблемы с клавишами. Они могут залипать, плохо нажиматься, а некоторые клавиши и вовсе могут сломаться. Для решения

    Как правильно и быстро снять клавиши с клавиатуры ноутбука
    При продолжительной и тем немало неаккуратной эксплуатации ноутбука часто образуются проблемы с клавишами. Они могут залипать, нехорошо нажиматься, а некоторые клавиши и вовсе могут сломаться. Для решения