Читает ли поисковый робот шрифт 1 px

Читает ли поисковый робот шрифт 1 px

Текст должен легко читаться

Существует множество различных размеров экранов. И нужно обеспечить легко читаемость текста на самых маленьких и самых больших экранах. Например, с помощью font size HTML .

Обеспечьте, чтобы размер шрифта подходил для любого устройства

Есть несколько способов сделать это:

  1. Установка адаптивной темы / шаблона;
  2. Использование адаптивного дизайна / медиа-запросов ( CSS );
  3. Разработка разных версий сайта.

1. Приобретение адаптивной темы или шаблона

Google рекомендует адаптивный дизайн. С помощью адаптивной темы проблема с размерами шрифтов будет решена.

2. Использование медиа-запросов / адаптивного дизайна

Если у вас есть опыт работы с CSS , и вы не боитесь изучить, как управлять тем, чтобы текст легко читался на любых размерах экранов.

Как работает font-size


Style font size HTML объявляется в файле CSS . Если размер шрифта не объявлен, браузер будет использовать значение по умолчанию, которое обычно составляет 16px.

В коде CSS установка значения font-size выглядит следующим образом:

Для размера шрифта можно использовать различные единицы измерения: пиксели ( px ), пункты ( pt ), em и проценты ( % ).

Если речь идет о выборе шрифта и адаптивном дизайне, Google рекомендует следующее:

  • Используйте базовый размер шрифта — 16 пикселей в CSS . Настраивайте другие размеры по мере необходимости с помощью свойств шрифта;
  • Чтобы определить типографический масштаб, используйте размеры относительно базового;
  • Для текста должно задаваться вертикальное пространство между символами. Общая рекомендация состоит в том, чтобы использовать высоту строки в 1.2 em , которая по умолчанию применяется браузерами;
  • Используйте ограниченное количество шрифтов и типографских масштабов.

Используйте базовый размер шрифта CSS в 16 пикселей


В этой рекомендации говорится, что размер шрифта для страницы должен объявляться явным образом — 16 px . Это значит, что нужно использовать значение HTML CSS font size , которое устанавливает размер шрифта в 16 пикселей для всей станицы. Обычно это делается через элемент « body » или « html «.

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


Теперь, когда у нас есть базовый размер шрифта для всей страницы, нужно задать другие размеры шрифтов, чтобы элементы H1 , H2 и т.д., отображались большим, чем базовый.

Способ, рекомендуемый Google , это « относительные размеры «. В наших примерах мы будем использовать проценты.

На приведенном выше изображении font size HTML для H1 объявлен как « 250% «. Текст H1 будет в два с половиной раза крупнее, чем базовый в 16px . Это и есть « относительный размер «. Благодаря этому везде, где мы объявляем размер шрифта, он всегда будет устанавливаться в несколько раз больше, меньше или того же размера, что и базовый шрифта:


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

Для текста должно задаваться вертикальное пространство между символами, и, возможно, для каждого шрифта его нужно будет корректировать:


Еще одним важным аспектом читаемости шрифта является пространство между строками текста. В CSS это свойство называется « line-height «.

Google рекомендует использовать высоту строки 1.2 , которая по умолчанию используется в браузерах. Это означает, что расстояние между строками текста будет в 1,2 раза превышать style font size HTML .

Читайте также:  Прямоугольник с круглыми углами

Для этого нужно объявить высоту строки в CSS :

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

Задав высоту строки ( как минимум ) в 1,2 , мы способствуем тому, что текст будет легко читать даже на таких маленьких экранах.

Проблемы со списками ссылок

Для ссылки нужно больше места на экранах мобильных устройств. Это может стать проблемой, когда ссылки размещены в нумерованных или маркированных списках.

Чтобы решить эту проблему, попробуйте:

Увеличив высоту строки, мы гарантируем, что для ссылок в списке будет достаточно пространства. Вам нужно будет задать значение, подходящее для сайта, и изменить его на « 200% «.

Используйте ограниченное количество шрифтов и типографских масштабов


Слишком много шрифтов и объявлений font size HTML может привести к тому, что макет страницы станет чрезмерно сложным. Такие старицы могут читаться на стационарном мониторе, но на небольшом экране они точно будут трудно читаемы. Помните, что « маленький » текст будет еще меньше при просмотре на мобильном устройстве.

Как сделать шрифт читаемым на любом устройстве

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

Рассмотрим пример медиа-запроса, с помощью которого задается размер шрифта.

У нас есть один и тот же размер шрифта, объявленный для больших и маленьких экранов. Размер шрифта составляет « 100% «. Так как мы объявили базовый font size HTML в 16 пикселей, это означает, что он будет использоваться на стационарных ПК и на небольших мобильных устройствах. Этот размер всегда будет выглядеть аккуратно и легко читаться:


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


