SEO: Метаданные | Next.js Русский

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

Заголовок (Title)

Тег заголовка является одним из наиболее важных элементов SEO по двум основным причинам:

Во-первых, это то, что видят пользователи при переходе на ваш сайт из результатов поиска.

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

Пример:

<title>iPhone 12 XS Max For Sale in Colorado - Big Discounts | Apple</title>

Эта страница содержит все основные ключевые слова и также привлекательна для пользователей, демонстрируя четкое ценностное предложение: скидки!

Описание (Description)

Мета-тег описания является еще одним важным элементом SEO, но менее значимым, чем заголовок. По данным Google, этот элемент не учитывается для ранжирования, но может повлиять на показатель кликабельности в результатах поиска.

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

Пример мета-тега описания в HTML:

<meta
  name="description"
  content="Check out iPhone 12 XR Pro and iPhone 12 Pro Max. Visit your local store and for expert advice."
/>

Вот как это выглядит на странице результатов поисковой системы (SERP):

Пример сниппета SERP с заголовком и описанием

В Next.js мы устанавливаем заголовок и описание в компоненте Head. Вот как могут выглядеть мета-теги заголовка и описания в Next.js:

import Head from 'next/head';
 
function IndexPage() {
  return (
    <div>
      <Head>
        <title>
          iPhone 12 XS Max For Sale in Colorado - Big Discounts | Apple
        </title>
        <meta
          name="description"
          content="Check out iPhone 12 XR Pro and iPhone 12 Pro Max. Visit your local store and for expert advice."
          key="desc"
        />
      </Head>
      <h1>iPhones for Sale</h1>
      <p>insert a list of iPhones for sale.</p>
    </div>
  );
}
 
export default IndexPage;

Компонент Head может использоваться на любой странице вашего приложения для описания или предоставления информации о содержимом страницы.

Open Graph

Протокол Open Graph, изначально разработанный Facebook, стандартизирует использование метаданных на веб-страницах. Вы можете предоставить минимальную или подробную информацию, но все элементы Open Graph вместе создают представление о сайте.

Другие социальные сети (такие как Pinterest, Twitter, LinkedIn и т.д.) также могут использовать Open Graph для отображения расширенных карточек при публикации URL. Twitter также имеет свои собственные теги Twitter Cards.

Хотя теги Open Graph имеют много общего с SEO-тегами, они не влияют на ранжирование в поисковых системах, но их все равно рекомендуется использовать, так как пользователи могут делиться вашим контентом в социальных сетях или мессенджерах, таких как WhatsApp или Telegram.

Вы можете добавить теги Open Graph, определив атрибут property в мета-тегах внутри компонента Head. Например:

import Head from 'next/head';
 
function IndexPage() {
  return (
    <div>
      <Head>
        <title>Cool Title</title>
        <meta name="description" content="Checkout our cool page" key="desc" />
        <meta property="og:title" content="Social Title for Cool Page" />
        <meta
          property="og:description"
          content="And a social description for our cool page"
        />
        <meta
          property="og:image"
          content="https://example.com/images/cool-page.jpg"
        />
      </Head>
      <h1>Cool Page</h1>
      <p>This is a cool page. It has lots of cool content!</p>
    </div>
  );
}
 
export default IndexPage;

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

Структурированные данные и JSON-LD

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

Согласно сайту, schema.org — это "совместная деятельность сообщества с миссией по созданию, поддержанию и продвижению схем для структурированных данных в Интернете, на веб-страницах, в электронных письмах и не только".

Словарь schema.org может использоваться с различными кодировками, включая RDFa, Microdata и JSON-LD.

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

Пример страницы продукта с добавлением структурированных данных JSON-LD схемы продукта:

import Head from 'next/head';
 
function ProductPage() {
  function addProductJsonLd() {
    return {
      __html: `{
      "@context": "https://schema.org/",
      "@type": "Product",
      "name": "Executive Anvil",
      "image": [
        "https://example.com/photos/1x1/photo.jpg",
        "https://example.com/photos/4x3/photo.jpg",
        "https://example.com/photos/16x9/photo.jpg"
       ],
      "description": "Sleeker than ACME's Classic Anvil, the Executive Anvil is perfect for the business traveler looking for something to drop from a height.",
      "sku": "0446310786",
      "mpn": "925872",
      "brand": {
        "@type": "Brand",
        "name": "ACME"
      },
      "review": {
        "@type": "Review",
        "reviewRating": {
          "@type": "Rating",
          "ratingValue": "4",
          "bestRating": "5"
        },
        "author": {
          "@type": "Person",
          "name": "Fred Benson"
        }
      },
      "aggregateRating": {
        "@type": "AggregateRating",
        "ratingValue": "4.4",
        "reviewCount": "89"
      },
      "offers": {
        "@type": "Offer",
        "url": "https://example.com/anvil",
        "priceCurrency": "USD",
        "price": "119.99",
        "priceValidUntil": "2020-11-20",
        "itemCondition": "https://schema.org/UsedCondition",
        "availability": "https://schema.org/InStock"
      }
    }
  `,
    };
  }
  return (
    <div>
      <Head>
        <title>My Product</title>
        <meta
          name="description"
          content="Super product with free shipping."
          key="desc"
        />
        <script
          type="application/ld+json"
          dangerouslySetInnerHTML={addProductJsonLd()}
          key="product-jsonld"
        />
      </Head>
      <h1>My Product</h1>
      <p>Super product for sale.</p>
    </div>
  );
}
 
export default ProductPage;

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

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

Open Graph Protocol: Документация
Google: Введение в структурированные данные
Google: Структурированные данные продукта
Google: Тестер расширенных результатов

Метаданные

Заголовок (Title)

Описание (Description)

Open Graph

Структурированные данные и JSON-LD

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

On this page