Ключевые концепции SEO и способы их применения на вашем сайте
Обязанности веб-разработчика шире, чем просто проектирование и разработка приложения. Помимо добавления в приложение нужного набора функций, вы должны предпринять упреждающие действия, чтобы убедиться, что пользователи воспримут его.
Забота о SEO - это то, что подпадает под эту категорию.
Если вы хотите, чтобы ваше приложение показывало хорошие результаты в рейтинге поисковых систем, использование методов SEO при разработке приложения является неизбежным злом для каждого веб-разработчика.
Это важное руководство по SEO для веб-разработчиков позволит вам быть в курсе последних методов SEO, которые вы должны использовать при разработке веб-приложения, менее чем за 10 минут.
Прежде всего, для тех, кто не совсем знаком с концепцией SEO, давайте рассмотрим основы.
Что такое SEO и зачем оно вам нужно?
SEO расшифровывается как поисковая оптимизация. Сам этот термин указывает на то, что такое SEO.
Когда вы вводите несколько ключевых слов для поиска в поле поиска браузера, поисковая система должна решить, как отображать результаты, какие веб-страницы включать в 10 лучших результатов, а какие следующие.
Если вы хотите привлечь пользователей, которые ищут контент, похожий на то, что вы предлагаете, ранжирование как можно ближе к началу списка результатов - лучший способ заставить их посетить ваш сайт.
Алгоритмы поисковой системы используют данные, которые поисковая система хранит о каждой веб-странице, чтобы решить, какие веб-страницы предоставляют контент, наиболее близкий к тому, что ищут ключевые слова пользователя.
Цель SEO - убедить алгоритмы поисковых систем в том, что ваша веб-страница - это та, на которой есть контент, который ищет пользователь.
В дополнение к содержанию веб-страницы алгоритмы ранжирования предпочитают отображать веб-сайты, которые предлагают лучший пользовательский интерфейс, в верхней части страницы результатов.
Объедините эти два требования, и вы получите потребность в веб-разработчиках, которые позаботятся о SEO-аспектах веб-сайта во время разработки.
Как разработчик, вы несете ответственность за техническую сторону SEO, которая требует некоторых изменений кода, дополнений и настроек для оптимизации.
Теперь, когда основы раскрыты, давайте приступим к основным советам по SEO для веб-разработчиков.
Добавить соответствующие мета-теги HTML
Сканеры поисковых систем просматривают определенные HTML-теги на веб-странице, чтобы определить тип контента, который они обслуживают. Два наиболее важных тега для SEO - это теги title и description.
Если вы сами пишете метатеги веб-сайта, вам необходимо учитывать роль ключевых слов.
Что такое ключевые слова?
В терминах поисковых систем ключевые слова - это этапы, которые пользователи вводят в поле поиска браузера.
Чтобы привлечь пользователей поисковой системы на вашу веб-страницу, вам сначала необходимо определить ключевые слова, по которым пользователи ищут контент, похожий на то, что вы предлагаете.
После того, как вы определили релевантные ключевые слова, вы должны использовать их в содержании веб-страницы.
Наиболее важные места для использования указанных ключевых слов - это тег заголовка веб-страницы и тег H1.
Вам также следует использовать ключевые слова внутри H2 и других заголовков и абзацев. Однако они оказывают меньшее влияние на алгоритм ранжирования поисковой системы, чем упомянутые ранее.
Будьте осторожны, чтобы не злоупотреблять ключевыми словами на веб-странице. Алгоритмы ранжирования рассматривают чрезмерное использование ключевых слов как попытку ввести алгоритм в заблуждение и наказать вас за это.
Какое соотношение между ключевыми словами и словами лучше? Это вопрос на миллион долларов.
Тег заголовка
Наиболее эффективная позиция для размещения ключевых слов в теге заголовка - это его начало. Если это невозможно, используйте ключевое слово в любом месте заголовка.
Хорошо оптимизированный тег заголовка не должен быть длиннее 60 символов, включая пробелы и другие специальные символы.
<title>Introduction to SEO for beginners</title>Мета-тег описания
Теги описания не имеют большого значения для результатов алгоритма ранжирования. Но поскольку предоставленное вами описание отображается в поисковой выдаче для пользователей, чтобы получить представление о содержании веб-страницы, оно должно быть написано так, чтобы заставить пользователей щелкнуть ссылку на вашу веб-страницу.
<meta name="description" content="A short description that describes the content in the web page">Файл robots.txt и метатеги robots
Используйте файл robots.txt, чтобы указать поисковым системам не сканировать страницы, указанные в файле. Обычно блокировка поисковых роботов с определенной веб-страницы используется для того, чтобы запросы поисковых роботов не перегружали сервер приложения. Делайте это только в том случае, если уменьшение количества запросов, отправляемых на сервер, критично для производительности веб-страницы.
Вы также можете предотвратить сканирование неважных страниц на сайте.
Вы можете использовать файл robots.txt, чтобы предотвратить индексирование веб-страниц в Google или аналогичных поисковых системах. Но это не совсем удачно. Если есть другая страница, которая ссылается на текущую страницу, она все равно может быть проиндексирована.
Если вы хотите раз и навсегда исключить страницу из индексации, добавьте метатег noindex robots в ее HTML-код.
<meta name="robots" content="noindex">Ссылки Follow и Nofollow
Сканер обычно сканирует связанные страницы внутри страницы, которую он уже посещает.
Иногда вам может потребоваться запретить привязку связанной веб-страницы к вашему сайту или не сканировать ее с текущей страницы. В таких случаях вы можете передать nofollow в качестве значения атрибута rel.
<a href="https://example.com" rel="nofollow">Однако Google объявил, что с 2020 года они используют nofollow только в качестве подсказки, а не правила. Таким образом, использование nofollow только намекнет Google, что вы не хотите, чтобы связанная страница сканировалась. Google может решить поступить так, как вы хотите, а может и не решить.
Если вы не хотите, чтобы поисковый робот переходил по какой-либо из ваших ссылок, вы можете проинструктировать их, используя одну строку в вашем метатеге robots.
<meta name="robots" content="nofollow">Структурированные данные
Возможно, вы видели, как иногда на странице результатов поиска отображаются результаты в специальных форматах. Например, если вы введете в Google «рецепты макарон», на странице результатов отобразятся специальные карточки со ссылками на разные страницы рецептов.
Google и большинство других поисковых систем используют структурированные данные, представленные на веб-странице, для извлечения данных, чтобы отображать специальные функции, подобные этой.
Словарь, используемый для записи структурированных данных, в основном похож на словарь, определенный в schema.org. Однако вам следует обратиться к документации поисковой системы, чтобы узнать, какой именно формат она принимает. Если вы оптимизируете для Google, вы можете протестировать и проверить свои структурированные данные с помощью Google’s Rich Results Test.
Теперь давайте посмотрим, как мы можем использовать структурированные данные на нашей веб-странице, чтобы предоставлять Google правильную информацию о ее содержании.
Если наша веб-страница является страницей рецептов, вы можете использовать следующие структурированные данные (записанные в формате JSON-LD), чтобы указать имя, автора, оценки и другие соответствующие данные о рецепте:
В дополнение к рецепту Google предоставляет несколько других типов функций, включая статьи, часто задаваемые вопросы, книги, размещение вакансий и местный бизнес. Обратитесь к документации разработчика Google, чтобы узнать больше о различных форматах структурированных данных и типах контента.
Скорость загрузки страницы
Скорость загрузки страницы - один из основных аспектов обеспечения лучшего взаимодействия с пользователем.
Опрос 2018 года, проведенный Google, показал, что вероятность отказов увеличивается на 32%, когда время загрузки страницы увеличивается с одной до трех секунд, и на 90%, когда время загрузки страницы увеличивается с одной до пяти секунд.
Из-за важности скорости страницы для пользовательского опыта Google начал использовать ее в качестве фактора ранжирования в своем алгоритме ранжирования. Теперь увеличение скорости загрузки страницы является причиной того, что ваша веб-страница занимает более высокое место на странице результатов Google.
Хотя важно, чтобы ваша веб-страница загружалась быстро, также важно, чтобы пользователям казалось, что она загружается быстро. Вы должны сократить время, необходимое для отображения некоторого контента на странице, чтобы удерживать внимание пользователя, в то время как остальной контент загружается в фоновом режиме и заставляет пользователя чувствовать, что ваша страница загружается быстрее.
Маяк Google - отличный инструмент для измерения эффективности вашего сайта. Его оценка производительности основана не только на фактической скорости страницы в идеальных условиях сети. Это влияет на производительность вашего сайта даже при плохих соединениях 3G. Lighthouse - отличный инструмент для измерения того, как время загрузки вашей страницы будет ощущаться реальным пользователем.
Вы можете использовать несколько подходов для увеличения скорости загрузки веб-страницы:
- Минимизируйте CSS, JavaScript и HTML.
- Уменьшите количество перенаправлений.
- Воспользуйтесь кешированием браузера.
- Оптимизируйте размеры изображений.
- Воспользуйтесь ленивой загрузкой.
- Воспользуйтесь преимуществами Ускоренной мобильной страницы (AMP) от Google.
Мобильность
Поскольку большая часть онлайн-контента ориентирована на мобильные устройства, Google также принял меры, чтобы учесть удобство веб-страницы для мобильных устройств в своем алгоритме ранжирования.
Веб-сайт, оптимизированный для мобильных устройств, повышает удобство работы пользователей мобильных устройств. Поскольку количество пользователей, выходящих в Интернет через свои мобильные телефоны, находится на рекордно высоком уровне, не составит труда преобразовать ваше веб-приложение для лучшего обслуживания мобильных пользователей.
Есть три основных подхода, которые вы можете предпринять, чтобы сделать свой сайт более удобным для мобильных устройств.
Используйте адаптивный дизайн
Преобразование текущего дизайна в адаптивный окажет наименьшее влияние на существующую кодовую базу.
Вы можете установить новые метатеги области просмотра и настроить CSS, чтобы он был более гибким для различных разрешений экрана, чтобы сделать веб-дизайн адаптивным.
Используйте динамический дизайн
Динамический дизайн обслуживает различный HTML-контент для мобильных и настольных пользователей после определения типа пользовательского агента, запрашивающего контент. Реализация требует больше усилий, чем адаптивный дизайн, потому что он должен обслуживать страницы, отображаемые по-разному, для мобильных и настольных пользователей.
Используйте мобильный поддомен
Некоторые веб-приложения используют отдельный поддомен для мобильных пользователей. Обычно субдомен имеет имя, похожее на mobile.example.com или m.example.com. Этот подход требует гораздо больше времени и усилий для реализации. Обычно это не рекомендуется для веб-сайтов небольшого или среднего размера, особенно если у вас нет двух разных версий вашего веб-сайта.
Заключение
Хотя беспокойство по поводу SEO может выглядеть как нечто, выходящее за рамки описания работы веб-разработчика, я надеюсь, что эта статья смогла убедить вас в том, что рассмотрение SEO является обязательным условием для предоставления полноценного веб-приложения вашим клиентам.
Хотя в этой статье упоминаются наиболее важные аспекты SEO, на которых веб-разработчики должны сосредоточиться, несколько других технических факторов влияют на решения алгоритмов ранжирования.
В качестве следующего шага к совершенствованию SEO в качестве веб-разработчика вы можете изучить дополнительные технические приемы SEO и использовать их, чтобы повысить рейтинг своего сайта в верхней части страницы результатов поиска.
Спасибо за прочтение!
