Что такое SEO?
Search Engine Optimization (SEO) в вольном переводе означает «оптимизация поисковых систем» и направлена на ранжирование веб-сайтов в поисковых запросах на таких сайтах, как Google, Bing и Yahoo. Конечно, в наши дни мы концентрируем свои усилия на поиске Google, который является самым сильным инструментом онлайн-поиска, но SEO-практики полезны и за его пределами.
Поисковые системы имеют роботов, которые настроены на чтение веб-страниц, определяя, интересно ли их содержание пользователю, осуществляющему поиск. Понимая, как работают эти роботы, мы можем сделать наш сайт особенным.
📌 HTML5
Существует много материалов о SEO, но в разработке мы сосредоточимся на структуре HTML и, более конкретно, на соглашениях, установленных в HTML5, и тегах, которые он ввел. В общем, программист работает вместе, когда думает о лучших практиках SEO, и есть эксперты по этому вопросу. Однако в некоторых ситуациях нам приходится заниматься не только разработкой, но и ранжированием сайта. Для этого я оставлю в конце текста несколько ссылок, которые носят более теоретический и концептуальный характер. Основное внимание здесь уделяется пониманию иерархии и значимости программирования в этом процессе.
Теги
Для нас, разработчиков, большая часть работы по SEO заключается в организации HTML-тегов таким образом, чтобы поисковые системы могли правильно их проползать («отображение» или «сканирование»).
⚠️ Важно: теги, которые мы вводим в HTML, являются семантическими и не мешают верстке, они действительно служат для организации кода и для того, чтобы роботы могли их читать и распределять по категориям.
Структура
Мы уже знаем структуру HTML: <header></header> для параметров страницы и <body></body> для содержимого, которое становится видимым. Самые важные теги мы будем делать внутри тега body, и об этом мы поговорим далее.
Заголовок
Для заголовка важно использовать тег <header></header>, указывающий, где начинается и заканчивается наш заголовок. У нас может быть более одного заголовка.
Нижний колонтитул
Для нижнего колонтитула мы используем тег <footer></footer>. Мы можем иметь более одного колонтитула на странице, как показано на следующем изображении:
Разделы
Тег <section></section> предназначен для разграничения области действия компонента или содержимого. На нашем сайте может быть несколько разделов, и в них мы, вероятно, будем использовать теги h (h1, h2, h3, h4, h5, h6), p, плюс изображения и многое другое.
⚠️ Важно: Мы можем использовать тег <div></div>, но он более общий и поэтому менее ранжируемый. Перед использованием div убедитесь, что нет возможности сделать элемент более конкретным с помощью тега. Если вы сомневаетесь, всегда обращайтесь к официальной документации по HTML5.
Изображения
Изображения очень важны для ранжирования нашего сайта. Давайте проанализируем эту образную структуру, которая прекрасно оформлена семантически:
<figure>
<img src="pasta/tema/nome.jpg" alt="Descição da Imagem" title="Titulo da Imagem">
<figcaption>Descição da Imagem</figcaption>
</figure>
- Мы используем тег
<figure>для указания области видимости изображения. В данном случае мы используем два внутренних тега:<img>и<figcaption></figcaption>, поэтому имеет смысл «обнять» их оба тегом<figure>. - Тег
<img>весьма актуален для SEO. В нем очень важно использоватьtitleиalt. Заголовокtitleпредназначен для того, чтобы при наведении мыши на изображение появлялось описание. С другой стороны,altпредназначен для доступности и не виден при загрузке изображения, только в режиме просмотра доступности. Эти две характеристики очень важны для изображений, и о них нельзя забывать. - Тег
<figcaption>, с другой стороны, предназначен для указания описания изображения, которое может быть более длинным и подробным.
Титры и субтитры
Иерархия очень важна для SEO-семантики, поэтому, когда мы говорим о заголовках, это ничем не отличается. Вы можете иметь сколько угодно титров и субтитров, но важно соблюдать иерархию между ними и всегда оставлять меньшие титры внутри больших титров.
Некоторые люди утверждают, что каждая страница должна иметь только один h1, но это не написано на камне. Для сомнений, сохраните h1 с тем же названием, что и ваш сайт, именно то, что должно быть заметно в поисковой выдаче.
⚠️ Важно: содержание тегов заголовков (<title></title>) должно быть длиной от 50 до 60 символов. Не превышайте этот предел! Кроме того, именно здесь должны находиться ключевые слова поиска вашего сайта, причем наиболее релевантные из них должны располагаться слева.
Описание
При поиске сайты обычно перечисляются по названию (которое обычно является кликабельной ссылкой) и описанию. Поисковые системы по умолчанию добавляют автоматическое описание, но мы также можем настроить описание с помощью ключевых слов и призыва к действию, чтобы пользователь почувствовал побуждение кликнуть.
Правильно делать описание в HTML5 следующим образом, внутри <header>:
<meta name="description" content="Insira uma descrição aqui">
Обычно описание располагается под тегом <title> и не должно превышать 156 символов. Описание также должно быть уникальным и содержать основное ключевое слово сайта.
В приведенном выше примере мы видим рекламу пылесоса. Описание содержит «призыв к действию», который является: «нажмите и проверьте лучшие предложения». Хорошее описание лаконично, призывает пользователя к действию и содержит релевантные ключевые слова.
Мета-теги
Возможно, вы заметили, что для написания описания мы используем тег <meta>. Метатеги могут помочь нам, если мы хотим добавить новую информацию, такую как ключевые слова, область просмотра, charset и автор страницы.
Примеры:
<!--- META KEYWORDS --->
<meta name="keywords" content="HTML, CSS, Javascript">
<!--- META CHARSET --->
<meta charset="UTF-8">
<!--- META EDGE --->
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<!--- META AUTHOR --->
<meta name="author" content="Sonia Guimarães">
Канонический
Канонический URL — это «основной» маршрут сайта, который будет отображаться при просмотре. Если мы не определим это в коде, роботы будут считать страницу по своим метрикам и алгоритмам, поэтому важно, чтобы мы описали основной URL нашего сайта.
⚠️ Важно: Иногда мы имеем один и тот же URL с небольшими различиями, например:
www.meusite.com
http://meusite.com
https://meusite.com
Этот случай может запутать краулеров, поэтому важно указать, какая ссылка является главной. Помните: страницы https имеют больший вес в поисковой выдаче, поскольку они следуют более безопасному протоколу.
Синтаксис канонического URL следующий:
<link rel="canonical" href="https://example.com/dresses/green-dresses" />
Вы можете узнать больше о канонических URL здесь.
Другие теги
Как я уже говорил, HTML5 имеет несколько тегов, и было бы невозможно осветить здесь все из них. Если вы сомневаетесь, найдите официальную документацию и проверьте, нет ли уже метки для того, что вам нужно. Некоторые соответствующие теги, помимо тех, которые мы видели ранее: <article>, <aside>, <nav>, <main>, <button>, <link>, <address> и многие другие.
📌 URL
Другой важной деталью для ранжирования являются дружественные URL, т.е. URL, которые легко читаются пользователями. Избегайте использования кодов, цифр, букв и специальных символов и старайтесь использовать больше имен, разделенных дефисами и косыми чертами.
Пример:
http://www.meusite.com/produtos/perfumes
И избегайте таких вещей, как:
http://www.meusite.com/conteudo/produtos/uh6Djvf81/perfumes_0232
URL-адреса также не должны превышать 115 символов, но чем короче, тем лучше.
📌 Ползание
Ползание — это картирование, которое роботы выполняют на сайте. Для облегчения работы этих роботов существует два важных типа файлов:
Robots.txt
robots.txt работает как файл инструкций для роботов поисковых систем. Если на вашем сайте мало страниц, то нет необходимости возиться с этим файлом. Здесь мы подробнее указываем, какие страницы мы не хотим, чтобы роботы сканировали.
Пример синтаксиса, используемого в файле, приведен ниже:
User-agent: Googlebot-news
Allow: /
User-agent: *
Disallow: /
Здесь мы разрешаем только Googlebot отображать то, что находится после слэша (/), и запрещаем другим пользовательским агентам отображать то, что находится после слэша (/). Когда мы используем звездочку ( * ), мы имеем в виду все. Чтобы узнать больше о синтаксисе robots.txt, нажмите здесь.
Sitemap.xml
Как написано в названии, этот файл служит в качестве карты сайта. В нем вы должны перечислить страницы вашего сайта, которые вы хотите, чтобы поисковая система просмотрела, направляя ее к вашему содержимому и страницам.
Однако важно отметить, что «важнее, чтобы сайт легко просматривался роботами, чем использовать sitemap.xml для обхода недостатков в архитектуре сайта» (SEOMarketing).
В файл sitemap.xml мы можем вставить до 50 000 URL-адресов — такова рекомендация Google. Файл также может быть создан вручную или с помощью инструментов.
Примером синтаксиса файла sitemap.xml является следующий:
<urlset xmlns="https://www.sitemaps.org/schemas/sitemap/0.9">
<url>
<loc>https://www.seusite.com.br</loc>
<lastmod>22-07-11</lastmod>
<changefreq>monthly</changefreq>
<priority>0.9</priority>
</url>
</urlset>
Чтобы узнать больше о sitemap.xml, посетите этот полный архив от SEOMarketing.
📌 Favicon
На этом этапе статьи становится ясно, что SEO — это все о пользовательском опыте и о том, как пользователь может более комфортно и интуитивно ориентироваться на нашем сайте. В этом смысле фавикон очень важен, поскольку он дает понять, в какой вкладке находится ваш сайт.
Чтобы добавить фавикон, соблюдайте следующую семантику:
<link rel="shortcut icon" type="image/ico" href="http://meusite/favicon.png">
rel="" служит для доступности, а type="" показывает, какой тип содержимого будет прикреплен.
📌 Скорость и загрузка
Одна из вещей, которые негативно влияют на сайт, — это скорость загрузки. В Google Chrome мы можем выполнить простое и эффективное сканирование при осмотре веб-сайта с помощью вкладки Lighthouse.
Нажав кнопку «Analyze Page Load», браузер генерирует отчет о загрузке сайта.
Как видно из этого примера, мобильная версия сайта Google получает 60 баллов за производительность, 80 баллов за доступность, 100 баллов за лучшие практики и 85 баллов за SEO. Если мы проведем по полосе прокрутки, то заметим, что Lighthouse подробно описывает, какие пункты являются хорошими, а какие можно улучшить. Мы можем сохранить это в формате pdf или json, чтобы тщательно проанализировать, что можно улучшить на нашем сайте. Подробнее о том, как интерпретировать отчет Lighthouse, можно узнать здесь.
Изображения
Тема изображений появляется в этой статье в разделе «Теги» и в разделе «Скорость и загрузка», потому что это действительно важный элемент качества SEO. Мы уже говорили о семантике изображений при внедрении их в HTML, но нам также следует поговорить об их размере.
Одной из вещей, которые оказывают наибольшее влияние на загрузку сайта, является размер изображений, и очень важно, чтобы изображения загружались как можно легче для надлежащих целей. Если изображение занимает весь экран, если оно имеет размер 200×200 пикселей, все должно быть учтено, чтобы наш сайт не стал тяжелее, чем нужно.
Squoosh.app и compressjpeg.com — отличные варианты для сжатия изображений. Также важно отметить, что для мобильных и настольных компьютеров нужны разные размеры изображений, поскольку у них разные потребности. Золотой совет: используйте jpeg для изображений без прозрачности, png для изображений с прозрачностью и SVGs для иконок, когда это возможно. Четко разграничьте, что является иконкой, а что изображением, потому что это разграничение имеет наибольшее значение для поискового робота SEO.
📌 Рендеринг на стороне сервера (SSR)
Server Side Rendering (SSR) — это возможность рендеринга страницы через сервер, а не через браузер. Он противоположен Client Side Rendering, который загружает приложение со стороны клиента, т.е. в браузере пользователя.
Обычно используемые нами фреймворки, такие как React.js и Angular, отображаются на стороне пользователя, что может замедлить загрузку сайта. Чтобы справиться с этой проблемой, мы можем сделать реализацию Next.js (в случае React.js) и Universal Angular (в случае Angular). В целом, есть свои плюсы и минусы в использовании SSR или CSR, но когда мы говорим о SEO, обычно указывается, что страница должна загружаться на стороне сервера, а не на стороне клиента.
Однако в последнее время кажется, что краулеры (роботы, выполняющие сканирование поисковых систем) все легче воспринимают и читают JavaScript, не в последнюю очередь потому, что приложения, использующие такие фреймворки, как React, Angular и Vue, становятся все более популярными.
 |
