В этом руководстве рассматривается создание повторно используемого компонента Next.js для SEO, особенно для сообщений в блогах и статей. В нем объясняется, как настроить проект Next.js, разработать компонент, а также даются советы по повышению SEO в проектах Next.js.
Я предлагаю вам посмотреть на эту простую реализацию SEO для простых, удобных для поисковых систем заголовков здесь.
При разработке веб-сайта или приложения Next.js важно оптимизировать ваши страницы для поисковых систем (SEO). Ваши страницы могут лучше ранжироваться в результатах поиска с правильным SEO, что может привлечь больше посетителей и, возможно, больше бизнеса. Один из способов упростить управление SEO — создать многоразовые компоненты, которые можно использовать на нескольких страницах.
В этом руководстве мы рассмотрим, как создать повторно используемый компонент Next.js для SEO, адаптированный к сообщениям в блогах и статьям. Мы рассмотрим, как создать проект Next.js, как создать компонент и как оптимизировать SEO в проектах Next.js. Давайте идти!
Установить Next.js
Откройте терминал и перейдите в каталог, в котором вы хотите создать проект, чтобы запустить новый проект Next.js. После этого выполните команду:
npx create-next-app@latest # or yarn create next-app # or pnpm create next-app
Это создаст новый проект Next.js с самой последней версией Next.js. Дайте вашему проекту имя и сделайте другие необходимые выборы, следуя подсказкам.
Теперь мы установим язык по умолчанию для проекта. Мы будем использовать файл pages/_document.js, чтобы добавить наш <Html lang="en"> на каждую страницу. Это добавит атрибут lang со значением en к элементу html в HTML-коде страницы. При необходимости вы можете выбрать другой код языка. Вы можете прочитать больше здесь".
import { Html, Head, Main, NextScript } from 'next/document'
export default function Document() {
return (
<Html lang="en">
<Head />
<body>
<Main />
<NextScript />
</body>
</Html>
)
}
Давайте создадим повторно используемый компонент
Теперь, когда у нас настроен проект Next.js, мы можем создать компонент многократного использования. Создайте новый файл с именем Seo.js в каталоге компонентов каталога вашего проекта. компоненты/Seo.js будет полным путем.
В файле Seo.js нам нужно импортировать компонент Head из next/head:
Компонент Head встроен в Next.js и используется для добавления метаданных на страницу. Мы будем использовать его для добавления различных тегов SEO на наши страницы. Давайте создадим функцию, которая возвращает свойство и содержимое метатегов.
Функция Seo Components принимает на вход объект, который состоит из свойств и соответствующего контента. Он возвращает все метатеги, помещенные в тег заголовка, используя свойства и содержимое входного объекта для заполнения метатегов.
import Head from 'next/head'
import React from 'react'
export default function Seo({fields}) {
return (
<Head>
{Object.entries(fields).map(([property, value]) => {
return <meta key={property} property={property} name={property} content={value} />;
})}
</Head>
)
}
В этом коде мы используем функцию Object.entries() для преобразования полей объекта в массив. Затем мы перебираем массив, деструктурируем каждый элемент в его свойство и значение и создаем метатег, используя это. Результирующие метатеги возвращаются в качестве вывода. Пожалуйста, знайте, что ключ очень важен, он предотвращает дублирование мета-записей для одного и того же ключа.
Чтобы использовать функцию Seo на нашей домашней странице, нам нужно импортировать ее и предоставить требуемый объект в наш файл index.js. Мы создадим константу под названием «seoFields», содержащую некоторые демонстрационные теги для целей тестирования.
Теперь наша индексная страница должна выглядеть так:
Теперь нам нужно сохранить и запустить, чтобы проверить, работает ли он. Наша работа еще не закончена. Запустите следующее в командной строке и перейдите по URL-адресу.
yarn dev
В результате интеграции функции Seo и объекта seoFields на нашу домашнюю страницу все метатеги заполняются данными из seoFields. Теперь наш сайт оптимизирован для SEO. Однако нам может потребоваться добавить дополнительные метатеги с тем же свойством, но другими значениями, например теги, авторы и канонические ссылки, чтобы еще больше оптимизировать наш сайт для поисковых систем.
Чтобы улучшить понимание нашего сайта поисковой системой, мы можем добавить канонические ссылки в наши метатеги. Эти ссылки указывают на основную платформу, на которой размещена статья, и могут помочь поисковым системам понять, дублируется ли часть контента на нескольких платформах. Это может быть особенно полезно, если вы размещаете свои блоги на нескольких платформах.
Мы просто проверяем, является ли свойство каноническим, и возвращаем эту ссылку, если это так. Действительно легко. Теперь наш Seo.js выглядит так.
import Head from 'next/head'
import React from 'react'
export default function Seo({fields}) {
return (
<Head>
{Object.entries(fields).map(([property, value]) => {
if(property === "canonical"){return <link key="canonical" rel="canonical" href={value} />}
return <meta key={property} property={property} name={property} content={value} />;
})}
</Head>
)
}
Выход:
Некоторые теги и авторы имеют одно и то же свойство, но разное содержимое или значения. Эту функцию также необходимо добавить.
import Head from 'next/head'
import React from 'react'
export default function Seo({fields}) {
return (
<Head>
{Object.entries(fields).map(([property, value]) => {
if(property === "canonical"){return <link key="canonical" rel="canonical" href={value} />}
if (Array.isArray(value)) {
return value.map((val, index) => (
<meta
key={`${property}-${index}`}
property={property}
name={property}
content={val}
/>
));
}
return <meta key={property} property={property} name={property} content={value} />;
})}
</Head>
)
}
В этом коде мы проверяем, является ли значение, связанное со свойством, массивом. Если это так, мы перебираем массив и создаем несколько метатегов с одним и тем же свойством и одним значением для каждого элемента в массиве. Это позволяет нам включать несколько значений для одного свойства в наши метатеги. Для ввода мы предоставляем содержимое в виде массива. Итак, вот как выглядит наш входной объект:
const seoFields = {
canonical:"/example.com/demo",
keywords: "HTML, CSS, JavaScript",
"article:published_time": "25 Dec 2022",
"article:modified_time": "25 Dec 2022",
"og:image": "./varcel.svg",
"og:title": "Next.js Seo Components",
"og:description": "Next.js Seo Components",
"og:image:width": "850",
"og:image:height": "650",
"twitter:creator": "@handle",
"twitter:card": "summary_large_image",
"twitter:site": "summary_large_image",
tags: ["tag1", "tag2", "tag3"],
author: ["Debjit Biswas", "D Biswas"],
};
Выход:
Для статьи я использую эти теги SEO. Пожалуйста, настройте в соответствии с вашими потребностями и проведите дополнительные исследования, прежде чем развертывать это на рабочей площадке.
const post ={
//post contains all the details and coming from api server,
// replace with yoru own
}
const seoFields = {
title: post.title,
description: post.description,
keywords: "HTML, CSS, JavaScript",
canonical: post.canonical,
"article:tag": post.tags,
"article:published_time": post.published_time,
"article:modified_time": post.modified_time,
"article:expiration_time": post.expiration_time,
"article:author": post.author,
"og:url": post.url,
"og:type": post.type,
"og:image": post.ogImage,
"og:title": post.title,
"og:description": post.description,
"og:image:width": "850",
"og:image:height": "650",
"twitter:creator": "@handle",
"twitter:card": "summary_large_image",
"twitter:site": "summary_large_image",
};
Для получения дополнительных статей, пожалуйста, следуйте за мной. Спасибо.
Вот Github Repo Code.
