Советы по созданию SEO-friendly приложения / Хабр

Привет, Хабр! Представляю вашему вниманию перевод статьи “React SEO: Tips to Build SEO-friendly Web Applications” автора Paridhi Wadhwani.

О чем пойдет речь

Вы узнаете проблемы, с которыми сталкивается React приложения в части SEO (Search Engine Optimization или оптимизация для поисковых систем). Чтобы быть более точным, вы увидите, как React совмещается с методами поисковой оптимизации. Также, вы будете знать, как Google сканирует сайты на React. В общем, перед индексацией в поисковике страница проходит несколько этапов. Все проходит хорошо, до момента, когда Google бот начинает получать данные страницы. И не получив их, страдает сайт.

Введение

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

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

Как Google бот сканирует веб-страницы?

Из всех поисковиков, Google получает около 90% всех запросов, когда идет речь о SEO. Перед тем как углубляться, как работает SEO для React, давайте посмотрим на то, как происходит сканирование и индексация в Google.

Изображение ниже взято из Google Документации.

Схема работы индексации сайта Google ботом

Примечание: это примерная блок схема. Сам Google бот довольно сложный.

Моменты, которые нужно запомнить:

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

• Когда поисковый робот становится незанятым, он выбирает дальнейшие URL-адреса из очереди, запрашивает, и собирает HTML-код.

• Бот решает, нужно ли собирать и выполнять JavaScript код после анализа HTML. Когда это необходимо, URL-адрес добавляется в очередь рендеринга.

• Впоследствии рендер собирает и выполняет JavaScript для получения HTML кода, который отправляется боту.

• Блок обработки извлекает все URL-теги, упомянутые на странице и добавляет их назад в очередь сканирования.

• Контент добавляется в индекс Google.

Вы заметили разницу между стадиями рендеринга, выполнения JavaScript и обработки HTML? Разница в стоимости ресурсов. Выполнение JavaScript обходится дорого, особенно когда нужно просмотреть 130 триллионов веб-страниц (прим. поэтому Google бот зачастую не выполняет JavaScript код, который необходим для SEO в React).

Общие проблемы SEO

SEO для сайтов на React крайне важно. Ниже приведено несколько SEO проблем, которые разработчики могут исправить.

1. Пустая страница при первом просмотре

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

2. Метаданные страницы

Мета теги прекрасны, потому что они позволяют соц. сетям и google отображать иконки, заголовки и описание конкретной страницы. Но соц. сети зависят от тега страницы для получения информации. Они не выполняют JavaScript для загружаемой страницы. React отображает любой контент, даже мета теги. Поскольку модель приложения остается неизменной для всего приложения/сайта, то становится сложно адаптировать метаданные для каждой страницы.

3. Sitemap

Sitemap (карта сайта) – это файл, в котором находятся все детали о видео, страницах, и других разделах вашего сайта, а также взаимосвязь между ними. Будучи умным поисковым движком, Google просматривает данный файл для более легкого считывания информации сайта. React на имеет встроенных методов для создания sitemaps. Если вы используете React Router для навигации, вам нужно найти способы для создания карты сайта. Хоть это и потребует некоторых усилий.

4. Пользовательский опыт и время загрузки

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

5. Другие SEO соображения

Ниже представлено несколько практик, для построения прекрасного SEO.

• Используйте CDN для обслуживания каждого статического ресурса, как JS, CSS, шрифты и т.п., и используйте адаптивные изображения для уменьшения времени загрузки.

• Улучшение robots.txt файла может помочь поисковым ботам в способах сканирования вашего сайта.

Если вы хотите улучшить производительность вашего React приложения, то React.memo отличное решение для достижения этого.

Сложности React SEO

Давайте разберемся, как и почему оптимизировать SEO для React сложно.

ReactJs выгодный выбор для веб разработки в 2021, но давайте посмотрим с какими проблемами React разработчиком предстоит столкнуться при разработке SEO-дружелюбных сайтов.

