Шаблон статьи под будущие публикации

SEO 2026 hack: проверяйте консистентность заголовков и schema-данных. Самая частая ошибка - когда H1 и `headline` в JSON-LD описывают разные темы.

Рекомендуемый шаблон вставки изображения (для страниц в articles/):

<figure class="article-figure">
  <picture>
    <source srcset="../assets/imgs/articles/<slug>/chart.svg" type="image/svg+xml">
    <img src="../assets/imgs/articles/<slug>/chart.png" alt="Описание инфографики" loading="lazy" width="1200" height="720">
  </picture>
  <figcaption>Короткая подпись к графику.</figcaption>
</figure>

Шаблон карусели для ряда скринов (горизонтальный свайп + стрелки):

<!-- Используйте, когда нужно показать 3+ скрина в ряд -->
<div class="article-carousel" data-carousel>
  <button class="article-carousel__btn article-carousel__btn--prev" type="button"
    aria-label="Предыдущий скрин" data-carousel-prev>
    <svg width="24" height="40" viewBox="0 0 18 32" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M17 31L2 16L17 1" stroke="currentColor" stroke-width="2" />
    </svg>
  </button>

  <div class="article-carousel__track" data-carousel-track>
    <figure class="article-figure article-figure--slide">
      <img src="../assets/imgs/<project>/screen-1.webp" alt="Описание" loading="lazy">
      <figcaption>Короткая подпись к скрину.</figcaption>
    </figure>
    <figure class="article-figure article-figure--slide">...</figure>
  </div>

  <button class="article-carousel__btn article-carousel__btn--next" type="button"
    aria-label="Следующий скрин" data-carousel-next>
    <svg width="24" height="40" viewBox="0 0 18 32" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M1 31L16 16L1 1" stroke="currentColor" stroke-width="2" />
    </svg>
  </button>
</div>

<!-- JS: добавьте скрипт карусели внизу страницы (см. ниже) -->

JS‑скрипт карусели (поставить перед метрикой/аналитикой):

<script>
(function () {
  const carousels = document.querySelectorAll('[data-carousel]');
  carousels.forEach((carousel) => {
    const track = carousel.querySelector('[data-carousel-track]');
    const prev = carousel.querySelector('[data-carousel-prev]');
    const next = carousel.querySelector('[data-carousel-next]');
    if (!track) return;
    const getScrollBy = () => Math.max(240, track.clientWidth * 0.8);
    const updateButtons = () => {
      const maxScroll = track.scrollWidth - track.clientWidth;
      const atStart = track.scrollLeft <= 4;
      const atEnd = track.scrollLeft >= maxScroll - 4;
      if (prev) prev.classList.toggle('is-hidden', maxScroll <= 4 || atStart);
      if (next) next.classList.toggle('is-hidden', maxScroll <= 4 || atEnd);
    };
    let rafId = 0;
    const onScroll = () => {
      if (rafId) cancelAnimationFrame(rafId);
      rafId = requestAnimationFrame(updateButtons);
    };
    if (prev) prev.addEventListener('click', () => track.scrollBy({ left: -getScrollBy(), behavior: 'smooth' }));
    if (next) next.addEventListener('click', () => track.scrollBy({ left: getScrollBy(), behavior: 'smooth' }));
    track.addEventListener('scroll', onScroll, { passive: true });
    window.addEventListener('resize', updateButtons);
    window.addEventListener('load', updateButtons);
    updateButtons();
  });
})();
</script>

SVG-скелет карточки (copy-paste):

<svg width="1200" height="720" viewBox="0 0 1200 720" preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg">
  <rect width="1200" height="720" rx="36" fill="#F4F8FF"/>
  <rect x="56" y="56" width="1088" height="608" rx="28" fill="#FFF" stroke="#DCE7FF" stroke-width="2"/>

  <rect x="94" y="214" width="500" height="112" rx="16" fill="#F2EEFF" stroke="#DED7FF"/>
  <text x="116" y="258" fill="#4B3F8D" font-family="Arial, sans-serif" font-size="34" font-weight="700">350-700 тыс. ₽/мес</text>
  <text x="116" y="287" fill="#6C6390" font-family="Arial, sans-serif" font-size="18">Старт: проверка спроса и первых продаж.</text>
  <text x="116" y="311" fill="#6C6390" font-family="Arial, sans-serif" font-size="18">Цель: найти рабочие каналы и цену клиента.</text>

  <rect x="842" y="594" width="264" height="38" rx="12" fill="#EEF2FF" stroke="#D7DEFF"/>
  <text x="974" y="613" text-anchor="middle" dominant-baseline="middle" fill="#4E5F9A" font-family="Arial, sans-serif" font-size="17" font-weight="700">tfox.dev • от 13FOX</text>
</svg>