В подобной ситуации нужно будет изменить медиа-запрос. В первом примере style font size HTML был одинаковым ( 100% ) для стационарных компьютеров и мобильных устройств.

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

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


Это означает, что текст будет легко читаемым на экранах разных размеров.

3. Создание разных версий сайта

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

Данная публикация представляет собой перевод статьи « Use legible font sizes » , подготовленной дружной командой проекта Интернет-технологии.ру

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

Читайте также:  Как узнать кто убрал из друзей

Нажав кнопку "Принять и продолжить", вы соглашаетесь с Политикой конфиденциальности

How-to – Читать 9 минут – 16 апреля 2019

Мобильная типографика — это ответвление искусства оформления печатного текста, посвященное своду правил для максимально удобного восприятия напечатанной информации на портативных устройствах.

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

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

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

На примере слева все конверсионные кнопки расположены на видном месте, они достаточно крупного размера. На сайте справа слишком мелкие шрифты и не адаптивный дизайн:

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

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

Специалисты рекомендуют следующие диапазоны:

  • для пользовательского ввода и основного текста: минимум 16 px;
  • для менее важного текста: 14 px;
  • межстрочный отступ — 24 px.

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

Также в зависимости от тематики сайта, стоит разобраться в каких условиях люди читают размещенные статьи, например, в общественном транспорте или пешком на работу. Это можно проследить в той же аналитике (просмотр времени посещения). Если основной трафик утром и вечером, значит, люди читают по дороге на работу и обратно.

Более подробные инструкции можно получать, используя информацию, размещенную на Material Design.

Ната­лья Бара­но­ва

Всего материалов: 602

Как видят веб-стра­ни­цы люди и поис­ко­вые систе­мы? Отли­ча­ет­ся ли их образ чте­ния и чем? Какие эле­мен­ты нуж­но исполь­зо­вать в ста­тье, что­бы она была понят­ной и удоб­ной для про­смот­ра? Отве­ты на эти вопро­сы кор­ре­спон­ден­ту Теп­ли­цы предо­ста­вил началь­ник отде­ла мар­ке­тин­га интер­нет-агент­ства «Адван­ти­ка» Евге­ний Кузь­ми­чёв.

Привычки пользователя

Люди чита­ют тек­сты по-раз­но­му. Кто-то вни­ма­тель­но вчи­ты­ва­ет­ся в текст, изу­ча­ет его от пер­вой до послед­ней строч­ки, дру­гие лишь про­смат­ри­ва­ют изоб­ра­же­ния. По мне­нию Евге­ния Кузь­ми­чё­ва, имен­но кар­тин­ки и заго­лов­ки ста­но­вят­ся глав­ной при­чи­ной, поче­му поль­зо­ва­тель задер­жи­ва­ет взгляд на тек­сте. «Яркая визу­аль­ная инфор­ма­ция все­гда вос­при­ни­ма­ет­ся быст­рее и луч­ше. Часто поль­зо­ва­те­ли, уви­дев­шие вызы­ва­ю­щую кар­тин­ку, реша­ют про­чи­тать текст, кото­рый нахо­дит­ся рядом с ней и, ско­рее все­го, пред­став­ля­ет инте­рес», – отме­тил экс­перт.

Заго­лов­ки – еще одна деталь, кото­рая может «заце­пить». По мне­нию Кузь­ми­чё­ва, про­фес­си­о­наль­ные копи­рай­те­ры и мар­ке­то­ло­ги часто исполь­зу­ют кри­ча­щие заго­лов­ки, кото­рые застав­ля­ют узнать подроб­но­сти из тек­ста, про­чи­тать опи­са­ние.

Читайте также:  После заправки картриджа принтер пачкает бумагу

Выявить еди­ный про­цесс чте­ния у интер­нет-поль­зо­ва­те­лей почти невоз­мож­но. Даже один и тот же чело­век может читать текст по-раз­но­му в зави­си­мо­сти от вре­ме­ни суток и настро­е­ния. Но чита­те­ля нуж­но вести, зама­ни­вать фор­мой, удоб­ной и понят­ной струк­ту­рой ста­тьи. Сде­лать все, что­бы упро­стить про­цесс чте­ния.

Евгений Кузьмичёв выделил несколько элементов, которые сильно влияют на желание прочитать текст

  1. Яркий заго­ло­вок.
  2. Ввод­ный абзац, кото­рый увле­ка­ет чита­те­ля и застав­ля­ет читать даль­ше.
  3. Основ­ная суть тек­ста (пре­иму­ще­ства това­ра или услу­ги, опи­са­ние собы­тия) долж­на быть лако­нич­ной, без лиш­ней «воды».
  4. Текст раз­бит на неболь­шие абза­цы (опти­маль­ным счи­та­ет­ся абзац, состо­я­щий из 4–6 строк).
  5. Пред­ло­же­ния отно­си­тель­но корот­кие, не име­ют мно­же­ства вто­ро­сте­пен­ных чле­нов и смыс­ло­вых частей.
  6. Пере­чис­ле­ния оформ­ле­ны в виде удоб­ных для чте­ния спис­ков.
  7. Кон­траст­ный цвет тек­ста, удоб­ный шрифт, не слиш­ком мел­кий и не слиш­ком круп­ный кегль.
  8. Отсут­ствие грам­ма­ти­че­ских, пунк­ту­а­ци­он­ных и иных оши­бок.

