Что нужно знать разработчику при создании SEO-оптимизированного приложения.
Мы все любим React за его скорость и производительность. Поскольку он использует подход одностраничного приложения, все кажется быстрым и мгновенным.
Но за это приходится платить: такой подход вредит поисковой оптимизации приложений React. Очень сложно сделать приложение React оптимизированным для SEO.
Однако есть несколько способов сделать это.
Но если вы действительно действительно заботитесь о поисковой оптимизации, использование простого React может быть не очень хорошей идеей. Вы должны изучить Next.js.
Как Next.js помогает в SEO
Мы все знаем, что для того, чтобы страница была проиндексирована Google и другими поисковыми системами, ваш сайт должен быть просканирован ботами Google.
Боты ищут некоторые метатеги на вашей странице, чтобы понять содержание страницы и соответствующим образом ранжировать эту страницу.
Поскольку React генерирует одностраничное приложение, очень сложно включить соответствующие метатеги для каждой страницы отдельно. У нас есть несколько обходных путей, но Next.js делает их очень простыми.
Давайте посмотрим, как:
Первый вариант: использование головы
В Next.js есть специальный компонент Headcomponent, который можно импортировать следующим образом:
import Head from 'next/head'
Вы можете использовать этот компонент Head для добавления метатегов на свою страницу.
Давайте создадим новый проект, используя Next.js. Мы будем использовать create-next-app.
yarn create next-app seo-demo --typescript
Теперь откройте страницу index.ts в папке pages, и вы увидите, что там уже есть раздел Head. Вы можете добавить туда следующие дополнительные метатеги:
Смотрите, мы добавили заголовок и 2 метатега. Но сработало ли это? Узнаем, открыв страницу.
Из корневой папки запустите:
yarn dev
Теперь откройте localhost:3000, и если вы проверите содержимое своей страницы, вы увидите тег head на своей странице.
Так что это действительно мощно, что вы можете добавлять любые метатеги на любую страницу. Вы даже можете сделать их динамическими, если хотите!
Первый вариант: использование next-seo
Теперь есть еще один вариант, который мы можем выбрать, специальный пакет, единственной целью которого является обеспечение SEO-поддержки приложений Next.js. И это тоже довольно популярно!
Название пакета next-seo. Сначала установите его:
yarn add next-seo
Теперь этот пакет предоставляет вам специальный компонент с именем NextSEO . Ранее мы видели, что внутри раздела Head нам приходилось добавлять метатеги вручную.
Так что есть вероятность опечатки или какой-то другой ошибки. Но при использовании next-seo он управляется реквизитами компонента, так что мы обеспечиваем лучшую безопасность типов!
Давайте импортируем его внутрь нашего компонента:
import { NextSeo } from "next-seo";
И вместо компонента Head мы теперь будем использовать этот компонент NextSEO:
Итак, теперь, если вы откроете свою страницу, вы увидите там тот же результат.
И есть множество других вариантов, которые вы можете изучить, используя этот удивительный пакет.
Моя рекомендация
Если вы простой разработчик (как я) и мало что знаете о SEO, то переход на next-seo будет лучшей идеей, потому что он заставляет вас использовать некоторые функции, которые могут автоматически улучшить производительность SEO без вашего ведома. Это.
Но если вы специалист по SEO и знаете, что делаете, вам должно хватить компонента Head, предоставляемого Next.js!
Вот и все на сегодня! Хорошего дня!
Свяжитесь со мной через LinkedIn
Дополнительные материалы на plainenglish.io
