w
Документация Основные инструменты Open Graph Meta Generator

Справочник по API

Этот документ содержит технические сведения об инструменте Open Graph Meta Generator и его внутренней логике.

Обзор инструмента

Open Graph Meta Generator - это инструмент на стороне клиента, который генерирует HTML meta-теги для протоколов Open Graph и Twitter Card. Он обрабатывает пользовательский ввод и возвращает корректно отформатированные HTML meta-теги.

Входные параметры

Общая информация

ParameterTypeRequiredDescriptionExample
pageTypestringYesТип контента"website", "article", "book"
titlestringNoЗаголовок страницы"My Awesome Website"
descriptionstringNoОписание страницы"A great website for developers"
urlstringNoURL страницы"https://example.com/page"
siteNamestringNoНазвание сайта"My Company"

Параметры изображения

ParameterTypeRequiredDescriptionExample
imageUrlstringNoURL изображения"https://example.com/image.jpg"
imageAltstringNoAlt-текст изображения"Company logo"
imageWidthstringNoШирина изображения в пикселях"1200"
imageHeightstringNoВысота изображения в пикселях"630"

Параметры Twitter

ParameterTypeRequiredDescriptionExample
twitterCardTypestringYesТип карточки Twitter"summary_large_image"
twitterSitestringNoTwitter-handle сайта"@example"
twitterCreatorstringNoTwitter-handle автора"@author"

Формат вывода

Инструмент генерирует HTML meta-теги в следующем формате:

Теги Open Graph

<!-- Open Graph Meta Tags -->
<meta property="og:type" content="website" />
<meta property="og:title" content="Page Title" />
<meta property="og:description" content="Page description" />
<meta property="og:url" content="https://example.com/page" />
<meta property="og:site_name" content="Site Name" />
<meta property="og:image" content="https://example.com/image.jpg" />
<meta property="og:image:alt" content="Image description" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />

Теги Twitter

<!-- Twitter Meta Tags -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content="@example" />
<meta name="twitter:creator" content="@author" />
<meta name="twitter:title" content="Page Title" />
<meta name="twitter:description" content="Page description" />
<meta name="twitter:image" content="https://example.com/image.jpg" />

Типы контента

Поддерживаемые типы страниц

TypeDescriptionUse Case
websiteОбычные страницы сайтаHomepage, about page, contact page
articleЗаписи блога и новостные статьиBlog posts, news articles, tutorials
bookСтраницы книг и электронных книгBook listings, e-book pages
profileЛичные или корпоративные профилиUser profiles, company pages
musicМузыкальные треки и альбомыMusic streaming, album pages
videoВидеоконтентVideo pages, movie listings

Типы Twitter Card

TypeDescriptionBest For
summaryБазовая карточка с миниатюройBlog posts, news articles
summary_large_imageКарточка с большим изображениемVisual content, products
appПродвижение мобильного приложенияApp store pages
playerВидео- и аудиоконтентVideo pages, podcasts

Обработка данных

HTML-экранирование

Весь пользовательский ввод автоматически экранируется для предотвращения XSS-атак:

function escapeHtml(text) {
  const div = document.createElement("div");
  div.textContent = text;
  return div.innerHTML;
}

Проверка URL

URL проверяются, чтобы убедиться в корректном формате:

function isValidUrl(string) {
  try {
    new URL(string);
    return true;
  } catch (_) {
    return false;
  }
}

Ограничения длины контента

Инструмент применяет рекомендуемые ограничения длины:

  • Заголовок: максимум 60 символов
  • Описание: максимум 160 символов
  • URL: должен соответствовать корректному формату URL

Совместимость с браузерами

Поддерживаемые браузеры

BrowserVersionSupport
Chrome60+Полная поддержка
Firefox55+Полная поддержка
Safari12+Полная поддержка
Edge79+Полная поддержка

Требуемые возможности

  • Поддержка ES6+
  • Поддержка Clipboard API
  • Поддержка Local Storage
  • Поддержка CSS Grid

Соображения по производительности

Обработка на стороне клиента

  • Вся обработка выполняется в браузере
  • Запросы к серверу не требуются
  • Мгновенная генерация и предварительный просмотр
  • Минимальное потребление памяти

Кэширование

  • Сгенерированные meta-теги кэшируются в хранилище браузера
  • История сохраняется локально
  • Внешние зависимости отсутствуют

Обработка ошибок

Ошибки проверки ввода

// Example error handling
if (!title.trim()) {
  showError("Title is required");
  return;
}

if (url && !isValidUrl(url)) {
  showError("Please enter a valid URL");
  return;
}

Ошибки загрузки изображений

// Handle image loading errors
function handleImageError(event) {
  const img = event.target;
  img.style.display = "none";
  showWarning("Image failed to load");
}

Примеры интеграции

Интеграция с WordPress

// Add to functions.php
function add_open_graph_tags() {
    if (is_single()) {
        $title = get_the_title();
        $description = get_the_excerpt();
        $image = get_the_post_thumbnail_url();

        echo '<meta property="og:title" content="' . esc_attr($title) . '" />';
        echo '<meta property="og:description" content="' . esc_attr($description) . '" />';
        echo '<meta property="og:image" content="' . esc_url($image) . '" />';
    }
}
add_action('wp_head', 'add_open_graph_tags');

Интеграция с React

// React component example
function OpenGraphMeta({ title, description, image, url }) {
  return (
    <>
      <meta property="og:title" content={title} />
      <meta property="og:description" content={description} />
      <meta property="og:image" content={image} />
      <meta property="og:url" content={url} />
    </>
  );
}

Интеграция с Next.js

// Next.js Head component
import Head from "next/head";

function MyPage() {
  return (
    <Head>
      <meta property="og:title" content="My Page Title" />
      <meta property="og:description" content="My page description" />
      <meta property="og:image" content="https://example.com/image.jpg" />
    </Head>
  );
}

Тестирование и проверка

Отладчики социальных сетей

Автоматические тесты

// Example test for meta tag generation
describe("Open Graph Meta Generator", () => {
  test("generates correct meta tags", () => {
    const input = {
      pageType: "website",
      title: "Test Page",
      description: "Test description",
    };

    const output = generateMetaTags(input);

    expect(output).toContain('<meta property="og:type" content="website" />');
    expect(output).toContain('<meta property="og:title" content="Test Page" />');
  });
});

Устранение неполадок

Частые проблемы

  1. Images not displaying: Проверьте формат URL и доступность изображения
  2. Tags not working: Проверьте теги через отладчики социальных сетей
  3. Truncated content: Проверьте ограничения по длине символов
  4. Cache issues: Используйте инструменты отладки для обновления кэша

Режим отладки

Включите режим отладки, чтобы видеть подробную информацию:

// Enable debug logging
localStorage.setItem("debug", "true");

Будущие улучшения

Запланированные возможности

  • Поддержка структурированных данных Schema.org
  • Поддержка нескольких языков
  • Возможности пакетной генерации
  • API endpoint для генерации на стороне сервера
  • Продвинутая оптимизация изображений
  • Интеграция с аналитикой

Как внести вклад

Чтобы внести вклад в Open Graph Meta Generator:

  1. Сделайте fork репозитория
  2. Создайте feature-ветку
  3. Внесите изменения
  4. Добавьте тесты
  5. Отправьте pull request

Поддержка

По техническим вопросам и за поддержкой:

  • Проверьте FAQ
  • Посмотрите Examples
  • Обратитесь в поддержку через основной сайт
Была ли эта страница полезной?