Вопрос с собеседования · Frontend

Какие мета-теги нужны странице — title, description, Open Graph?

JuniorБраузер и DOM
Ещё спрашивают так:
  • Как сделать красивое превью ссылки в мессенджере?
Коротко

title — заголовок во вкладке и в выдаче (до ~60 символов), meta description — сниппет (~150 символов), viewport — для мобильных, canonical — основной адрес страницы, robots — noindex при необходимости. Open Graph (og:title, og:description, og:image, og:url) и Twitter Card формируют превью ссылки в мессенджерах и соцсетях; картинка og:image — абсолютный адрес, около 1200×630.

  • У каждой страницы — свои title и description
  • lang у html — язык страницы
  • Превью проверяют отладчиками соцсетей и отправкой ссылки себе

Подробно

<title>Курс SQL для аналитиков — Учебная платформа</title>
<meta name="description" content="Бесплатный курс…">
<link rel="canonical" href="https://example.ru/courses/sql/">
<meta property="og:image" content="https://example.ru/og/sql.png">

Что хотят услышать

  • title, description, viewport, canonical.
  • Open Graph для превью.
  • Уникальность для каждой страницы.

Проверьте себя

Один верный вариант. Подумайте, потом откройте ответ.

Показать варианты и ответ
  • ✓Свои у каждой страницы title и description, viewport, canonical и Open Graph для превью
  • ✗Одного title на весь сайт достаточно, а Open Graph нужен только для ранжирования в выдаче Google
  • ✗Open Graph нужен только для Google
  • ✗og:image может быть относительным путём

Связанные вопросы

Партнёр платформы

Разбор собеседования с sotto

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

Разбор собеседования