Вот практическое введение во все, что вам нужно знать о SEO как веб-разработчику.

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

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

Каждый уважающий себя веб-разработчик должен знать хотя бы основы SEO.

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

@react – React в телеграме.

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

1) Добавить заголовок и описание

Заголовок и описание — это первое, что пользователь увидит в результатах поиска.

Никто не нажмет на вашу ссылку, если на ней написано «React App», а если никто не нажмет на вашу ссылку, рейтинг кликов упадет, что понизит ваш рейтинг в Google. Излишне говорить, что заголовок и описание имеют важное значение для SEO.

К счастью, добавить их просто:

В вашем HTML-файле (обычно index.html) внутри <head>тега добавьте <title>тег с названием вашей страницы.
Точно так же внутри <head>добавьте <meta name="description" content="...">тег, где contentнаходится описание вашей страницы.

Вот как это будет выглядеть:

<html>
  <head>
    <meta
      name="description"
      content="Daily web development tips and guides for JavaScript..."
    />
    <title>Code Frontend - Become a Better Web Developer</title>
  </head>
  <body>
    ...
  </body>
</html>

Пример кода для добавления SEO-заголовка и описания.

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

Некоторые рекомендации:

Сделайте заголовок описательным, но не более 75 символов, чтобы он не был обрезан. Я рекомендую около 60, чтобы быть в безопасности.
Длина описания не должна превышать 160 символов.

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

2) Добавьте метатеги Open Graph

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

Facebook, Twitter или Linkedin автоматически добавляют заголовок, изображение и описание, когда вы делитесь ссылками на свой сайт. Вы можете просмотреть их здесь: http://socialsharepreview.com .

Это то, что позволяют настроить метатеги OG.

Вот как их добавить:

<html>
  <head>
    <meta property="og:title" content="Code Frontend - Become a Better Web Developer">
    <meta property="og:image" content="https://codefrontend.com/content/images/2022/07/code-frontend-social-image-1.png">
    <meta property="og:type" content="website">
    <meta property="og:url" content="https://codefrontend.com/">
  </head>
  ...
</html>

Пример кода для добавления метатегов OG.

Внутри <head>тега вашей страницы добавьте <meta>теги с атрибутами property="og:<property>"и content="value". Необходимые свойства, как указано на https://ogp.me :

og:title– заголовок страницы.
og:type– довольно всегда website.
og:image– URL изображения для ссылок на ваш сайт.
og:url– канонический URL. Обычно это ссылка на вашу страницу, если только это не копия другой страницы, в таком случае ставьте ссылку на оригинал.

3) Добавьте разметку структурированных данных

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

Вам не нужно писать его вручную, просто сгенерируйте его на странице https://www.google.com/webmasters/markup-helper/u/0/ или динамически с помощью react-helmet .

Важным моментом является обернуть схему с помощью <script type="application/ld+json">. Вот как это может выглядеть в React:

<Helmet>
  <script type="application/ld+json">
  {JSON.stringify({
    "@context": "https://schema.org/",
    "@type": "Recipe",
    "name": "Party Coffee Cake",
    "author": {
      "@type": "Person",
      "name": "Mary Stone"
    },
    "datePublished": "2018-03-10",
    "description": "This coffee cake is awesome and perfect for parties.",
    "prepTime": "PT20M"
  })}
  </script>
<Helmet>

Для получения дополнительной информации я предлагаю вам прочитать документы Google: https://developers.google.com/search/docs/appearance/structured-data/intro-structured-data .

4) Добавьте карту сайта и файл robots.txt.

Эти файлы помогают Google легче сканировать ваш сайт.

Карта сайта позволяет Google узнать, как расставить приоритеты для ваших ссылок, и Robots.txtпозволяет запретить Google посещать и индексировать второстепенные ресурсы.

📣 И карта сайта, и файл robots.txt должны размещаться на корневом уровне вашего домена, например https://codefrontend.com/sitemap.xml и https://codefrontend.com/robots.txt

Роботы.txt

Вот как Robots.txtвыглядит файл для этого блога:

User-agent: *
Sitemap: https://codefrontend.com/sitemap.xml
Disallow: /ghost/
Disallow: /p/
Disallow: /email/
Disallow: /r/

Robots.txt для codefrontend.com

Я не хочу, чтобы Google копался в панели администратора моего блога, что и предотвращает Robots.txt правилами Disallow. Доступные варианты описаны в документах Google:

Карта сайта

Самая простая версия карты сайта — это просто текстовый файл с доступными URL-адресами:

https://www.example.com/file1.html
https://www.example.com/file2.html

Однако чаще используется XML-версия, поскольку она позволяет добавлять некоторые метаданные, например lastmodдату последнего обновления, что полезно для блогов.

