Как улучшить SEO с помощью Next.js

Перевод статьи подготовлен в преддверии старта курса «JavaScript Developer. Basic».

Хотите узнать больше о курсе «JavaScript Developer. Basic»? Приглашаем вас на бесплатный вебинар, в рамках которого преподаватель курса даст ответы на все интересующие вопросы.

---

Есть несколько современных подходов к разработке приложений. Два самых популярных — это одностраничные приложения (SPA) и приложения с серверным рендерингом.

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

С появлением таких замечательных JavaScript-фреймворков, как Next и Gatsby, стало появляться больше приложений с серверным рендерингом.Давайте разберемся, почему одностраничные приложения — не всегда хорошее решение, особенно в тех случаях, когда вам нужен высокий поисковый рейтинг.

Что не так с одностраничными приложениями?

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



Одностраничные приложения загружают только одну HTML-страницу. Каждый раз, когда пользователь запрашивает новое HTML-содержимое, его динамически загружает JavaScript, манипулируя DOM-элементами. Но если не нужно каждый раз загружать новую HTML-страницу, почему возникает проблема с поисковой оптимизацией?

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

С другой стороны, приложения с серверным рендерингом, особенно созданные с использованием Next.js, могут похвастаться и хорошей производительностью, и эффективностью SEO-оптимизации.

SEO (оптимизация для поисковых систем)

SEO (от англ. search engine optimization) — это оптимизация для поисковых систем, то есть действия по изменению вашего сайта для привлечения большего объема органического поискового трафика. Для того чтобы сделать сайт более привлекательным и доступным для поисковых систем, нужно держать в уме множество разных методов и приемов SEO.

Next.js

Next.js — это фреймворк для React-приложений, генерируемых статически или с рендерингом на сервере.Он открывает много возможностей для разработчиков: создание не требующих настройки приложений, готовых к использованию, разделение кода, экспорт статической HTML-страницы и т. д.

Next.js обеспечит высокие результаты поисковой оптимизации, и для этого вам не придется делать ничего особенного — достаточно просто создать приложение.Впрочем, высокие результаты SEO обеспечивает не конкретно Next.js, а серверный рендеринг.

Давайте рассмотрим на примере, как работает Next.js.

Next.js позволяет вам создать приложение одной командой с использованием структуры Create Next App:

npx create-next-app

Создав проект, вы заметите, что он немного отличается от других шаблонов, созданных, например, с помощью Create React App.Все страницы приложения будут храниться в папке pages, и каждая из них будет компонентом React.

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

// pages/about.js
const About = () => (
  <div>
    <h1>About page</h1>
  </div>
);
export default About;

Примечание. Работая над приложением, вы можете посмотреть отчеты о его SEO-рейтинге даже на ранних этапах, например, с помощью сервиса Lighthouse.

Создать новое приложение с Next.js предельно просто. Давайте посмотрим, как Next.js поможет повысить поисковый рейтинг и привлечь на сайт больше органического трафика.

Как улучшить SEO с помощью Next.js

Благодаря Next.js можно существенно улучшить результаты SEO, но нельзя забывать и о других аспектах приложения. Если хотите получить хорошие результаты SEO, обратите внимание вот на что:

• Метатеги
• Специальные возможности
• Прогрессивные веб-приложения

Метатеги

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

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

В Next.js встроен компонент, который добавляет метатеги в контейнер <head> вашей страницы:

import Head from 'next/head'

Для того чтобы вставить метатег на страницу, используйте встроенный компонент Head:

import Head from 'next/head'

const Example = () => {
  return (
    <div>
      <Head>
        <title>Example</title>
        <meta name="viewport" content="initial-scale=1.0, width=device-width" />
      </Head>
      <p>Hi Next.js!</p>
    </div>
  )
}

export default Example

Встроенный компонент Head позволяет избежать дублирования метатегов на сайте — если добавить свойство key, метатег будет отображаться только один раз:

<meta name="viewport" content="initial-scale=1.0, width=device-width" key="viewport" />

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

Проверьте свой код прямо сейчас: есть ли в нем метатеги и те ли это метатеги, которые нужны? Поверьте, правильные метатеги — это то, что вам нужно для повышения качества индексации и привлечения органического трафика.

Производительность

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

Поисковые системы, особенно Google, используют время отображения первого контента (First Contentful Paint, или FCP) как ключевую метрику производительности.FCP измеряет время с начала загрузки страницы до момента отображения первого элемента контента на экране. При низком показателе FCP низким будет и SEO-рейтинг.

С помощью Next.js можно проанализировать метрики FCP и LCP (время отрисовки большей части контента, Largest Contentful Paint).Для этого нужно создать пользовательский компонент App и объявить функцию reportWebVitals:

// pages/_app.js
export function reportWebVitals(metric) {
  console.log(metric)
}

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

Более подробно об измерении производительности в Next.js можно почитать здесь. Здесь рассказывается, над чем вам нужно поработать, чтобы улучшить FCP.

SSL-сертификат

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

Для того чтобы подключить HTTPS, нужно получить SSL-сертификат.Хороший SSL-сертификат может обойтись в кругленькую сумму. Как получить SSL-сертификат бесплатно с Next.js?

Для этого приложение нужно развернуть на облачной платформе, например Vercel.Vercel — это компания, которая создала Next.js, поэтому интеграция пройдет без проблем. Для того чтобы развернуть приложение Next.js на платформе Vercel, нужно установить интерфейс командной строки Vercel:

yarn global add vercel

Затем перейдите в проект и выполните команду:

vercel

Проект будет опубликован на Vercel и защищен SSL-сертификатом.

Контент имеет значение

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

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

Фреймворк Next.js создан для разработки React-приложений с серверным рендерингом, и благодаря этому мы получаем отличные показатели SEO, UX, производительности и т. д. С его помощью компании и разработчики могут повысить качество своих сайтов и проектов и привлечь больше органического поискового трафика.

Ну что ж, пора перейти на Next.js и оценить весь потенциал приложений с серверным рендерингом. Они будут полезны для вас и вашей компании, да и вообще — они просто потрясающие! Уверяю вас, вы будете удивлены.

Заключение

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

LogRocket: полная видимость веб-приложений

LogRocket — это сервис мониторинга веб-приложений, который позволяет вам повторить проблемы пользователей так, будто они возникли в вашем браузере. Теперь не нужно гадать, почему произошла ошибка, или просить у пользователей скриншоты или дампы журналов. LogRocket позволяет воспроизвести сеанс и выяснить, чем вызвана проблема.Этот сервис прекрасно работает с любым приложением в любом фреймворке, к тому же вы сможете воспользоваться плагинами для добавления дополнительного контекста из Redux, Vuex и @ngrx/store.

Помимо добавления действий и состояний Redux, LogRocket записывает логи консоли, ошибки JavaScript, трассировку стека, сетевые запросы и ответы с заголовками и телами, метаданные браузеров и пользовательские журналы. Он использует DOM для записи HTML и CSS на странице, обеспечивая видеоповторам попиксельное соответствие даже для самых сложных одностраничных приложений.

Попробуйте бесплатно.

Читать ещё:

• Вопросы, которые мне задавали на фронтенд-собеседованиях