От автора: есть несколько способов создания современных приложений, два из наиболее распространенных приложений включают одностраничные приложения и приложения, отображаемые на сервере.
Одностраничные приложения могут быть очень полезны, когда требуется более высокая производительность. Хотя Google внес некоторые изменения в то, как их сканер обрабатывает одностраничные приложения, у нас по-прежнему имеются проблемы с SEO. Отрисованные на стороне сервера приложения могут достигать лучших результатов SEO в поисковых системах и при этом иметь довольно приличную производительность.
Выпуск некоторых замечательных фреймворков JavaScript, таких как Next и Gatsby, привел к созданию большего количества серверных приложений. Давайте рассмотрим несколько причин, по которым одностраничные приложения не лучший выбор для некоторых случаев, особенно для приложений, которые будут сильно зависеть от SEO.
Проблема с одностраничными приложениями (SPA)
Перед тем как создавать одностраничные приложения или приложения, отображаемые на стороне сервера, вам следует учесть контент, который вы хотите показать.
Одностраничное приложение (SPA) — это приложение, которое не обслуживается с новой HTML-страницы каждый раз, когда должен отображаться новый контент, но оно динамически генерируется с помощью JavaScript, управляющего DOM. Поскольку нет необходимости загружать новую HTML-страницу каждый раз, когда что-то нужно изменить, в чем проблема с SEO в SPA?
Проблема заключается в том, что приложение не может быть правильно проиндексировано поисковыми системами, в отличие от приложений, отображаемых на стороне сервера. SPA обслуживает только исходный HTML-файл, поэтому поисковые системы не могут индексировать контент, потому что в одностраничном приложении у вас есть JavaScript, генерирующий новый HTML каждый раз, когда что-то изменяется. Хотя у SPA есть много других преимуществ, таких как производительность, экономия времени и пропускной способности, лучшая скорость отклика на мобильных устройствах, повышенная производительность при более медленных интернет-соединениях и т. д.
С помощью приложений с рендерингом на стороне сервера, особенно с 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, Lighthouse может в этом помочь.
Создать новое приложение с помощью 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 заключается в том, что когда вы добавляете новый мета-тег и хотите убедиться, что этот он не будет дублироваться, вы можете использовать свойство key, и он будет отображаться только один раз:
<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 (самая большая Contentful Paint). Все, что вам нужно сделать, это создать собственный компонент приложения и определить функцию с именем 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:
yarn global add vercel
И внутри проекта выполните команду:
vercel
По умолчанию проект будет развернут в Vercel с использованием сертификата SSL.
Контент важен
Правильный показ контента клиентам имеет большое значение. Предоставление клиентам оптимального опыта — главная задача и приоритет каждого разработчика.
Весь смысл решения использовать одностраничное приложение вместо рендеринга на стороне сервера или наоборот должен быть связан с контентом, который вы хотите показать, и основной целью, которую вы хотите достичь.
Цель Next.js — предоставить приложение React, отображаемое на стороне сервера, и с его помощью мы достигаем хороших показателей SEO, UX, производительности и т. д. Это может помочь компаниям и разработчикам улучшить веб-сайты и проекты и получить больше органического трафика из поисковых систем.
Сейчас подходящее время, чтобы начать использовать Next.js и раскрыть всю мощь серверных приложений, они действительно потрясающие и могут очень помочь вам и вашей компании. Вы будете удивлены, гарантировано.
Заключение
В этой статье мы узнали больше о Next.js и о том, как он может помочь добиться хороших результатов SEO в современных приложениях. Мы также узнали о SEO в целом и о важных моментах, на которые следует обратить внимание, таких как мета-теги, производительность, сертификат SSL и т. д.
Автор: Leonardo Maldonado
Источник: https://blog.logrocket.com
Редакция: Команда webformyself.