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

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

Проблема с одностраничными приложениями (SPA)

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

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

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

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

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

С приложениями, отображаемыми на стороне сервера, особенно с Next.js, вы можете создать производительное приложение и в то же время иметь хорошее SEO.

SEO (поисковая оптимизация)

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

Next.js

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

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

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

Вы можете создать новое приложение Next.js одной командой, воспользовавшись настройкой Создать следующее приложение:

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-отчетов, для этого будет полезен Маяк.

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

Улучшите SEO с помощью Next.js

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

Мета-теги

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

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

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

В Next.js есть встроенный компонент для добавления метатегов в начало страницы:

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 заключается в том, что когда вы добавляете новый метатег и хотите убедиться, что этот метатег не будет дублироваться, вы можете использовать свойство ключа, и оно будет отображаться только один раз:

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

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

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

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

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

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

Вы можете использовать Next.js для измерения некоторых показателей, таких как FCP или LCP (наибольшая отрисовка контента). Все, что вам нужно сделать, это создать собственный компонент приложения и определить функцию с именем 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 CLI.

Ваш проект будет развернут в Vercel по умолчанию с использованием SSL-сертификата.

Содержание важно

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

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

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

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

Заключение

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

Спасибо за прочтение! Если вы нашли мою серию Next.js полезной, подписывайтесь на меня, чтобы получать больше подобного контента.

Как обычный социальный человек, я бы тоже хотел лайк или комментарий, спасибо!