Kodokon kodokon.com

Готовим страницу к публикации в вебе

Отполируй head своей страницы: title, description, favicon и безопасные внешние ссылки.

9 мин · 3 вопросов

Открыть этот урок в Kodokon

Ещё до того, как зайти на твою страницу, люди видят её в других местах: во вкладке браузера, в результатах поиска, в присланной ссылке. Всё это происходит в head. Продуманный head - это разница между любительским сайтом и профессиональным.

HTML
<head>
  <meta charset="utf-8">
  <meta name="viewport"
        content="width=device-width, initial-scale=1">
  <title>Quick Recipes | Lea's Kitchen</title>
  <meta
    name="description"
    content="30 recipes ready in 20 minutes flat,
             tested by our readers."
  >
</head>
Минимальный head страницы, готовой к запуску.

title появляется во вкладке, в закладках и в результатах поиска: сделай его уникальным для каждой страницы, описательным, с темой в начале и примерно на 60 символов. meta description - это текст под заголовком в поисковых системах: целься в 150 символов, которые вызывают желание кликнуть.

Favicon - это маленькая иконка во вкладке и в закладках. Современная практика: запасной favicon.ico в корне сайта, версия в SVG, которая остаётся чёткой при любом размере, и отдельная иконка для домашнего экрана Apple.

HTML
<link rel="icon" href="/favicon.ico" sizes="32x32">
<link rel="icon" href="/icon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-icon.png">
Три объявления, чтобы покрыть все контексты.

Последний профессиональный рефлекс: внешние ссылки. Открытие ссылки в новой вкладке через target="_blank" даёт открытой странице потенциальный доступ к window.opener, а значит и к твоей странице. Добавь rel="noopener noreferrer", чтобы разорвать эту связь и не передавать адрес источника.

HTML
<a
  href="https://developer.mozilla.org"
  target="_blank"
  rel="noopener noreferrer"
>
  MDN documentation (new tab)
</a>
Внешняя ссылка, открытая в новой вкладке, с защитой.

Проверка знаний

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

  1. Какова роль meta description?
    • Напрямую улучшать позицию страницы в поисковых системах
    • Давать текст, который показывается под заголовком в результатах поиска
    • Определять основной язык документа
  2. Зачем добавлять rel="noopener" к ссылке с target="_blank"?
    • Чтобы открытая страница не получила доступ к твоей странице через window.opener
    • Чтобы заставить ссылку открыться в той же вкладке
    • Чтобы ускорить загрузку целевой страницы
    • Чтобы скрыть ссылку от поисковых систем
  3. Каким должен быть хороший title страницы?
    • Одинаковым на всех страницах, чтобы усилить бренд
    • Как можно длиннее, чтобы вместить побольше ключевых слов
    • Уникальным для каждой страницы, описательным, с темой в начале и примерно на 60 символов