Applied React SEO в приложении Next.js [Live Demo]

Что такое Next.js?
Обработка React.js SEO
Учебник Next.js: Обработка SEO в React.js SPA
1. Создание структуры проекта
2. Дразнить архитектуру реального проекта с Redux
3. Написание и рендеринг продуктов
4. Генерация статических файлов для React SEO
5. Развертывание статических активов
Живое демо и репозиторий GitHub
Другие важные общие соображения SEO

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

Недавно мой друг-разработчик рассказывал мне о новом проекте электронной коммерции для клиента.

«Я бы хотел использовать приложение React.js, если бы не все эти проблемы с SEO».

Вздох

Я думал, что уже убедил его своим предыдущий пост на Vue.js (или этот с Angular), что SEO с JS-фреймворками было управляемым.

Я думаю, нет! Поэтому я начал с нуля и объяснил своему другу, как обращаться с SEO в React SPA.

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

В этом уроке я буду:

Создайте проект Next.js.
Используйте привязки React / Redux.
Написать и представить продукты.
Генерация статических файлов для SEO.
Разверните мои статические активы с помощью Netlify.

Прежде чем начать практиковать, давайте рассмотрим немного теории.

Что такое Next.js?

В двух словах, Next.js - это облегченная среда для статических и серверных приложений React.

Не путайте это с Nuxt, который является основой для Универсальные приложения Vue.js - на самом деле вдохновлен Next. У них очень похожие цели.

К настоящему времени вы, по крайней мере, уже слышали о React, но для ясности мы определим его как библиотеку JavaScript на основе компонентов для создания интерфейсов.

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

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

Неудивительно, что крупные компании, такие как Netflix, Ticketmaster и GitHub, уже используют его.

Обработка React.js SEO

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

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

Посмотрим, как мы можем это исправить!

Как я могу проверить, правильно ли сканируется мой контент SPA?

Я предлагаю вам бежать Просмотреть как Google из консоли поиска Google на каждой ключевой странице вашего сайта.

Название довольно очевидно, но вы можете использовать этот инструмент, чтобы убедиться, что боты находят ваш контент. Он сообщит вам, действительно ли он может получить доступ к странице, как он ее отображает и заблокированы ли какие-либо ресурсы страницы (изображения или скрипты) для робота Googlebot.

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

Как убедиться, что мой контент сканируется?

Как я уже выяснил с Vue.js, есть несколько решений этой проблемы. В этом случае ответ придет от Next.js.

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

→ Рендеринг на стороне сервера . В настройке SSR вы разгружаете процесс рендеринга на сервер. Затем клиенту возвращаются полностью визуализированные представления HTML, что упрощает логику внешнего интерфейса. По этой причине этот подход отлично подходит для чувствительных ко времени приложений.

→ Генерация статических файлов . Этот легкий процесс выполняет действие по загрузке всех ваших ресурсов в статический HTML-код, чтобы сканеры могли наслаждаться им. Он выполняется только для страниц, которые запрашиваются ботами, поэтому они не блокируются всем JavaScript, в противном случае (для обычных пользователей) все загружается как обычно.

→ Сторонние инструменты, такие как Prerender SPA Плагин & Prerender.io также выполняет тот же процесс, что и последний, с отличными результатами.

Для этой демонстрации я решил использовать статическую генерацию файлов, потому что для этого не требуется сервер, который напрямую соответствует Логика JAMstack ,

Чтобы узнать больше об этих подходах рендеринга, смотрите это тщательное видеоурок , Это было сделано для Vue.js, но концепции применимы к React.js.

Учебник Next.js: Обработка SEO в React.js SPA

Предпосылка

1. Создание структуры проекта

Давайте начнем с нуля здесь. Создайте новую папку, где вам удобно, и выполните следующие команды:

npm init npm install - сохранить следующую npm install - сохранить реактив npm установить --save response-dom npm установить - сохранить избыточный npm установить - сохранить реагировать-избыточный

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

корень ├───компоненты ├───lib └───страницы

2. Дразнить архитектуру реального проекта с Redux

Я хочу сделать это демо максимально реальным. Так что, хотя это будет выглядеть немного странно для нашего варианта использования, я решил использовать Redux с Реагировать / Redux привязок.

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