1. Использование одностраничного приложения (SPA)

Для сокращения времени загрузки разработчики создают SPA на основе JS. Это и есть главная проблема SEO у React сайтов. Сайты не перезагружают весь контент. Вместо этого, данные страницы обновляются. С помощью этого и реализуется повышенная производительность приложений.

2. Отсутствие динамических SEO-тегов

SPA загружают данные в процессе работы. Таким образом, когда сканер сайта нажимает на определенную ссылку, он затрудняет завершение цикла загрузки страницы. Метаданные не могут обновится. И это является главной причиной, почему бот-сканер не может показать SPA, в конечном счете проиндексировав пустую страницу. В итоге, это всё ухудшает позицию поисковый выдачи. Однако, есть возможность решить данную проблему, разработчикам нужно создать отдельные страницы для Google бота. Но из этого возникает новая проблема. Создание отдельных страниц влечет за собой бизнес расходы сверх сложностей с ранжированием на первой странице выдачи в Google.

3. SEO проблемы с SPA

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

Как сделать React приложения SEO-дружелюбными

Ниже представлены подходы для улучшения SEO в React.

1. Изоморфный React

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

2. Пререндеринг

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

Преимущества:

Недостатки:

• Это не бесплатно

• Не подходит для страниц, данные которых меняются часто

• Занимает много времени для загрузки, если сайт слишком большой

3. Ренденринг на стороне сервера: Получение HTML файлов со всем содержимым

Если вы хотите построить React приложение, вам нужно иметь точное представление между рендерингом на стороне клиента и на стороне сервера. При рендере на стороне клиента Google бот и браузер получают пустые HTML-файлы с меньшим контентом или вообще без него.

После этого JavaScript код загружает данные с сервера и позволяет пользователям просматривать их на своих экранах. Однако, рендер на стороне клиент сталкивается с рядом SEO проблем. Это потому, что Google сканер не может увидеть какой-либо контент или видит его меньше необходимого, что мешает индексировать страницу должным образом. С другой стороны, при рендере на стороне сервера, браузер и Google роботы получают HTML файл со всем содержимым. Это помогает ботам выполнять индексацию и улучшает рейтинг выдачи без каких-либо хлопот.

Лучшие React SEO практики

Данные практики дадут вам ответы на вопрос, как сделать ваше React приложение SEO-дружелюбным:

1. Использование React Router

