Семантический шаблон страницы

Algonexys · 07.08.2026 · 👁 1

Каркас с корректными мета-тегами, Open Graph и доступной структурой — основа для любой страницы.

Код

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Заголовок страницы — DigitMind</title>
  <meta name="description" content="Краткое описание страницы до 160 символов.">
  <link rel="canonical" href="https://digitmind.org/page/">

  <!-- Open Graph для соцсетей и мессенджеров -->
  <meta property="og:type" content="article">
  <meta property="og:title" content="Заголовок страницы">
  <meta property="og:description" content="Краткое описание страницы.">
  <meta property="og:image" content="https://digitmind.org/static/og.png">
  <meta property="og:url" content="https://digitmind.org/page/">
  <meta name="twitter:card" content="summary_large_image">

  <link rel="icon" href="/static/favicon.svg" type="image/svg+xml">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link rel="stylesheet" href="/static/css/main.css">
</head>
<body>
  <a class="skip-link" href="#main">Перейти к содержимому</a>

  <header>
    <nav aria-label="Основная навигация">
      <ul>
        <li><a href="/">Главная</a></li>
        <li><a href="/snippets/" aria-current="page">Сниппеты</a></li>
      </ul>
    </nav>
  </header>

  <main id="main">
    <article>
      <h1>Заголовок статьи</h1>
      <p><time datetime="2026-01-15">15 января 2026</time></p>
      <p>Текст статьи…</p>
      <figure>
        <img src="/media/photo.jpg" alt="Осмысленное описание изображения"
             width="800" height="450" loading="lazy" decoding="async">
        <figcaption>Подпись к изображению</figcaption>
      </figure>
    </article>
  </main>

  <footer>
    <p>&copy; 2026 DigitMind</p>
  </footer>

  <script src="/static/js/main.js" defer></script>
</body>
</html>