Перейдите в папку pages и создайте файл _app.js, который является совершенно новым дополнением к Next - он будет работать, только если вы используете версию 6 и выше.

Это позволяет переходы страниц, границы ошибок и многое другое. В моем случае я буду использовать его для написания нового формата приложения, в котором используется поставщик React / Redux, чтобы он внедрял хранилище Redux в мои компоненты.

Отказ от ответственности: эта архитектура очень вдохновлена это следующий с демо Redux ,

Вот содержимое моего файла:

import App, {Container} из 'next / app' import React из 'реагировать'; import withReduxStore из '../lib/with-redux-store' import {Provider} из класса реагировать-Myxpp MyApp extends App {render ( ) {const {Component, pageProps, reduxStore} = this.props return (<Контейнер> <Хранилище провайдера = {reduxStore}>> <div id = "main"> <h1 className = "title"> Хранилище пиковых ослепителей </ h1 > <Component {... pageProps} /> <div> <p> SEO-ориентированное приложение Next.js с <a href="https://snipcart.com/"> магазином Snipcart </a>. << a href = "https://github.com/snipcart/next-snipcart"> [см. код] </a> <a href = "https://snipcart.com/blog/react-seo-nextjs-tutorial "> [Прочитать полное руководство] </a> </ p> </ div> </ div> </ Provider> </ Container>)}} экспортировать значение по умолчанию с помощью ReduxStore (MyApp)

Как видите, я предоставляю хранилище своему провайдеру и передаю текущие реквизиты страницы текущему компоненту.

Я не экспортирую компонент напрямую, но вместо этого вызываю withReduxStore с MyApp в качестве параметра. Вам придется создать эту функцию, так как она не существует в данный момент.

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

Итак, зайдите в папку / lib и создайте файл with-redux-store.js со следующим содержимым:

import App из 'next / app' import {initializeStore} из '../store' const isServer = typeof window === 'undefined' const __NEXT_REDUX_STORE__ = '__NEXT_REDUX_STORE__' function getOrCreateStore (initialState) {// Всегда создавать новое хранилище, если сервер, в противном случае состояние разделяется между запросами if (isServer) {return initializeStore (initialState)} // Сохранить в глобальной переменной if client if (! window [__ NEXT_REDUX_STORE__]) {window [__ NEXT_REDUX_STORE__] = initializeStore (initialState)} вернуть окно [__ NEXT_REDUX_ST ]} export default (App) => {вернуть класс Redux extends React.Component {статический асинхронный getInitialProps (appContext) {const reduxStore = getOrCreateStore () // Предоставить хранилище для getInitialProps страниц appContext.ctx.reduxStore = reduxStore let appProps = {} if (App.getInitialProps) {appProps = await App.getInitialProps (appContext)} return {... appProps, initialReduxState: reduxStore.getState ()}} конструктор (props) {super (props) this.reduxStore = getOrCreateStore ( реквизит. initialReduxState)} render () {return <App {... this.props} reduxStore = {this.reduxStore} />}}}

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

Это даст вам доступ к магазину в каждом компоненте верхнего уровня.

Импортируйте initializeStore, который является последним элементом управления данными, необходимым перед переходом в продуктах. Создайте файл store.js прямо в корневой папке.

import {createStore} из 'redux' export const actionTypes = {} const initialState = {products: [{name: 'My first product', цена: 50, описание: 'Мне нравятся черепахи', изображение: 'url', id: 1}, {имя: «Мой второй продукт», цена: 100, описание: «Мне нравятся зонки», изображение: «url», id: 2}, {имя: «Мой третий продукт», цена: 150, описание: 'Мне нравятся драконы', изображение: 'url', id: 3}]} // REDUCERS export const reducer = (state = initialState, action) => {switch (action.type) {default: return state}} функция экспорта initializeStore (initialState = initialState) {вернуть createStore (reducer, initialState)}

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

3. Написание и рендеринг продуктов

Для этой демонстрации мне нужны два разных компонента: products.js, который будет отображать ссылку на каждый продукт, и product.js, который будет отображать детали каждого продукта.

Запишите каждый из них в папке компонентов /.

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

Вот компонент продуктов:

импортировать ссылку из 'next / link' const ProductLink = (props) => (<div className = "product"> <Link as = {`/ product / $ {props.id}`} href = {`/ product? id = $ {props.id} `}> <a> <img src = {props.image} alt = {props.name} height = '250' className =" thumbnail "/> <p> {props.description} < / p> <p> {props.name} </ p> </a> </ Link> </ div>) var Products = ({products}) => (<div> <div className = "products"> {products.map (props => (<ключ ProductLink = {props.id} {... props} />))} </ div> </ div>) экспортировать продукты по умолчанию

А теперь вот product.js:

экспорт по умолчанию (props) => (f <div className = "product"> <a className="product" href= enjprops.url }> <img src = {props.image} alt = {props.name} className = "thumbnail" /> <p> {props.name} </ p> </a> <button className = "snipcart-add-item" data-item-name = {props.name} data-item-id = { props.id} data-item-image = {props.image} data-item-url = '/' data-item-price = {props.price}> Купить его за {props.price} $ </ button> < / DIV>)

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