|---|
| Изображение взято с канала Duomly |
В разделе Server Side Rendering (рендеринг на стороне сервера), по порядку:
- Пользователь обращается с запросами к веб-сайту
- Сервер создает готовые HTML-файлы
- Браузер отображает HTML неинтерактивным способом
- Браузер загружает JavaScript
- Браузер выполняет JavaScript
- Веб-сайт становится интерактивным
 |
|---|
| Изображение взято с канала Duomly |
В клиенте бокового рендеринга, в порядке:
- Пользователь обращается с запросами к веб-сайту
- Сервер отправляет HTML-файл со ссылками JavaScript
- Браузер загружает HTML
- Браузер загружает CSS и JavaScript
- Браузер выполняет фреймворк или библиотеку
- Браузер загружает веб-сайт
Выводы
Подводя итог, мы рассмотрели в этой статье, каким практикам должен следовать разработчик, чтобы улучшить показатели SEO. Многие из описанных здесь вещей также являются хорошей практикой для повседневной жизни, например, правильное использование тегов в HTML5, использование изображений идеального размера и осторожность в сокращении URL-адресов. Думать о SEO — это также думать о юзабилити и доступности, а также развивать навыки для облегчения навигации и достижения целей пользователя.
Многие темы, затронутые в этой статье, были рассмотрены поверхностно, поэтому я предлагаю вам ознакомиться со справочными материалами, указанными ниже. Здесь вы найдете индивидуальный подход к SEO для разработчиков в нескольких областях, что сделает вас лучшим и более способным программистом.
Ссылки
- HTML5 — Документация
- SEO — видеокурс 📺
- Полное руководство по SEO для разработчиков — Рафаэль Перозин 📺
- Советы по SEO для программистов — Dr/code
- SEO для разработчиков | 2020 SEO Tutorial — JavaScript Mastery 📺
- Семантика HTML — IuriCode
- Будущее веба, HTML5 и семантический веб — Вагнер Диниз, Карлиньос Чеккони
- Как интерпретировать отчеты о производительности Lighthouse — Джоан Леон и Хосе М. Перес
- Создание файла robots.txt — Google
- Sitemap.xml: как его создать и настроить — SEOMarketing
- HTML5 — CSS3 — Hcode Video Reference 📺
- Рендеринг на стороне сервера vs Рендеринг на стороне клиента vs Предрендеринг — Duomly 📺
- Как помочь Google выбрать правильный канонический URL для дубликатов страниц — Google