Каким должно быть соотношение длины текста и html кода?
alena_sokolova
Здравствуйте, semrush начал выдавать ошибку (точнее предупреждение) о соотношении длины текста , HTML кода. На одном сайте это давно высвечивалось. А на одном все было хорошо, а вот на дня засветило так же 6 страниц.
Из за чего это происходит? я особо за это время ничего на сайте не меняла. JQUERY скрипт библиотеку добавила
<script src=»https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js»></script>
ну и ещё там кое что по мелочи, точно не помню. Вот думаю из за чего такое может происходить, что бы в будущем не наступать на эти грабли. И как это исправить?
Вот что пишет semrush об этом.
Соотношение длины текста и HTML-кода подразумевает какой объем фактического текста присутствует на вашей странице по сравнению с объемом HTML-кода. Это предупреждение выдается, если соотношение длины текста и HTML-кода составляет 10% и менее.
С недавнего времени поисковые системы начали отдавать более высокий приоритет страницам с более объемным контентом. Именно поэтому более высокое соотношение длины текста и HTML-кода повышает шансы страницы занять более высокую позицию в результатах поиска.
Чем меньше объем кода, тем быстрее загружается страница и тем выше ее рейтинг. Кроме того, роботы поисковых систем будут быстрее сканировать ваш сайт.КАК ЕЕ УСТРАНИТЬПоместите текстовый контент страницы и HTML-код в отдельные файлы и сравните их размер. Если размер файла с кодом превышает размер текстового файла, проверьте HTML-код страницы, выделите время на оптимизацию его структуры и удаление встроенных скриптов и стилей.
Конечно пациента бы увидеть, но в целом есть рекомендации для вас.
1). Текста может быть мало и какие-то запросы все равно будут проходить в топ — это лишь вопрос конкуренции и подкачки ключевскими по внешним ссылкам.
2). Тот же яндекс мало следует своим же рекомендациям. Например, они активно продвигают методологию верстки БЕМ, которая таки пестрит лишними тегами и обилием классов в атрибутах.
3). Для разметки стоит использовать теги по назначению. Не должно быть длинного текста информационного характера в DIV и должна соблюдаться семантика.
4). Скорее всего ничего устранять и не надо. Если это единичные периферийные страницы, то на такие советы можно не обращать внимания.
5). Сейчас одного кода HTML становится больше за счет разных мета тегов. Если использовать их все полностью и добавить всякие фавиконки для андроид и Apple, добавить микроразметку schema.org и прочее(скрипты, стили, JSON-LD), то становится очевидным что кода может быть больше чем реального контента. Плохо ли это?
6). Есть ряд технологий которые явно нарушают стандарты выдумываю свои теги и директивы, такие как например Angular. Вот они могут навредить сайту так как мы точно не знаем как устроены партеры поисковых систем и сможет ли ПС распарить такой "HTML".
Огромное спасибо за ответ.
1) Нет. Текста на этих страницах 400-2500 слов. + намкаждой миним 2-5 качественных обработанных изображения, с просинаными в цвет alt И так далее.
2) Эту ошибку выдал semrush. Этот и ещё один незначительный момент нужно исправить. И тогда semrush покажет 100% правильный сайт. Если Вы когда анализировали сайт с помощью semrush Вы тогда поймёте насколько там всё придирчиво, они выворачивают сайт наизнанку, и цепляются к каждой мелочи. Вот всем этим критериям сайты соответствуют).
3) Вот если можно с этого места поподробнее. У меня светится в разметке этот DIV. можно ссылку или совет что это и как и с ним бороться.
4) речь идёт именно о целевых страницах.
Смысл в том что сайт был в таком же положении, контент не менялся. Я добавила это Кавери и пару каких-то мелочей. и появилась это побочнное действие.
Для разметки статей и комментариев используйте article с заголовками — они даже в выдаче отображаются приоритетнее title, если правильно размечено, что создает дополнительные вариации выдачи и соответственно интерес для пользователя. Текст оформляйте тегами p, strong, em. Картинки — figure, figcaption. В div могут быть просто какие-то управляющие или навигационные элементы, хотя для навигации я вам советую тег nav. Сейчас legacy код HTML сильно уступает более семантическому HTML5 — это лишь вопрос кухни.
Если все более менее соответствует — просто забейте дальше занимайтесь контентом, дизайном и раскруткой.
На том что в личном кабинете, там давно эта проблема аналогичная. Там ещё одна из головоломок не можем понять как туда H1 на главную добавить. В хеадер добавить можно легко. Но тогда один и тот же H1 на всех страницах. Это не дело, нужно какждой свой.
Ну и ещё мелочь где то 47 no follow затаилось на внутренних ссылках. Изначально штук 300 было. Неделю в каждую папку заглядывала. Большинство нашла заменила на "no index" они там большинство на коментах стояли и на и на виджетах.
Ну и осталось разобраться с этими несоответствием контента.
Как бы объяснить, впервые связались с этим WordPress, в Европе на нем парочку директорий поставили. А на этих подобных завели на русском. Ну допустим если инглишь не проблема, то мой французский не насколько хорош чтотбы я могла спокойно форумом управлять, точнее вникать в технические детали. А так у меня аналог на русском есть, я там научилась это делать, и только потом на том делаю.
А сайт о котором я изначально начала, не тот что в кабинете, но вопросы аналогичные. На этом ещё менттше этих мелких проблем.
1 не соответствие это
2 10 внутренних "no follow"
А robots.txt его значимость я только на днях поняла.)) А что там не так? Не подскажете? Я все перечитала, каждый по своему пишет.
Вы извините, что достаю вопросами. Я уже сама устала от них. На этом фрилансе как сговорились, передут поедоплату, и пропадают. Даже спасибо не говорят. При этом фрилансере с множеством отличных отзывов и рейтингом. За месяц 3 раза отослала предоплату, 2, 3, 3.5, ₽ ну не миллион, но тем не менее, я же не могу фрилансер содержать. Вот теперь и приходится самой мучаться, в 5 утра правду на форуме искать. Жаль здесь нельзя PDF прикрепить. Я бы отчёты с семраш добавила. Проще было бы.
Спасибо за что уделили время.
100 символов, или Как влияет длина строки на читаемость текста
Среди дизайнеров есть мнение, что оптимальная длина строки — около 60 знаков. Строку такой длины проще всего читать. Чем длиннее строка, тем сложнее удержать фокус. Когда человек прочитывает ее до конца, взгляд уходит слишком далеко и начало следующей строки теряется. Читать слишком короткие строки тоже неудобно. Вроде весь текст перед глазами, но приходится часто перепрыгивать со строчки на строчку.
Роберт Брингхерст в книге «Основы стиля в типографике» говорит, что оптимальное значение длины строки составляет от 45 до 75 знаков. 66 — идеальный вариант, а для многоколонного набора — 40—50 знаков.
Максим Ильяхов пишет, что за максимум берет 75 знаков, — столько помещается на страницу А4 с полями при наборе 12-м кеглем.
Smashing Magazine в 2009 году провели исследование и выяснили, что средний результат символов на строку равен 88,74, а среднее значение изменяется от 75 до 85.
Результаты исследования Smashing Magazine
Я решила узнать, подтверждается ли мнение дизайнеров исследованиями, и нашла статьи, где ученые проверяли изменение параметров читаемости в зависимости от длины строки.
Калибровка
Покажу, как выглядит разная длина строки, на примерах популярных сайтов.
Мобильная версия Яндекса — 41 символ в блоке с текстом 
Медуза — 70 символов 
Google — 85 символов у текста 
OZON — 153 символа
Поиск отдельного слова в тексте в зависимости от длины строки
Длина строки в эксперименте была в вариантах 55, 70, 85 и 100 символов. Шрифт тоже менялся, всего использовали два варианта: Arial 10 пунктов и Times New Roman 12 пунктов. Оценивали точность и скорость поиска по тексту.
В эксперименте участвовали 72 человека, 57 из которых — женщины. 61% участников был моложе 25 лет, остальные — в интервале между 26 и 50 годами.
Дизайн эксперимента — html-странички с текстом докторской диссертации одного из авторов. Никто из участников его раньше не читал.
(a) 55 знаков в строке, (b) 70, (c) 85, (d) 100. Везде используется Times New Roman
Участники искали в текстах заранее заданное слово. Если за пять секунд слово найти не получалось, автоматически включалось следующее задание.
После испытаний участники отвечали на вопросы о том, какая из страниц показалась им наиболее красивой, какую длину строки и шрифт они предпочитают.
Точность поиска по тексту рассчитывалась в зависимости от того, нашли ли участники в тексте нужное слово. Значимых различий в зависимости от шрифта или длины строки не оказалось. Люди быстрее находили нужное слово в текстах с длиной строки 85 и 100 символов.
Среди тестов были задания, когда целевого слова в тексте не было, и участник должен был это определить. Такие задания лучше выполнялись на текстах с длиной строки 70 символов. Шрифт влияния не оказал.
Ответы пользователей на вопросы о том, какая длина строки в зависимости от шрифта им больше нравится
Почти три четверти пользователей выбрали Arial — шрифт без засечек — как более удобный, а страницы, набранные им, — как более красивые. Другие исследования о шрифтах можно посмотреть в статье о читаемости шрифтов с засечками и без.
По результатам эксперимента можно сделать вывод, что в текстах с более длинными строками (85—100 знаков) люди быстрее находят нужное слово, но с большим трудом понимают, что нужного слова нет. По субъективным ощущениям читателям нравятся более короткие строки и шрифты без засечек.
Поиск информации на сайте в зависимости от длины строки
Задача эксперимента была в проверке условий, при которых пользователям будет проще найти специфическую информацию типа контактов или цены. В эксперименте участвовало 99 человек, из них 82 женщины и 17 мужчин, средний возраст — 24 года. Никто из них не участвовал в первом эксперименте.
Дизайн эксперимента — шесть веб-сайтов. Первый состоял из 16 страниц и рассказывал о садоводстве, а остальные — из 30 страниц и освещали темы спорта, покупок, музыки, софта и компьютерных комплектующих. Контент подбирали так, чтобы текст был виден на первой странице целиком, без скролла.
Примеры сайтов для исследования
В верхней части страницы написали вопросы в зависимости от типа сайта. Например: «Как много программ содержит Office 97?» или «С кем Sega собирается стать партнерами?».
Ученые анализировали последовательность посещенных страниц и время, проведенное на каждой из них.
После того как человек читал вопрос, он должен был нажать на кнопку «Показать веб-сайт». Когда участник находил ответ на вопрос, он вбивал его в поле ответа, и после этого сразу появлялся следующий вопрос. После ответов на вопросы в тесте люди выбирали варианты дизайна сайта, которые им больше понравились.
По результатам исследования оказалось, что скорость поиска ответов не менялась в зависимости от длины строки. Количество страниц, посещенных в процессе поиска ответов, не менялось в зависимости от длины строки. Но участники чаще выбирали как понравившиеся сайты с длиной строки до 70 символов.
График отношения времени чтения к длине строки
Понимание текста и скорость чтения в зависимости от длины строки
Ученые изучали понимание и скорость чтения, а также паттерны прокрутки. Понимание измеряли с помощью вопросов: «Какой заголовок лучше подходит к тексту?», «Какая главная идея текста?», «В каком порядке что рассказывалось?». И вопросов о конкретных фактах и деталях в тесте. Скорость чтения измерялась в прочитанных словах в секунду.
Каждому участнику давали прочесть шесть документов — статей из National Geographic, длиной около 1000 слов, примерно 2,5 странички. Хотя на английском, может, и меньше. В исследовании участвовали 36 человек возрастом от 18 до 24.
В результате выяснилось, что текст понимали лучше те, кто читал строки длиной 55 символов, чем те, кто читал строки по 100 символов. Но авторы признались, что в более ранних исследованиях других авторов этот эффект не проявлялся.
По сравнению с текстами длиной строки 25 и 100 символов текст с длиной строки 55 символов читается быстрее. То есть текст, набранный в колонки, читается более медленно
В заключение
Субъективно людям нравятся тексты со строками 55—70 символов. В таких текстах люди лучше понимают смысл и легче отвечают на вопросы. Скорость чтения таких текстов выше. Зато в текстах с длиной строки 85—100 символов люди быстрее находят конкретное слово.
Большинство контентных сайтов: новости, блоги и так далее — придерживаются длины строки 55—70 символов в десктопных версиях, но на сайтах других направлений длина строки часто больше. Возможно им просто не важна читаемость текста, или они даже сознательно хотят ее понизить.
Описание товара на Wildberries — 91 символ 
Комментарии на YouTube — 141 символ 
Описание задачи в Jira — 121 символ
Всё об оптимальной длине SEO-текста
Анастасия Арнакова, фрилансер, специально для блога Нетологии рассказала о том, как писать тексты правильной длины, чтобы они были по-настоящему эффективными. Статья для конкурса блога.
В статье вы не найдете ответа на вопрос «сколько символов написать, чтобы статья вышла в топ и её 100% прочли» — его не существует. Расскажу о том, как длина текста влияет на его появление в топе и статьи какого объема нравятся людям. В конце дам рекомендации, которые помогут рассчитать необходимое количество символов.
Как длина текста влияет на SEO
На своем блоге Яндекс пишет, что поисковая система ранжирует тексты любой длины. При выводе в топ в первую очередь учитывается релевантность запроса. В число первых результатов попадают те документы, которые содержат наиболее подходящие ответы на вопрос пользователя.
В выдаче встречаются лонгриды на 50 000 символов и страницы с карточками товаров, которые бывают очень короткими — 100–250 символов.
В рекомендациях Гугла и Яндекса для вебмастеров ничего не сказано про длину текста. Поисковики советуют думать о доверии к автору и сайту, о полезности и релевантности контента. Рассмотрим, какие исследования приводят другие эксперты.
Согласно исследованию компании SerpIQ, страницы с большим количеством контента занимаются более высокие позиции в выдаче.
В посте Convert Monster «130 факторов ранжирования: полный список» автор советует писать тексты длиннее 2000 слов.
Короткие тексты тоже могут попасть в топ выдачи. Например, статья «Как заработать на квартиру в пределах МКАДа», опубликованная в «Тинькофф Журнале». Статья состоит всего из одного слова, но Гугл показывает ее на первой странице выдачи по запросу «Как накопить на квартиру в Москве».
Если текст длинный из-за большого количества «воды» и ключевых слов — его позиция в поиске будет понижена.
Типографика в веб дизайне в цифрах
В данной статье мы разберемся как типографика может помочь при проектировании дизайна. При этом мы будем оперировать точными и измеримыми понятиями. И максимально постараемся уйти от абстрактных определений по типу “Для привлечения внимания увеличьте размер шрифта”. Данная статья даст вам точные числа – в каких случаях и на сколько пикселей увеличить. Все кто заинтересован прошу под кат.
Прежде чем понять как типографика относится к веб-дизайну, давайте разберемся с самим понятием.
Типографика – это набор правил, который помогает сделать написанный вами текст приятным для глаз читателя. Если вы будете использовать в дизайне этот свод законов, то возможно читателю не захочется выколоть глаза после прочтения статьи. Но это только возможно)
Свод правил включает следующее:
Стиль шрифта – сюда относятся все стили, которые вы можете применить к тексту через CSS (font-size, font-weight, line-height и др.)
Иерархия – это то, как вы отделяете блоки текста по важности. К примеру заголовок, помещенный между тегами H1, будет выделяться на фоне заголовков меньшего уровня. А они в свою очередь будут иметь больший вес, чем обычный текст.
Стиль текстового блока – это ширина и отступы блока в котором находится текст.
Давайте разберем каждую группу детальнее и выясним как сделать ваш текст приятней для глаз.
Визуальный облик шрифта можно задать комбинацией нескольких свойств. Взглянем на каждое из них и определим их роль.
Семейств шрифтов огромное количество и можно потратить несколько часов или даже дней, выбирая наиболее подходящий шрифт для вашего сайта. А потом еще столько же, чтобы подобрать второй, который будет сочетаться с первым. Для того чтобы образовалась шрифтовая пара.
Как же выбрать подходящий шрифт ? Если вы не являетесь экспертом, то самым верным будет зайти на страницы популярных блогов и посмотреть что используют они. Эти ребята давно работают с текстом. И если их читают, то есть небольшая вероятность, что они используют верный шрифт. В любом случае, никто не запрещает вам взять за основу их шрифты и адаптировать под ваш сайт (главное не перестарайтесь).
При выборе размера нужно начинать с вашего основного шрифта (Тот который используется в большинстве случаев). И уже отталкиваясь от него задавать размер для заголовков и подписей. Размер основного текста должен быть в диапазоне от 14 до 18 px. А лучше даже больше, к примеру 16 px для мобильных и 20 px для десктопа. Это приблизительно тот размер текста, который мы привыкли видеть в книгах.
Что касается размера для заголовков и подписей, то их размеры должны находится в отношении 2 к 3 по отношению к основному. К примеру:
16 px – основной текст
24 px – заголовок
Существуют и другие пропорции между шрифтами разных уровней. 2 к 3 это лишь один из примеров.
Несмотря на то, что у нас есть большой диапазон толщины шрифта. Сильной разницы между толщиной 100 и 200 вы не увидите. Поэтому можете считать, что есть 3 значения для толщины. 400 — normal, 700 – semi-bold, 900 — bold.
Normal иcпользуется для основного текста. Bold для заголовков, а semi-bold для выделений в тексте важных моментов. Semi-bold также можно использовать для заголовков.
Нет строгого правила сколько устанавливать межстрочный интервал, но правилом хорошего тона считается установка его в значение в 1.5 раза большее чем размер шрифт. То есть в нашем примере 16 * 1.5 = 24.
Не используйте чистый черный цвет. Не нужно выставлять значение цвета в #000. Цвет выглядит слишком резким. Сделайте его немного серым. Это намного приятней для глаз.
Можно даже иметь цветовую палитру и использовать несколько цветов. Один для основного текста, второй для заголовков, третий в качестве пометок. Вот пример такой палитры.
Вы сами можете найти цветовую палитру. В сети много таких сайтов. Вот один из примеров.
Так выглядит простыня текста. Все мы хорошо ее знаем.
Попробуем расставить акценты в этом тексте.
Как уже было сказано ранее, иерархия нужна для выделения блоков текста. В HTML даже есть специальные теги для выполнения этой задачи. Теги H1 – H6. Но это не единственный способ создать иерархию. Всего их существует 4:
Размер шрифта
Самый простой широко используемый метод. Просто сделайте шрифт заголовка больше относительно основного текста.