Для этого создайте два новых файла в папках страниц: index.js и product.js.

Первый из них выглядит следующим образом:

import React из'act 'import {connect} из' response-redux 'import Продукты из' ../components/products 'import Head из класса' next / head 'Индекс расширяет React.Component {render () {return (<div > <Head> <link href = "/ static / main.css" rel = "stylesheet" /> <meta name = "title" content = "Электронная коммерция Peaky Blinder" /> <meta name = "description" content = 'Найдите лучшие продукты Peaky Blinders в Интернете.' /> </ Head> <Products {... this.props} /> </ div>)}} const mapStateToProps = (state) => ({products: state.products }) экспорт подключения по умолчанию (mapStateToProps) (индекс)

Что делает React / Redux, так это то, что вместо того, чтобы позволить вам получить доступ к хранилищу Redux напрямую, он дает вам функцию соединения, позволяющую вам отобразить часть состояния на реквизит. Хотя здесь это не сделано, оно также может дать вам способ сопоставления диспетчерской функции с реквизитом.

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

Если вы хотите узнать больше об этом, есть хорошая статья Вот это вводит эти понятия.

Учитывая этот принцип, определите второй файл как:

import React из'act 'import {connect} из' response-redux 'import ProductComp из' ../components/product 'import Head из класса' next / head 'Product extends React.Component {статические getInitialProps = ({запрос}) => ({id: query.id}) getProduct = () => (this.props.products.filter (x => x.id == this.props.id) [0]) render = () => (<div> <Head> <script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"> </ script> <script src = "https: //cdn.snipcart.com/scripts/2.0/snipcart.js "data-api-key =" YjdiNWIyOTUtZTIyMy00MWMwLTkwNDUtMzI1M2M2NTgxYjE0 "id =" snipcart "> </ script> <http: hcf themes / 2.0 / base / snipcart.min.css "rel =" stylesheet "type =" text / css "/> <link href =" / static / main.css "rel =" stylesheet "/> <meta name =" title "content = {" Peaky Blinder's "+ this.getProduct (). name} /> <meta name =" description "content = {this.getProduct (). description} /> </ Head> <a href =" / "> вернуться домой </a> <ProductComp {... (this.getProduct ())} /> </ div>); } const mapStateToProps = (state) => ({products: state.products}) экспортировать соединение по умолчанию (mapStateToProps) (Product)

Таким образом, компоненты остаются «чистыми», что означает, что они не обрабатывают логику фильтрации или логику выборки. Они просто получают данные и показывают их.

Я также добавил необходимые сценарии Snipcart. Головной компонент Next.js представляет собой простую оболочку. Таким образом, все, что там находится, будет упаковано внутри тега head отображаемой страницы.

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

Для SEO также важно знать о meta name = "robots" . Вы будете использовать его в больших проектах, где у вас есть внутренние страницы, доступные после входа в систему, или любая другая страница, которую вы не хотите индексировать. Прочитай это изучить все его атрибуты.

4. Генерация статических файлов для React SEO

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

Для этого создайте файл next.config.js прямо в папке вашего маршрута:

module.exports = {exportPathMap: function () {return {'/': {page: '/'}, '/ product / 1': {page: '/ product', запрос: {id: "1"}} , '/ product / 2': {page: '/ product', запрос: {id: "2"}}, '/ product / 3': {page: '/ product', запрос: {id: "3" }}}}}

Мне очень нравится, как просто это обрабатывается. Не нужно подключаться к процессу сборки; простой файл JS позволяет вам это сделать.

Конечно, здесь было всего три продукта с простыми идентификаторами для жесткого кода. Но было бы нетрудно создать возвращаемый объект динамически с некоторым указанным форматом, так как это файл JavaScript, где вы можете использовать любую логику.

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

Добавьте следующий раздел скриптов в ваш файл package.json:

"scripts": {"build": "next build", "export": "next export", "deploy": "next build && next export", "start": "next"}

Теперь запустите npm start в корневой папке вашего проекта. Это запустит Next как сервер, и вы сможете получить доступ ко всему на http: // localhost: 3000.

Если вы хотите сгенерировать статические файлы, вы можете сделать это с помощью команды npm run export. Это создаст папку, где вы найдете их. Если вы хотите разместить их локально для проверки вывода, вы можете сделать это быстро с помощью пакета npm, такого как serve.

5. Развертывание статических активов

Теперь вы готовы развернуть сайт. Давайте использовать Netlify.

Сначала вам нужно отправить свой код в репозиторий Git, а затем перейти в Netlify. приборная доска ,

Там выберите создание нового сайта со следующей конфигурацией:

Стоит отметить, что создатели Next также имеют продукт для развертывания под названием Сейчас , Он позволяет вам развертывать статические ресурсы после сборки непосредственно с вашего терминала с помощью одной команды. Это действительно опрятно, однако, поскольку я уже использую Git-репо для показа своего кода, я решил придерживаться Netlify.

Живое демо и репозиторий GitHub

Посмотреть демо Вот ,

Посмотреть репозиторий GitHub Вот ,

Другие важные общие соображения SEO

Мобильная индексация В настоящее время является одним из основных факторов рейтинга. Настолько, что вы должны позаботиться о своем мобильном опыте, как о настольном, если не больше!
Если вы все еще не знаете о важности HTTPS-соединения, вам следует сразу же разобраться с ним. Я размещаю это демо на Netlify , который предоставляет бесплатные сертификаты SSL со всеми планами.
Чтобы улучшить свою SEO игру, вы захотите создать отличный контент , Вы также хотите иметь возможность легко редактировать и оптимизировать его. В целях редактирования контента, подумайте о добавлении одного из этих безголовый CMS в смесь!
Не забудьте добавить соответствующие метатеги, как мы видели ранее. Карта сайта ваших приложений также очень важна здесь. Вы можете найти отличный пример того, как создать карту сайта для проектов Next.js Вот ,

Заключительные мысли

Играть с Next.js и React было действительно весело. Я не сталкивался с какими-либо серьезными проблемами, так как в их документах на все они были даны довольно простые ответы, что действительно очень тщательно. Мне нравится подход "викторина", он оригинальный!

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

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

С креативностью, отличным кодированием и заботливой заботой о SEO ничто не должно мешать вашим следующим проектам!

Если вам понравился этот пост, пожалуйста, уделите секунду поделиться этим в твиттере , Есть комментарии, вопросы? Хит раздел ниже!

Что такое «Link Juice» и что такое «баллы» PageRank?
Что такое «Link Juice» и что такое «баллы» PageRank? Когда сайт А ссылается на вашу веб-страницу, Google видит это как сайт А, который одобряет или голосует за вашу страницу. Google принимает во внимание все эти ссылки (например, профиль ссылки на веб-сайт), чтобы сделать выводы об актуальности и значимости отдельных веб-страниц и вашего веб-сайта в целом. Это основная концепция PageRank. Когда веб-сайт ссылается на ваш сайт или когда вы переходите по ссылке с одной из

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

Что такое SEO OffPage и чем может помочь SEO DIVER?
Что такое SEO OffPage и чем может помочь SEO DIVER? Поисковая оптимизация состоит из двух основных областей: оптимизация OnPage и оптимизация OffPage. Оптимизация OnPage подводит итоги, которые можно улучшить на веб-сайте, чтобы упростить поиск в Google. Оптимизация OffPage работает с важными входящими сигналами на сайт. Эти сигналы обычно являются обратными ссылками. OffPage SEO имеет решающее значение для успеха

Прежде чем пользоваться услугами SEO в Джакарте, что такое SEO?
Прежде чем пользоваться услугами SEO в Джакарте, что такое SEO? Это SEO расшифровывается как поисковая оптимизация или поисковая оптимизация. Seo - это метод увеличения посетителей из результатов поисковых систем, таких как Google, Yahoo и т. Д. Цель этого SEO - разместить веб-сайт на верхней или минимальной позиции на первой странице поисковой системы на основе определенных ключевых слов. Когда у нас уже есть веб-сайт, не забывайте, что вы также можете оптимизировать веб-сайт, которым

Так что с этими советами теперь легче понять, что такое SEO и как оно может помочь вашей компании, верно?
Так что с этими советами теперь легче понять, что такое SEO и как оно может помочь вашей компании, верно? Так что не забудьте инвестировать в этот фантастический ресурс. Вам понравились наши советы? Чтобы получать другие такие крутые новости прямо на свою электронную почту, подпишитесь на нашу рассылку и не пропустите наши обновления!

Что такое SEO на странице и вне страницы?
Что такое SEO на странице и вне страницы? Существует два способа максимизации, а именно SEO на странице - создание контента, выбор ключевых слов и размещение их в нужном месте, присвоение соответствующего заголовка каждому отображению и другие. В то время как Off-Page SEO - построение ссылок (ссылок), повышение популярности ссылок путем предоставления открытых каталогов, поисковых систем, обменов ссылками и других. Что SEO связано с фрилансером?

Что такое отрицательный SEO именно?
Что такое отрицательный SEO именно? Отрицательный SEO - это набор методов, с помощью которых вы пытаетесь манипулировать рейтингом Google, чтобы нанести вред определенным веб-сайтам. Как правило, негативное SEO обычно встречается в самых конкурирующих темах, и, очевидно, это печальная практика, которой не должно быть. Действительно ли отрицательный SEO работает? К сожалению, я должен сказать, что отрицательный SEO работает. Во многих случаях

Итак, я знаю, что вы жаждете, чтобы я уже привел в порядок: что вы можете сделать, чтобы ссылки сайта и, что более важно, правильные ссылки сайта появлялись на вашем сайте?
Итак, я знаю, что вы жаждете, чтобы я уже привел в порядок: что вы можете сделать, чтобы ссылки сайта и, что более важно, правильные ссылки сайта появлялись на вашем сайте? Как я могу получить ссылки на сайт? В целом, лучший совет о том, как создать ссылки сайта для вашего сайта, сводится к тому, чтобы иметь высококачественный сайт, который Google может легко сканировать. Само Google упоминает в приведенной выше выдержке, что «структура вашего сайта» должна

Что такое линкбилдинг в SEO?
Что такое линкбилдинг в SEO? Создание ссылок в SEO - это процесс привлечения других сайтов к ссылкам на ваш контент. Так: Первым шагом в процессе построения ссылок является создание контента. Но не просто старый контент. Ценный контент - это название игры. Вот как это сделать. Создание ценного контента Создание ценного контента важно. Потому что ваше сообщество хочет поделиться чем-то полезным.

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

Но что такое SEO?
Но что такое SEO? А зачем тебе? Первое, что нужно знать, это то, что SEO означает поисковую оптимизацию. Это относится к таким поисковым системам, как Google, которые сканируют ваш сайт и, таким образом, могут увеличить трафик (посетителей), повысив рейтинг вашего школьного сайта по результатам поиска. Цель SEO состоит в том, чтобы сделать вашу поисковую систему дружественной к пользователю за счет поддержки контента, в результате чего ваш сайт окажется

Js?
Js?
Как я могу проверить, правильно ли сканируется мой контент SPA?
Как убедиться, что мой контент сканируется?
Id}`} href = {`/ product?
Кому ты пишешь?
Какие вопросы у них есть о ключевом слове под рукой?
Где они будут искать этот контент?
Что такое SEO и для чего такое SEO?
Некоторые люди спрашивают меня, что такое SEO?

Помощник для избирателя

вход на сайт

Прикладная React SEO в приложении Next.js [Live Demo]