Вы можете создать карту сайта вручную или сгенерировать ее на странице https://www.xml-sitemaps.com . Для действительно динамической карты сайта вам может потребоваться создать конечную точку сервера, которая ее генерирует, или создать ее во время сборки.

Узнайте больше о картах сайта в документах Google: https://developers.google.com/search/docs/crawling-indexing/sitemaps/build-sitemap .

5) Обеспечьте отличную производительность

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

Проведите аудит в https://web.dev/measure/ , который расскажет вам, что вам следует улучшить. Время загрузки страницы является наиболее важным фактором, который следует учитывать.

Вот некоторые улучшения производительности, которые вы можете сделать как разработчик React:

Разделение кода может сократить время начальной загрузки страницы.
Оптимизируйте изображения во время сборки и лениво загружайте их во время выполнения.
Используйте атрибуты отсрочки и асинхронности для некритических скриптов.
Предварительно отрендерите свой код React на сервере.
Google, похоже, любит AMP .

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

6) Рендеринг на стороне сервера

Одностраничные приложения, как известно, плохи для SEO, потому что они изначально отправляют пустую HTML-страницу и генерируют ее в браузере с помощью JavaScript.

<html lang="en">
  <head>
    <title>React App</title>
    <script type="module" crossorigin src="/assets/index.js"></script>
    <link rel="stylesheet" href="/assets/index.css">
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
  </body>
</html>

Как обычно выглядит HTML-код приложения React перед запуском скриптов.

Google нужно дождаться запуска сценариев, прежде чем он сможет анализировать контент. Излишне говорить – это не идеально в этом.

Для многих приложений это не имеет значения, но для веб-сайтов с большим количеством контента вы должны предварительно отрендерить свой код React на сервере, а затем гидратировать его на клиенте. Это сложно реализовать самостоятельно, и в этом вам могут помочь такие фреймворки, как NextJS, Remix или Astro.

7) Обеспечьте правильные форматы файлов

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

Изображения PNG очень большие, часто более чем в 10 раз больше, чем оптимизированные для Интернета форматы, такие как JPEG или WEBP, без заметной разницы. Изображения SVG обычно содержат метаданные, которые можно безопасно удалить, чтобы значительно уменьшить размер изображения.

Вы можете вручную сжимать изображения на странице convertio.co/png-jpg/ или настроить сборщик так, чтобы он делал это за вас. NextJS даже имеет собственный Imageкомпонент, который вы должны использовать.

Использование SVG

То, как используются изображения, также важно.

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

Вы всегда должны отдавать предпочтение <img> тегу для изображений.

Адаптивные изображения

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

Обычно src атрибут в <img> теге позволяет использовать только один ресурс, но вы можете предоставить атрибуты srcset и sizes для изменения источника в зависимости от размера экрана.

<img
  srcset="image-480w.jpg 480w, image-800w.jpg 800w"
  sizes="(max-width: 600px) 480px, 800px"
  src="image-800w.jpg"
/>

Пример кода для адаптивных изображений.

8) Минимизируйте свой код

Минификация значительно уменьшает размер вашего кода, удаляя пробелы и заменяя имена более короткими вариантами. Если вы используете современные инструменты сборки, такие как Vite, Parcel или фреймворк, например NextJS, об этом позаботятся автоматически.📣Не забудьте создать свой код для производства.

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

9) Обеспечьте хорошую доступность

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

Доступность часто невидима, это такие вещи, как:

alt атрибут в <img> тегах.
aria-label атрибут для кнопок только с изображениями.
role для интерактивных элементов без кнопок.
<a> теги ссылок вместо вызовов history.push()для навигации.

Вот еще о специальных возможностях в документах React 👇

10) Обеспечьте хорошую структуру контента

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

<div>тегов и недостаточное использование семантических тегов, таких как ,

<article>, <nav>, <p>и других

Вот несколько советов

используйте теги HTML, наиболее подходящие для вашего контента;
используйте теги заголовков в иерархическом порядке, <h1>затем <h2>, но не <h1>затем <h3>.

11) Обеспечьте хорошую структуру URL

Google любит короткие, четкие, но описательные URL-адреса, которые имеют смысл в зависимости от вашего контента.

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

Убедись в том, что:

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

Не стоит недооценивать важность хорошей структуры URL. Это может быть разница между получением # 1 в Google или даже отсутствием на 1-й странице результатов поиска.

12) Используйте HTTPS

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

Любой веб-сайт, особенно тот, который требует учетных данных для входа, должен использовать HTTPS — Cloudflare

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

Я использую Cloudflare для получения сертификата, управления записями DNS и кэширования — все это полезно для хорошего SEO. Я рекомендую вам сделать то же самое.

Заключение

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

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

Ознакомьтесь с этим контрольным списком из 12 шагов перед запуском нового веб-сайта, и вы позаботитесь о наиболее распространенных проблемах.

Оригинал статьи