Проанализировав множество постов, пришли к мнению, что одна из причин, мешающих попаданию нашего сайта в Топ поисковых систем - техническое оформление. Не у всех и не всегда оно соответствует канонам SEO. Как мы хотели бы видеть оформление статьи в техническом плане с учетом возможностей текущего редактора, описано в этой статье.
Для названия статьи уже есть прописанные правила. Хотелось бы добавить, что надо всегда стараться, чтобы из него было четко понятно, о чем пойдет речь в статье.
Важная часть текста, начало которого при текущем положении дел попадает в качестве описания поста в ленте и берется для формирования дескрипшена (description) для поисковых систем. Можно применять Кат (cut), который отсекает ту часть введения, которую Вы хотели вы видеть в качестве описания, можно просто учесть этот момент и в первых 150 знаках введения постараться описать, о чем будет пост.
Во многом благодаря началу введения читатели и поисковые системы определяют о чем пост и стоит ли он внимания.
Резюмируя - введение должно быть и выполнять свою ознакомительную функцию.
Все видели информационные статьи на множестве ресурсов. Как правило, везде присутствуют подзаголовки и сформированное из них Содержание.
Читателю оно помогает ориентироваться в структуре статьи и дает возможность легкой навигации. Поисковым системам также нужна четкая структура документа для верного ранжирования.
Поэтому, нужно использовать заголовки.
В текущей версии редактора теперь доступны заголовки h2, h3, h4, h5 и h6.
Соответственно, хотелось бы видеть статью, разбитую подзаголовками на разделы, подразделы и подразделы в подразделах. Без фанатизма, но в пределах разумного.
Заголовок не нужно использовать просто для выделения какой-то фразы. Можно для этих целей использовать текст, оформленный в виде картинки (альт обязателен).
Учитывайте, что первым подзаголовком в тексте нужно ставить H2, они могут содержать в себе подзаголовки H3, а уже внутри любого из H3 можно вкладывать H4. Получается принцип матрешки.
Пример:
В ближайшее время постараемся привести уровень заголовков к привычному (от h2 до h6) и добавить формирование содержания при более чем 2х подзаголовках.
Многие авторы применяли и применяют для отделения частей текста графические разделители - картинки, линии, узоры, красивые надписи оформленные графической картинкой.
Можно ли их применять?
Можно, но с ограничениями:
Напишу банальную истину - чтобы текст не смотрелся сплошной простыней текста, увидев которую, хочется закрыть страницу, нужно использовать форматирование текста. Чем более разрежен и структурирован текст, тем легче он воспринимается, тем удобнее и приятнее вникать в содержимое.
Текст должен разбиваться на небольшие, логически законченные абзацы. На наш взгляд, абзац размером более 7 строк (ориентируемся на ПК) смотрится перегруженным. Их нужно формировать так, чтобы при просмотре они были отделены пустой строкой. В текущем редакторе иногда недостаточно просто 2 раза нажать Enter, иногда приходится еще и вставлять принудительный перевод строки тегом br / (в угловых скобках).
Для наглядности какие-то важные моменты стоит выделять:
Как видим, подчеркивание в списках работает некорректно, учитываем этот момент (пишу в ТЗ).
Увлекаться этим, выделяя целые абзацы не стоит. Смысл применения - привлечение внимания читателя к каким-то важным или интересным моментам. Пробегая статью при первом знакомстве по диагонали, читатель цепляет взглядом эти куски, формируя свое мнение, стоит ли вчитываться тут подробнее. Ваша задача - дать ему эти ориентиры. Придираться к этому особо не будем, но инструментом пользоваться в статье надо.
Пожалуйста, не нужно использовать заглавные буквы и писать капслоком ТЕКСТ, ОЖИДАЯ, ЧТО ЭТО ПРИВЛЕЧЕТ ВНИМАНИЕ. Да, привлечёт. Но не в том контексте. На сегодняшний день это элемент неуважения к читателю. Без необходимости выделение фраз капслоком - это как способ усиливать тревогу и создавать дополнительный шум в предложениях. Резюмируем: выделять заглавными буквами слова, фразы, компоненты, цитаты, названия разделов и косметических средств и проч. не нужно.
Также стоит изредка применять выделение особо важных моментов в отдельный блок - оформляется цитатой.
Такой блок также привлекает взгляд при чтении и оформлять им что попало просто ради факта применения для администрации не нужно. Но бывают части текста, которые просто просят оформить их отдельно. Соответственно, инструментом надо пользоваться, но не увлекаться.
Обычно такой блок содержит 1-2 предложения, реже - абзац целиком.
Практически любое перечисление чего-либо гораздо нагляднее выглядит, когда оформлено списком.
Но применять списки имеет смысл в случае, когда это небольшие перечисления, на 1-2 фразы, предложения, в крайнем абзаца в каждом из пунктов списка. БОльшие объемы правильнее оформлять подзаголовками.
Применяем 2 вида списков:
Спойлер позволяет скрыть часть не всем интересной информации (состав средства, обещания производителей, описание эффектов и т.п. как правило не уникальную информацию). От поисковых систем эта информация не скрыта, а вот для читателя это удобно - он может сам принимать решение, изучать внимательно подробности или нет.
Инструмент есть, в нужных местах надо им пользоваться.
Технические требования:
Заполняйте Тайтл (title). Этот тот текст, который появляется после наведения курсора на картинку. Это удобно и приятно многим читателям.
Обязательно после этого меняйте немного Альт (alt), чтобы он не был полностью идентичен Тайтлу. Это тот текст, который будет написан на месте картинки, если она не загрузилась. Это требование поисковых систем и надо его соблюдать.
Дополнение от Tonlose-stille:
Текст из поля ввода "Описание" при загрузке в фото станет одновременно и Тайтлом и Альтом в редакторе. Править Альт нужно будет после вставки в редакторе, например, добавить или убавить что-то из фразы.
Тайтл и Альт для фото:
Задаются при вставке фото так.
Меняется Альт в редакторе после вставки так.
Фото в нашей тематике прекрасно дополняют, а то и заменяют множество иной информации. Чем их больше - тем интереснее для читателя статья. Если они идут подряд - можно применять галерею. Если без галереи - нужно разделять их пустой строкой.
Прекрасно смотрятся gif. Решаем вопрос с нормальным их добавлением через редактор.
Также были неприятно удивлены слабым сжатием и потерей качества на стороне редактора при добавлении фото. Будем решать этот вопрос.
Использование картинок в качестве разделителя допустимо, если они идут в дополнение к тегам-разделителям и смотрятся уместно. При этом на них также должны быть прописаны Тайтл и Альт.
По размеру фото — действуют старые требования, мы их не меняли, размер фото по ширине автоматически обрезается до 709 пикселей. Авторы утверждают, что если сжать своими силами до этого размера по ширине, то качество получается лучше.
В любом случае можно грузить как и раньше больший размер — он сожмется автоматически. Главное, чтобы устраивало качество.
По Тайтлу и Альт — там, где они прописались из описания при вставке, можно сделать уник, просто приписав к Альту слово Фото:
Т.е. было:
img src=«путь к файлу» title=«Лето 2021» alt=«Лето 2021» /
стало:
img src=«путь к файлу» title=«Лето 2021» alt=«Фото: лето 2021» /
Этого достаточно для уника.
Прочие нормы по фото и картинкам остаются прежними.
Если фото оформлены в виде галереи - требования с оформлению самих фото такие же. Обязательны Тайтл и Альт. Их придется вставлять вручную в редакторе. Можно просто скопировать из обычного фото эту часть кода и исправить.
Практически не применяются в статьях, а жаль. Готовы обсуждать этот момент.
Довольно важный момент даже не технически, а в плане удобства читателя. Выбранные теги должны четко соответствовать содержимому статьи. С ними тоже будем наводить порядок.
Очень правильно и полезно ставить внутри статьи ссылки на другие публикации нашего сайта, как свои, так и коллег. Ставить их можно и нужно только там, где это уместно. Например, если упоминается способ решения проблемы, но ваш пост не подразумевает подробного ее описания - будет уместно сделать ссылку для того, чтобы заинтересовавшийся этим способом читатель мог перейти по ссылке и получить там подробную информацию.
Хороший пример применения внутренних ссылок в статье - Википедия (тут была бы уместна ссылка на Википедию :smile: ).
Встречались прекрасные посты, но без подведения итогов как-будто не законченные. Как нам видится, в конце статьи подсознательно ждешь каких-то выводов, итогов. Нужно стараться соответствовать ожиданиям читателей.
Для тех, кто сталкивался с этими понятиями - пока ничего в этом плане сочинять не надо, но мы планируем их внедрение и сформируем простые и понятные способы их формирования.
Немного теории.
Это те самые СЕО-поля, которые есть практически в любой CMS. Title - это текст, который виден при наведении курсора на закладку в браузере. Также используется поисковыми системами для определения тематики и ранжирования страницы по ключам. Правила заполнения там довольно просты (если нет семантического ядра и списка ключей) - чуть более подробно, чем в названии описать о чем пост (около 70 знаков).
Пример
Дескрипшен - виден только поисковым системам, это более развернутое описание все того же - о чем статья и что в ней описано (до 160 примерно знаков). Может использоваться на странице выдачи поисковой системы как снипет (краткое описание страницы). У нас он пока нормально не прописан (берется введение как дескрипшен), поэтому и результат как по ссылке:
Пример
Тут можно посмотреть как должны выглядеть в редакторе оформленные заголовки, списки и т.п. Картинки редактора кликабельны для открытия в полный размер.
Еще одна точка для увеличения посещаемости и читаемости - заполнение поля "Продукты" в посте. Если описываете какие-то средства - укажите их в этом поле. В этом случае в конце статьи будут ссылки на эти продукты в нашем каталоге, а в карточке продукта, в свою очередь, появится ссылка на Ваш пост.
Удобно тем, кто заинтересовался продуктом, можно сразу посмотреть его, а также увидеть другие посты, где он упомянут.
Удобно и Вам, поскольку тот, кто пришел из поиска на карточку продукта, сможет оттуда напряму перейти в Ваш пост.
Многие задали себе этот вопрос. Ответ прост - для того, чтобы сайт занимал топовые позиции, его статьи должны быть оформлены по всем критериям SEO, быть релевантными заявленной теме (т.е. давать полный и исчерпывающий ответ на затронутый вопрос) и иметь положительные поведенческие факторы ранжирования, т.е. читателю должно быть еще и удобно искать ответ на свою проблему в нашей статье.
Мы видим, что наши авторы накопили огромный массив уникальной практической информации из личного опыта и активно ей делятся на страницах проекта. Осталось подтянуть оформление новых статей (этого мы хотели бы добиться от вас) и максимально подтянуть хотя бы внешние факторы уже опубликованных статей (это уже наша часть).
Давайте вместе сделаем наш сайт еще лучше!
Название
Для названия статьи уже есть прописанные правила. Хотелось бы добавить, что надо всегда стараться, чтобы из него было четко понятно, о чем пойдет речь в статье.
Введение
Важная часть текста, начало которого при текущем положении дел попадает в качестве описания поста в ленте и берется для формирования дескрипшена (description) для поисковых систем. Можно применять Кат (cut), который отсекает ту часть введения, которую Вы хотели вы видеть в качестве описания, можно просто учесть этот момент и в первых 150 знаках введения постараться описать, о чем будет пост.
Во многом благодаря началу введения читатели и поисковые системы определяют о чем пост и стоит ли он внимания.
Резюмируя - введение должно быть и выполнять свою ознакомительную функцию.
Заголовки
Все видели информационные статьи на множестве ресурсов. Как правило, везде присутствуют подзаголовки и сформированное из них Содержание.
Читателю оно помогает ориентироваться в структуре статьи и дает возможность легкой навигации. Поисковым системам также нужна четкая структура документа для верного ранжирования.
Поэтому, нужно использовать заголовки.
В текущей версии редактора теперь доступны заголовки h2, h3, h4, h5 и h6.
Соответственно, хотелось бы видеть статью, разбитую подзаголовками на разделы, подразделы и подразделы в подразделах. Без фанатизма, но в пределах разумного.
Заголовок не нужно использовать просто для выделения какой-то фразы. Можно для этих целей использовать текст, оформленный в виде картинки (альт обязателен).
Учитывайте, что первым подзаголовком в тексте нужно ставить H2, они могут содержать в себе подзаголовки H3, а уже внутри любого из H3 можно вкладывать H4. Получается принцип матрешки.
Пример:
В ближайшее время постараемся привести уровень заголовков к привычному (от h2 до h6) и добавить формирование содержания при более чем 2х подзаголовках.
Графические разделители
Многие авторы применяли и применяют для отделения частей текста графические разделители - картинки, линии, узоры, красивые надписи оформленные графической картинкой.
Можно ли их применять?
Можно, но с ограничениями:
- они должны дополнять подзаголовки, а не заменять их (например, могут завершать последний текстовый абзац перед подзаголовком);
- они должны, как и фотографии, быть загружены на наш сайт (можно для постоянно используемых загрузить один раз и вставлять одной и той же ссылкой);
- для них как и для фото должен быть прописал альт (см. правила оформления фото), тайтл можно не писать.
Форматирование текста
Напишу банальную истину - чтобы текст не смотрелся сплошной простыней текста, увидев которую, хочется закрыть страницу, нужно использовать форматирование текста. Чем более разрежен и структурирован текст, тем легче он воспринимается, тем удобнее и приятнее вникать в содержимое.
Абзацы
Текст должен разбиваться на небольшие, логически законченные абзацы. На наш взгляд, абзац размером более 7 строк (ориентируемся на ПК) смотрится перегруженным. Их нужно формировать так, чтобы при просмотре они были отделены пустой строкой. В текущем редакторе иногда недостаточно просто 2 раза нажать Enter, иногда приходится еще и вставлять принудительный перевод строки тегом br / (в угловых скобках).
Выделение частей текста
Для наглядности какие-то важные моменты стоит выделять:
- жирным
- курсивом
зачеркиванием- подчеркиванием
Как видим, подчеркивание в списках работает некорректно, учитываем этот момент (пишу в ТЗ).
Увлекаться этим, выделяя целые абзацы не стоит. Смысл применения - привлечение внимания читателя к каким-то важным или интересным моментам. Пробегая статью при первом знакомстве по диагонали, читатель цепляет взглядом эти куски, формируя свое мнение, стоит ли вчитываться тут подробнее. Ваша задача - дать ему эти ориентиры. Придираться к этому особо не будем, но инструментом пользоваться в статье надо.
Пожалуйста, не нужно использовать заглавные буквы и писать капслоком ТЕКСТ, ОЖИДАЯ, ЧТО ЭТО ПРИВЛЕЧЕТ ВНИМАНИЕ. Да, привлечёт. Но не в том контексте. На сегодняшний день это элемент неуважения к читателю. Без необходимости выделение фраз капслоком - это как способ усиливать тревогу и создавать дополнительный шум в предложениях. Резюмируем: выделять заглавными буквами слова, фразы, компоненты, цитаты, названия разделов и косметических средств и проч. не нужно.
Цитаты, они же Блоки Внимания
Также стоит изредка применять выделение особо важных моментов в отдельный блок - оформляется цитатой.
Такой блок также привлекает взгляд при чтении и оформлять им что попало просто ради факта применения для администрации не нужно. Но бывают части текста, которые просто просят оформить их отдельно. Соответственно, инструментом надо пользоваться, но не увлекаться.
Обычно такой блок содержит 1-2 предложения, реже - абзац целиком.
Как часто можно ставить? Более 1 блока на 1 экран на ПК уже не смотрится.
Списки
Практически любое перечисление чего-либо гораздо нагляднее выглядит, когда оформлено списком.
Но применять списки имеет смысл в случае, когда это небольшие перечисления, на 1-2 фразы, предложения, в крайнем абзаца в каждом из пунктов списка. БОльшие объемы правильнее оформлять подзаголовками.
Применяем 2 вида списков:
- маркированные (с точками)
- и нумерованные (с цифрами).
Спойлер
Спойлер позволяет скрыть часть не всем интересной информации (состав средства, обещания производителей, описание эффектов и т.п. как правило не уникальную информацию). От поисковых систем эта информация не скрыта, а вот для читателя это удобно - он может сам принимать решение, изучать внимательно подробности или нет.
Инструмент есть, в нужных местах надо им пользоваться.
Фото и картинки
Технические требования:
Заполняйте Тайтл (title). Этот тот текст, который появляется после наведения курсора на картинку. Это удобно и приятно многим читателям.
Обязательно после этого меняйте немного Альт (alt), чтобы он не был полностью идентичен Тайтлу. Это тот текст, который будет написан на месте картинки, если она не загрузилась. Это требование поисковых систем и надо его соблюдать.
Дополнение от Tonlose-stille:
Дополню про alt, хотя это важно менее 1% читателей — тот, кто читает сайт с помощью nvda или других программ экранного чтения вместо изображения услышит именно то, что написано в теге alt. Поэтому я в него пишу — описание фото для человека, который это фото никогда не увидит.
Текст из поля ввода "Описание" при загрузке в фото станет одновременно и Тайтлом и Альтом в редакторе. Править Альт нужно будет после вставки в редакторе, например, добавить или убавить что-то из фразы.
Тайтл и Альт для фото:
Задаются при вставке фото так.
Меняется Альт в редакторе после вставки так.
Фото в нашей тематике прекрасно дополняют, а то и заменяют множество иной информации. Чем их больше - тем интереснее для читателя статья. Если они идут подряд - можно применять галерею. Если без галереи - нужно разделять их пустой строкой.
Прекрасно смотрятся gif. Решаем вопрос с нормальным их добавлением через редактор.
Также были неприятно удивлены слабым сжатием и потерей качества на стороне редактора при добавлении фото. Будем решать этот вопрос.
Использование картинок в качестве разделителя допустимо, если они идут в дополнение к тегам-разделителям и смотрятся уместно. При этом на них также должны быть прописаны Тайтл и Альт.
По размеру фото — действуют старые требования, мы их не меняли, размер фото по ширине автоматически обрезается до 709 пикселей. Авторы утверждают, что если сжать своими силами до этого размера по ширине, то качество получается лучше.
В любом случае можно грузить как и раньше больший размер — он сожмется автоматически. Главное, чтобы устраивало качество.
По Тайтлу и Альт — там, где они прописались из описания при вставке, можно сделать уник, просто приписав к Альту слово Фото:
Т.е. было:
img src=«путь к файлу» title=«Лето 2021» alt=«Лето 2021» /
стало:
img src=«путь к файлу» title=«Лето 2021» alt=«Фото: лето 2021» /
Этого достаточно для уника.
Прочие нормы по фото и картинкам остаются прежними.
Галереи
Если фото оформлены в виде галереи - требования с оформлению самих фото такие же. Обязательны Тайтл и Альт. Их придется вставлять вручную в редакторе. Можно просто скопировать из обычного фото эту часть кода и исправить.
Видео
Практически не применяются в статьях, а жаль. Готовы обсуждать этот момент.
Теги
Довольно важный момент даже не технически, а в плане удобства читателя. Выбранные теги должны четко соответствовать содержимому статьи. С ними тоже будем наводить порядок.
Ссылки (линковка)
Очень правильно и полезно ставить внутри статьи ссылки на другие публикации нашего сайта, как свои, так и коллег. Ставить их можно и нужно только там, где это уместно. Например, если упоминается способ решения проблемы, но ваш пост не подразумевает подробного ее описания - будет уместно сделать ссылку для того, чтобы заинтересовавшийся этим способом читатель мог перейти по ссылке и получить там подробную информацию.
Хороший пример применения внутренних ссылок в статье - Википедия (тут была бы уместна ссылка на Википедию :smile: ).
Подведение итогов
Встречались прекрасные посты, но без подведения итогов как-будто не законченные. Как нам видится, в конце статьи подсознательно ждешь каких-то выводов, итогов. Нужно стараться соответствовать ожиданиям читателей.
Title и Descriptions
Для тех, кто сталкивался с этими понятиями - пока ничего в этом плане сочинять не надо, но мы планируем их внедрение и сформируем простые и понятные способы их формирования.
Немного теории.
Это те самые СЕО-поля, которые есть практически в любой CMS. Title - это текст, который виден при наведении курсора на закладку в браузере. Также используется поисковыми системами для определения тематики и ранжирования страницы по ключам. Правила заполнения там довольно просты (если нет семантического ядра и списка ключей) - чуть более подробно, чем в названии описать о чем пост (около 70 знаков).
Пример
Дескрипшен - виден только поисковым системам, это более развернутое описание все того же - о чем статья и что в ней описано (до 160 примерно знаков). Может использоваться на странице выдачи поисковой системы как снипет (краткое описание страницы). У нас он пока нормально не прописан (берется введение как дескрипшен), поэтому и результат как по ссылке:
Пример
Примеры оформления поста с картинкой из редактора
Тут можно посмотреть как должны выглядеть в редакторе оформленные заголовки, списки и т.п. Картинки редактора кликабельны для открытия в полный размер.
Не техническое, но важное - продукты
Еще одна точка для увеличения посещаемости и читаемости - заполнение поля "Продукты" в посте. Если описываете какие-то средства - укажите их в этом поле. В этом случае в конце статьи будут ссылки на эти продукты в нашем каталоге, а в карточке продукта, в свою очередь, появится ссылка на Ваш пост.
Удобно тем, кто заинтересовался продуктом, можно сразу посмотреть его, а также увидеть другие посты, где он упомянут.
Удобно и Вам, поскольку тот, кто пришел из поиска на карточку продукта, сможет оттуда напряму перейти в Ваш пост.
Зачем все это нужно
Многие задали себе этот вопрос. Ответ прост - для того, чтобы сайт занимал топовые позиции, его статьи должны быть оформлены по всем критериям SEO, быть релевантными заявленной теме (т.е. давать полный и исчерпывающий ответ на затронутый вопрос) и иметь положительные поведенческие факторы ранжирования, т.е. читателю должно быть еще и удобно искать ответ на свою проблему в нашей статье.
Мы видим, что наши авторы накопили огромный массив уникальной практической информации из личного опыта и активно ей делятся на страницах проекта. Осталось подтянуть оформление новых статей (этого мы хотели бы добиться от вас) и максимально подтянуть хотя бы внешние факторы уже опубликованных статей (это уже наша часть).
Давайте вместе сделаем наш сайт еще лучше!