Скорее всего вы знаете, что React использует SPA (single-page application). Однако, вы можете использовать модель SPA более оптимально, если вы будете описывать SEO элементы и правила определённым образом на ваших страницах. Руководство в том, что страницу нужно открывать как отдельный URL адрес без хэштега (#).

(Согласно Google, он не может читать URL адреса с хешем, и следовательно, не может индексировать какие-либо URL созданные React).

Следовательно, мы создаем URL-адреса так, чтобы они открывались на отдельных страницах. Мы должны использовать React Router хуки в URL- адресах. Ниже приведен образец:

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

2. Регистр URL

Google считает определенные страницы как отдельные, когда URL-адрес содержит строчные или прописные буквы.

Например:
/vendi
/Vendi

Эти два адреса Google будет рассматривать как две отдельные страницы. Чтобы избежать данного дублирование, всегда пишите адреса в нижнем регистре.

3. Использование “href” в ссылках

Убедитесь, что вы задаете “href” ссылкам. К сожалению, Google бот не может отслеживать переходы, реализованные с помощью onClick. Следовательно, становится важным указывать href в ссылках для облегчения работы Google бота в обнаружении других страниц и посещения их.

4. React Helmet

Один из важных компонентов SEO это метаданные. Таким образом, они должны появляться в исходном коде, даже при использовании React. Использование одинакового описания и заголовка на всех страницах может быть не достаточным для CTR (click through rate, показатель кликабельности) и других показателей SEO.

Вот когда React Helmet вступает в игру. Ниже пример структуры кода вместе с метаданными:

Если описание элемента не получается универсализировать, попробуйте заполнять описание первыми 160 символами содержимого страницы.

Удостоверьтесь, что структура данных элемента сохраняется в исходном коде вместе с метаданными. (Схема организации, продукт и т.д.)

Для примера, ниже представлены сырая и отрисованная версии сайта yolcu360.com. Структурированные данные отображаются в защищенном виде в обеих версиях. В идеале, мы не должны видеть такой разницы.

Сырая:

Отрисованная:

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

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

5. Код ошибки 404

Все дефектные страницы имеют код ошибки 404. Следовательно, это напоминание о необходимости настройки файлов, таких как server.js и route.js.

6. Изображения

Вы должны указывать изображения на страницы с помощью “img src”. Согласно исследованию, хоть изображения отображаются в элементах страницы без сложностей, сканер не может их индексировать.

Правильное использование:

Использование чего-либо как CSS background вместе с React может привести к трудностям в индексации изображений.

Неправильное использование:

7. React.Lazy

Внедрение lazyload(отложенная загрузка) поможет пользователям быстрее просматривать ваш сайт и окажет положительное влияние на оценку скорости загрузки в Google.

Вы можете найти этот пакет на npm.

Вы можете использовать React-Snap для оптимизации производительности сайта. Ниже приведен пример:

По сравнению с другими JavaScript фреймворками, такими как Vue или Angular, React может обходиться более маленькими файлами. Он не публикует нежелательный и неприменимый код. Следовательно, это помогает значительно увеличить скорость страницы. Для ясности, вы можете разбить ваш 2 МБ JS файл на несколько 60-70 КБ файлов и запустить их в отдельных процессах.

Заключение

Хотя React и SEO 2021 широко используются в наши дни, с ними связано несколько важных терминов. Которые включают React Helmet, React Router и React-snap. Однако, когда используется JavaScript, имейте в виду, что Google вычисляет и сканирует HTML сайты быстрее и лучше, нежели сайты на JavaScript. Но это не означает, что Google не можете сканировать JS сайты. Единственная вещь, на которую нужно обратить внимание, это необходимость быть осторожным и точно знать, какие сложности могут возникнуть на пути.

Часто задаваемые вопросы

Как React может быть полезен в SEO-оптимизации?

Пререндер и рендер на стороне сервера – два важных пути для улучшения SEO вашего React приложения.

Для чего используется React Helmet?

React Helmet — это библиотека, используемая для обработки тега head, включая метаданные и язык вашего веб-приложения. Это позволяет React сайту быть более SEO-дружелюбным.

Могут ли React SPA быть SEO-дружелюбными?

Next.js javascript фреймворк помогает React проектам решить SEO проблемы в SPA

Что такое изоморфное React приложение?

React приложение, которое может работать как на стороне сервера, так и на стороне клиента называется изоморфным.

Next.js SEO-дружелюбно?

Да, с Next.js вы можете создавать React сайты, которые с легкостью могут быть просканированы поисковыми движками.

ЧПУ (Человеко-понятный УРЛ, SEO-Friendly URL) — что это такое?

Это адрес страницы, понятный не только для поисковых роботов , но и для людей.

Человеко-понятный URL всегда соответствует структуре ресурса и содержимому страницы. Например, в URL https://contship.ru/uslugi/avtomobilnyie-perevozki/ https – это протокол, contship.ru – доменное имя, uslugi – раздел услуг компании, avtomobilnyie-perevozki – название и содержание самой страницы.

Похожие термины

CGI-параметр (Common Gateway Interface)

В переводе на русский обозначает «параметр общего шлюзового интерфейса». Для добавления CGI-параметров к запросу необходимо в URL-адрес прописать символ «?», после чего задать имя и значения параметра. Несколько параметров принято раздел…

Подробнее

SEO-оптимизатор / SEO-оптимизация

Тавтология. Термин дословно переводится следующим образом: «Оптимизация под поисковую систему». Если расшифровать термин SEO-оптимизатор, то получится «оптимизатор по оптимизации под поисковую систему». Та же ситуация с выражением SEO-оп…

Подробнее

SERP (Search Engine Results Page)

В переводе с английского «страница результатов поиска». Она создается в автоматическом режиме индивидуально для каждого пользователя в соответствии с его поисковым запросом. В зависимости от запросов, истории поиска, местоположения польз. ..

Подробнее

SERM (Search Engine Reputation Management)

В переводе с английского «управление репутацией в поисковых системах». Действия, направленные на управление репутацией бренда, компании, товара, персоны в интернете с привлечением инструментов поисковой оптимизации.С помощью SERM можно п…

Подробнее

URL (Uniform Resource Locator)

Унифицированный указатель информационных ресурсов. URL – это адрес, присвоенный HTML-странице, CSS-файлу, изображению и другому уникальному ресурсу в интернете. URL бывает абсолютным и относительным. Абсолютный – начинается с указания пр…

Подробнее

A B C G I J K L M N P R S T U W А Б В Г Д З И К Л М Н О П Р С Т У Ф Ц Ч Ш Я

Категории словаря

Другие термины Маркетинговые термины Общие понятия и термины Поведенческие факторы и аналитика Поисковые запросы Санкции и фильтры Ссылочные и социальные факторы Текстовые факторы Технические термины и вёрстка

Советы и инструменты для написания оптимизированного для SEO контента

Хотите, чтобы ваш бизнес рос без увеличения маркетингового бюджета? Затем убедитесь, что вы создаете оптимизированный для SEO контент.

Вот как это работает.

Оптимизированные для поисковых систем (SEO) веб-сайты с солидным авторитетом и хорошим профилем обратных ссылок занимают более высокое место в поисковых системах.

Если ваш веб-сайт появится на главной странице, вы получите больше кликов, репостов, лайков и привлечения клиентов.

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

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

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

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

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

А пока давайте остановимся на теме SEO-оптимизированного контента.

Вот о чем вы прочтете.

1. Используйте заголовки и подзаголовки
2. Добавляйте ссылки на предыдущий контент
3. Оптимизируйте длину статьи
4. Грамотно выбирайте ключевые слова
5. Оптимизируйте изображения
6. Сделайте контент доступным для общего доступа
9002 Инструменты оптимизации контента

Прежде чем мы углубимся в детали, давайте удостоверимся, что мы находимся на одной странице.

Что означает дружественность к SEO?

SEO-дружественный контент — это тип контента, созданный таким образом, чтобы поисковые системы занимали его высокое место.

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

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

Знаете ли вы?  С Конструктором веб-сайтов GetResponse вы можете создать собственный веб-сайт совершенно бесплатно и в кратчайшие сроки. Он поставляется с множеством готовых шаблонов, интуитивно понятным пользовательским интерфейсом и использует искусственный интеллект, чтобы помочь вам автоматически создать веб-сайт с нуля. Узнайте больше и создайте свой бесплатный веб-сайт сегодня!

Как сделать ваш контент оптимизированным для SEO

 1. Используйте заголовки и подзаголовки

Использование заголовков и подзаголовков делает несколько вещей для SEO-оптимизации.

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

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

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

2. Добавьте ссылки на предыдущий контент

Одним из способов, которым поисковые системы ранжируют контент, является количество получаемых обратных ссылок.

Хороший контент имеет тенденцию получать много обратных ссылок — как внешних, так и внутренних.

Если вы хотите привлечь трафик и повысить ранжирование своего старого контента, не забудьте указать ссылку на него в новых сообщениях.

Это помогает роботам поисковых систем — и людям — находить ваши лучшие статьи.

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

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

3. Оптимизируйте длину своей статьи

Раньше большинство сообщений в блогах, которые вы читали, содержали до нескольких сотен слов. Это была игра чисел: чем больше постов вы опубликуете, тем больше трафика получите.

В наши дни это редкость. Даже в блоге GetResponse, который вы сейчас читаете, вы в основном найдете статьи, содержащие более 1500 слов и публикуемые реже.

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

Писать статьи из 300 слов уже недостаточно. Но это также не о разбавлении вашего контента.

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

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

4. Грамотно выбирайте ключевые слова

Некоторые маркетологи любят просто сесть и начать писать. Они оставляют SEO-оптимизацию на последний момент.

Другие начинают с написания ключевых слов, которые они хотят включить в свой контент.

Такой подход я предпочитаю.

Вы начинаете с определения ключевых слов, относящихся к вашей теме. Вы либо сами придумываете их, либо используете инструменты планирования ключевых слов, такие как Google, используете более продвинутый инструмент SEO, такой как Ahrefs или KWFinder (сравните их здесь), либо нанимаете SEO-агентство, чтобы сделать это за вас. .

Если вы еще не начали этот процесс, вам следует начать с этого руководства по исследованию ключевых слов.

И как только вы начнете писать, используйте ключевые слова в заголовке, заголовках, мета-описаниях, тегах ALT и основном тексте.

5. Оптимизируйте изображения

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

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

Убедитесь, что вы также оптимизировали размер фотографии. Слишком большие изображения замедлят время загрузки и навредят SEO.

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

6. Сделайте контент общедоступным

Итак, вам удалось написать SEO-дружественную, содержательную и интересную статью, которую люди хотят читать. Следующий шаг — сделать его общедоступным. Такие веб-сайты, как ShareThis и AddThis, упрощают добавление кнопок социальных сетей на ваш веб-сайт, чтобы люди могли легко делиться контентом.

7. Пишите качественный контент

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

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

Инструменты для оптимизации контента

Редактор Hemingway

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

Grammarly

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

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

Read-Able

Read-Able похож на Hemingway Editor в своей способности анализировать ваши статьи на основе удобочитаемости. Но вместо того, чтобы выделять предложения, которые трудно читать, он дает вашему тексту общую оценку удобочитаемости. Оценка говорит вам, какая возрастная группа сможет легко прочитать страницу. Если у вас есть URL-адрес веб-сайта, вы можете ввести URL-адрес вместо текста.

HELP.PLAGTRACKER

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

ПРОВЕРКА ПЛОТНОСТИ КЛЮЧЕВЫХ СЛОВ

Проверка плотности ключевых слов сканирует ваш текст или URL-адрес, чтобы узнать, сколько раз вы цитировали каждое ключевое слово. Это особенно полезно, если у вас очень большая статья, и вы хотите убедиться, что она не перенасыщена ключевыми словами. Как упоминалось ранее, ключевые слова должны занимать около 1-2% текста.

SEO-оптимизация

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

Ваша очередь

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

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

Ускоренный курс по созданию списка адресов электронной почты с помощью SEO

SEO Дружественный веб-дизайн

Что такое дружественный к SEO веб-дизайн?

Веб-дизайн SEO — это практика создания веб-сайтов, полностью доступных и индексируемых поисковыми системами.

Почему SEO-оптимизированный веб-дизайн важен?

Все просто:

SEO-оптимизированные сайты обычно получают больше трафика, чем сайты, игнорирующие поисковые системы.

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

Передовой опыт

Полностью индексируемые страницы

ОЧЕНЬ важно, чтобы Google мог полностью индексировать содержимое вашего сайта. Вот как это сделать:

Использовать замещающий текст

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

Вот почему Google рекомендует:

«Укажите описательное имя файла и описание атрибута alt для изображений».

Например, вот изображение на моем сайте рейтинга канала Backlinko YouTube по ключевому слову «обратные ссылки»:

И чтобы помочь поисковым системам понять, что это за изображение, я дал своему изображению описательное имя файла:

backlinko-youtube -video-ranking-for-backlinks.png

Я также использовал замещающий текст, точно описывающий мое изображение.

Backlinko Видео YouTube – ранжирование по «обратным ссылкам»

Скрытый контент

Контент, скрытый за формами и расширяемыми меню, может быть трудно индексировать поисковыми системами.

Например:

Веб-сайты иногда делают разделы своего контента скрытыми за вкладками или «аккордеонами».

(Это очень распространено для контента, предназначенного для быстрой загрузки на мобильных устройствах)

Несмотря на то, что у Google обычно нет проблем с индексированием этого контента, иногда они делают:

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

Предоставить стенограммы

Как и в случае с изображениями, Google не может распознавать контент в видео- или аудиоформате. Им нужен текст.

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

Not Blocked

Метатег «noindex» в Robots.txt сообщает поисковым системам НЕ индексировать страницу.

Это полезно для страниц, которые находятся в стадии разработки или предназначены только для внутреннего персонала.

Но вы удивитесь, как часто этот тег используется неправильно.

Например, у Чада Берджесса был клиент, который случайно применил тег noindex к большому фрагменту своих страниц.

Это (очевидно) привело к значительному падению органического трафика:

И когда тег noindex был удален, их позиции быстро восстановились:

Используйте SEO-браузер ползать?

Используйте SEO-браузер.

SEO-браузер показывает, как ваша страница выглядит для поисковых систем.

(Спойлер: ваш сайт будет выглядеть НАМНОГО иначе, чем в обычном браузере, таком как Chrome)

Я рекомендую использовать бесплатный и полезный браузер Zeo SEO:

Просто введите URL вашего сайта в инструмент…

… получить вы увидите свой контент глазами паука поисковой системы.

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

Но если вы заметили, что ключевые части вашей страницы невидимы в SEO-браузере, они также невидимы для Google.

Итак, это то, что вы хотите исправить как можно скорее.

Извлечение и рендеринг

Консоль поиска Google имеет изящную маленькую функцию проверки URL.

Это сообщит вам, если у Google возникнут проблемы с доступом к вашей странице.

Если все в порядке, вы увидите зеленую галочку.

Простая архитектура веб-сайта

Архитектура веб-сайта может показаться сложной. Но это не так.

Архитектура веб-сайта — просто то, как все страницы вашего сайта связаны друг с другом.

В общем, вы хотите, чтобы архитектура вашего сайта была простой.

Другими словами:

Если у вас такая запутанная неразбериха, Google будет трудно найти и проиндексировать все ваши страницы.

С другой стороны, такая архитектура НАМНОГО упрощает работу Google.

Уникальный контент

Google НЕНАВИДИТ дублированный контент.

Фактически, Google заявляет, что если они найдут сайт с большим количеством дублированного контента:

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

Короче говоря:

Вы хотите, чтобы на каждой странице вашего веб-сайта был уникальный контент.

Это легко для 50-страничного блога.

А как насчет местного бизнеса, у которого есть отдельная страница для более чем 500 местоположений? Или сайт электронной коммерции с 10 000 страниц товаров?

Применяются те же правила.

Нелегко написать что-то на 100 % уникальное о расположении вашей химчистки в Бруклине, которое сильно отличается от вашего местоположения в Квинсе.

Но если вы хотите, чтобы эти страницы занимали высокие позиции в Google, вам нужно это сделать.

Фактически, Google предостерегает от использования шаблонного контента, который повторяется на нескольких страницах:

Итог?

Дублированный контент — это SEO-яд. Избегайте этого любой ценой.

Используйте тег Canonical

В некоторых случаях на вашем сайте может быть несколько разных страниц с похожим содержанием… но вы хотите, чтобы только ОДНА из них занимала место.

(Например, у вас есть страница для каждого размера и цвета теннисной обуви, которую вы продаете)

Что ж, вы же не хотите, чтобы вас ругали за дублированный контент.

Но писать абсолютно уникальный контент для красной, синей, зеленой и желтой версии кроссовок также не имеет смысла.

Какой ответ?

Канонический тег.

Этот тег сообщает поисковым системам:

«Эта страница достойна индексации. Остальные — просто варианты этой страницы».

Недостатком канонического тега является то, что «страницы вариантов» не будут проиндексированы.

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

Структура URL-адресов

URL-адреса ОЧЕНЬ недооценены.

На самом деле, большинство людей не задумываются о своих URL-адресах. И в итоге они выглядят так:

Бездумные URL-адреса вредны для пользователей (странные URL-адреса трудно запомнить).

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

Итак, вы хотите избегать URL-адресов, которые не описывают вашу страницу.

https://website.com/cat=90/10/09/2019/pageref810a.

Вместо этого используйте URL-адреса, которые дают пользователям и поисковым системам ключ к теме вашей страницы. И это легко запомнить.

Например, для этого сообщения о методах SEO мой URL-адрес:

https://backlinko.com/seo-techniques

Simple.

Ограниченное количество страниц

Если бы я мог дать людям только ОДИН совет по SEO, он был бы таким:

Ограничьте количество страниц на вашем сайте.

Почему это важно? Две причины…

Во-первых, больше страниц = больше потенциальных проблем.

С сайтом из 100 страниц бесконечно работать легче, чем с сайтом из 100 000 страниц.

Сайты с большим количеством страниц чаще сталкиваются с такими проблемами, как:

• Дублированный контент
• Тонкое содержимое
• Штрафы Google Panda
• Устаревший контент

Во-вторых, небольшие сайты с несколькими потрясающими страницами более оптимизированы для SEO.

(По крайней мере, по данным Google)

Например, мой сайт ежемесячно посещают 193 964 органических посетителя:

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

На самом деле, мой сайт имеет всего 128 проиндексированных страниц:

Высокий пользовательский опыт

Когда дело доходит до пользовательского опыта и SEO, Google говорит лучше всего:

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

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

Теперь пришло время перевернуть сценарий.

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

Почему это важно для SEO?

Во-первых, Google тщательно измеряет так называемые «UX-сигналы». Если Google увидит, что людям нравится ваш контент, он поднимется выше в результатах поиска.

(Обрабатывается алгоритмом Google под названием «RankBrain»)

Во-вторых, если ваш сайт классный, на него будет ссылаться больше людей.

(Ключевая часть SEO)

Итак, вот 3 совета, как создать отличный пользовательский интерфейс для пользователей и Google.

Mobile-First Design

63% всего трафика веб-сайтов в настоящее время поступает с мобильных устройств.

Что означает:

Не имеет смысла СНАЧАЛА создавать десктопную версию… потом делать мобильную версию.

Вместо этого вы хотите создать сайт для мобильных устройств… ТОГДА позаботьтесь о потребностях пользователей настольных компьютеров.

Это также хорошо для SEO.

В настоящее время Google использует «Mobile-first Index», который рассматривает ТОЛЬКО мобильную версию вашего веб-сайта.

Итог?

Если ваш сайт оптимизирован для мобильных устройств, он ПОДГОТОВЛЕН, чтобы удовлетворить пользователей и Google.

Описательные заголовки

У вас есть две основные цели с тегом title:

Цель №1: Опишите, о чем ваша страница.

На самом деле, в рекомендациях Google Quality Rater говорится, что «описательные или полезные» заголовки являются одной из самых важных частей высококачественных результатов поиска.

Таким образом, вы хотите избежать общих заголовков, таких как «Домашняя страница» или «Контакты».

Например, вот тег title для моей домашней страницы:

SEO Training and Link Building Strategies — Backlinko

Это дает пользователям (и поисковым системам) ГОРАЗДО больше информации, чем общий заголовок вроде: «Добро пожаловать на мой сайт».

Цель № 2: Используйте целевое ключевое слово в заголовке.

Google придает ОЧЕНЬ большое значение вашим тегам заголовков. Поэтому не забудьте один раз включить целевое ключевое слово в заголовок.

Например, мое целевое ключевое слово для этого поста — «Инструменты SEO:

Поэтому я обязательно включил эту фразу в свой заголовок:

Еще раз:

Достижение этих двух целей поможет вашим живым посетителям сайта дышать.