Налаштування автоматичної перевірки мета-тегів та структурованих даних

Автоматична перевірка мета-тегів та структурованих даних

Мета-теги та Schema.org розмітка впливають на зовнішній вигляд сніпетів у пошуку та коректність відображення в соціальних мережах. Автоматична перевірка виявляє дублюючі title, порожні description, невалідний JSON-LD та відсутні OG-теги до того, як Google проіндексує сторінки.

Структура перевірки

Краулер → Playwright (рендер JS) → Розбір мета-тегів →
→ Валідація правил → Звіт по сторінках → Алерт при критичних проблемах

Реалізація

// scripts/meta-checker.ts
import { chromium, Browser, Page } from 'playwright';

interface MetaAudit {
  url:        string;
  title:      string | null;
  description: string | null;
  canonical:  string | null;
  robots:     string | null;
  og_title:   string | null;
  og_image:   string | null;
  og_desc:    string | null;
  twitter_card: string | null;
  schema_types: string[];
  schema_errors: string[];
  issues:     Issue[];
}

interface Issue {
  severity: 'critical' | 'warning' | 'info';
  rule:     string;
  message:  string;
}

async function auditPage(page: Page, url: string): Promise<MetaAudit> {
  await page.goto(url, { waitUntil: 'networkidle' });

  const meta = await page.evaluate(() => {
    const getMeta = (name: string) =>
      document.querySelector(`meta[name="${name}"]`)?.getAttribute('content') ||
      document.querySelector(`meta[property="${name}"]`)?.getAttribute('content') || null;

    // Розбираємо JSON-LD
    const jsonldScripts = Array.from(document.querySelectorAll('script[type="application/ld+json"]'));
    const schemas: any[] = [];
    const schemaErrors: string[] = [];

    for (const script of jsonldScripts) {
      try {
        schemas.push(JSON.parse(script.textContent || ''));
      } catch (e) {
        schemaErrors.push(`Invalid JSON-LD: ${e.message}`);
      }
    }

    return {
      title:       document.title,
      description: getMeta('description'),
      canonical:   document.querySelector('link[rel="canonical"]')?.getAttribute('href') || null,
      robots:      getMeta('robots'),
      og_title:    getMeta('og:title'),
      og_image:    getMeta('og:image'),
      og_desc:     getMeta('og:description'),
      twitter_card: getMeta('twitter:card'),
      schema_types: schemas.map(s => s['@type']).filter(Boolean),
      schema_errors: schemaErrors,
    };
  });

  const issues: Issue[] = [];

  // Правила валідації
  if (!meta.title) {
    issues.push({ severity: 'critical', rule: 'title-missing', message: 'Відсутній title' });
  } else if (meta.title.length < 10) {
    issues.push({ severity: 'warning', rule: 'title-too-short', message: `Title занадто короткий: ${meta.title.length} символів` });
  } else if (meta.title.length > 70) {
    issues.push({ severity: 'warning', rule: 'title-too-long', message: `Title занадто довгий: ${meta.title.length} символів (макс. 70)` });
  }

  if (!meta.description) {
    issues.push({ severity: 'critical', rule: 'desc-missing', message: 'Відсутній meta description' });
  } else if (meta.description.length > 160) {
    issues.push({ severity: 'warning', rule: 'desc-too-long', message: `Description занадто довгий: ${meta.description.length} символів` });
  }

  if (!meta.canonical) {
    issues.push({ severity: 'warning', rule: 'canonical-missing', message: 'Відсутній canonical URL' });
  } else if (!meta.canonical.startsWith('https://')) {
    issues.push({ severity: 'warning', rule: 'canonical-http', message: 'Canonical використовує HTTP замість HTTPS' });
  }

  if (!meta.og_image) {
    issues.push({ severity: 'warning', rule: 'og-image-missing', message: 'Відсутній og:image' });
  }

  if (meta.schema_errors.length > 0) {
    meta.schema_errors.forEach(err =>
      issues.push({ severity: 'critical', rule: 'schema-invalid-json', message: err })
    );
  }

  return { url, ...meta, issues };
}

async function auditSite(urls: string[]): Promise<MetaAudit[]> {
  const browser = await chromium.launch({ headless: true });
  const results: MetaAudit[] = [];

  // Паралельно, але не більше 5 одночасно
  const BATCH = 5;
  for (let i = 0; i < urls.length; i += BATCH) {
    const batch = urls.slice(i, i + BATCH);
    const pages = await Promise.all(batch.map(() => browser.newPage()));

    const batchResults = await Promise.all(
      batch.map((url, j) => auditPage(pages[j], url))
    );
    results.push(...batchResults);
    await Promise.all(pages.map(p => p.close()));
  }

  await browser.close();
  return results;
}

Пошук дублюючих title та description

function findDuplicates(audits: MetaAudit[]): { titles: Map<string, string[]>, descs: Map<string, string[]> } {
  const titleMap = new Map<string, string[]>();
  const descMap  = new Map<string, string[]>();

  for (const audit of audits) {
    if (audit.title) {
      const existing = titleMap.get(audit.title) || [];
      titleMap.set(audit.title, [...existing, audit.url]);
    }
    if (audit.description) {
      const existing = descMap.get(audit.description) || [];
      descMap.set(audit.description, [...existing, audit.url]);
    }
  }

  // Залишаємо тільки дублікати
  return {
    titles: new Map([...titleMap].filter(([, urls]) => urls.length > 1)),
    descs:  new Map([...descMap].filter(([, urls]) => urls.length > 1)),
  };
}

Валідація JSON-LD через Google Rich Results API

async function validateSchemaWithGoogle(url: string): Promise<any> {
  const apiUrl = `https://searchconsole.googleapis.com/v1/urlTestingTools/mobileFriendlyTest:run`;
  // Використовуємо Google Search Console API для перевірки rich snippets
  // Альтернатива: валідатор schema.org
  const validator = await fetch(
    `https://validator.schema.org/validate?url=${encodeURIComponent(url)}&format=json`
  );
  return validator.json();
}

Терміни

Автоматичний аудит мета-тегів з перевіркою JSON-LD та пошуком дублів: 2–3 робочих дні.