К при­ме­ру, нали­чие спис­ков в ста­тье упро­ща­ет зада­чу чита­те­ля – про­чи­тав несколь­ко пунк­тов, он смо­жет понять смысл все­го тек­ста. Это брос­кий эле­мент в тек­сте, кото­рый чита­тель начи­на­ет изу­чать про­из­воль­но, имен­но пото­му, что он выде­лен на фоне все­го тек­ста.

Вот что видит поль­зо­ва­тель, кото­рый зашел на стра­ни­цу сай­та Теп­ли­цы. Скрин­шот с сай­та te-st.ru

А это напи­са­но в коде сай­та, кото­рый и видит поис­ко­вой робот.

Что видят роботы

Поис­ко­вые робо­ты видят стра­ни­цы и тек­сты не так, как поль­зо­ва­те­ли. «В отли­чие от поль­зо­ва­те­ля, поис­ко­вик «про­чи­та­ет» весь текст на стра­ни­це, если он не закрыт от индек­са­ции. У него нет воз­мож­но­сти пере­ду­мать после пер­во­го скуч­но­го абза­ца и закрыть неин­те­рес­ную стра­ни­цу», – уточ­нил Евге­ний Кузь­ми­чёв.

По сло­вам экс­пер­та, рань­ше робо­ты раз­ли­ча­ли отдель­ные сло­ва и фра­зы, мог­ли уло­вить коли­че­ство исполь­зо­ва­ния каж­до­го сло­ва в тек­сте, но при этом было почти без­раз­лич­но, чита­ют ли они исто­рию о друж­бе или инструк­цию по ремон­ту гене­ра­то­ра. «Любой текст для поис­ко­ви­ка – это набор сим­во­лов и тегов. Даже если текст не раз­бит на абза­цы, выде­лен нечи­та­е­мым цве­том или име­ет мас­су про­пу­щен­ных запя­тых, он будет вос­при­нят и про­чи­тан», – отме­тил Кузь­ми­чёв.

В послед­ние пару лет Google и Яндекс исполь­зу­ют новые тех­но­ло­гии на осно­ве улуч­шен­ных алго­рит­мов чте­ния и вос­при­я­тия тек­стов.

«Поис­ко­вые робо­ты отлич­но уме­ют опре­де­лять «скры­тый» текст (напри­мер, белые бук­вы на белом фоне), грам­ма­ти­че­ские ошиб­ки, излиш­нюю заспам­лен­ность и мно­же­ство дру­гих фак­то­ров, кото­рые «меша­ют» поль­зо­ва­те­лю полу­чать инфор­ма­цию. Несо­мнен­но, это нега­тив­но отра­жа­ет­ся на пози­ци­ях сай­та в поис­ко­вой выда­че», – объ­яс­нил ново­вве­де­ния Кузь­ми­чёв.

Более того, раз­ви­тие ней­рон­ных сетей поз­во­ли­ло пони­мать смысл целых пред­ло­же­ний, абза­цев и в неко­то­рых слу­ча­ях даже цело­го тек­ста. То есть для поис­ков стал важен имен­но семан­ти­че­ский смысл. Таким обра­зом устро­е­ны алго­рит­мы «Палех» у Яндек­са и RankBrain у Google.

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

Что­бы узнать, как поис­ко­вые боты видят текст, мож­но вос­поль­зо­вать­ся спе­ци­аль­ны­ми инстру­мен­та­ми, напри­мер, от Google «Посмот­реть как Googlebot».

Ссылка на основную публикацию
Чистка матрицы зеркального фотоаппарата
Нам доверяют сотрудники: Вопросы и предложения: info@fixit24.ru Адрес: г. Москва, м. Тверская, ул. Тверская, д. 20, 2 этаж, офис 204....
Хороший ламповый усилитель для дома
Почти у каждого ненормального с гитарой (а иногда даже и без нее) появляется навязчивая идея принести домой фанерный ящик с...
Хороший переводчик английского языка
Оцените наш проект! Правильный переводчик онлайн позволяет довольно качественно и оперативно выполнять следующие операции: - изучать один либо одновременно несколько...
Чистка кэша на ноутбуке
Все, что находит отображение в браузере (музыка, картинки, видео) перед воспроизведением сохраняются на ваш ПК как временные файлы.Если их количество...
Adblock detector