Внутренняя SEO-оптимизация страницы

На высоком уровне внутренняя SEO-оптимизация (On Page SEO) относится к заголовкам и ссылкам, которые формируют общую структуру страницы. Заголовки указывают на важность элементов в документе, а ссылки соединяют веб-страницы между собой.

Заголовки и H1

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

Заголовки варьируются от 1 до 6 уровня, причем Заголовок 1 (H1) считается наиболее важным. Рекомендуется использовать тег H1 на каждой странице. H1 должен отражать содержание страницы и быть похожим на ваш тег title.

function Page() {
  return <h1>Ваш основной заголовок страницы</h1>;
}

Внутренние ссылки

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

Google начал этот принцип с изобретением алгоритма PageRank.

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

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

next/link

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

function NavLink({ href, name }) {
  return (
    <Link href={href}>
      <a>{name}</a>
    </Link>
  );
}
 
export default NavLink;

Свойство href обязательно и правильно добавляет ссылку к тегу <a>, что крайне важно для SEO. Когда Google сканирует страницу, он будет переходить по этой ссылке, не полагаясь на JavaScript.

Однако если дочерний элемент Link является пользовательским компонентом, оборачивающим тег <a>, вы должны добавить passHref к Link. Это необходимо, если вы используете библиотеки вроде styled-components. Без этого тег <a> не будет иметь атрибута href, что негативно скажется на SEO вашего сайта.

Как использовать passHref:

import Link from 'next/link';
import styled from 'styled-components';
 
// Создаем пользовательский компонент, оборачивающий тег <a>
const RedLink = styled.a`
  color: red;
`;
 
function NavLink({ href, name }) {
  // Необходимо добавить passHref к Link
  return (
    <Link href={href} passHref>
      <RedLink>{name}</RedLink>
    </Link>
  );
}
 
export default NavLink;

Если вы используете ESLint, в Next.js есть правило, предотвращающее эту проблему.

Дополнительные материалы

• Next.js: Компонент Link
• Next.js: eslint-plugin-next