Извлечение данных из meta-тега с помощью JavaScript

Быстрый ответ

Используйте JavaScript для получения содержимого мета-тега description следующим образом:

// Запрашиваем данные
const content = document.querySelector('meta[name="description"]').content;
console.log(content); // "Привет, мир! В лучшем виде описания!"

Для тега с атрибутом property изменим селектор:

// Выборка по атрибутам property
const content = document.querySelector("meta[property='og:description']").content;
console.log(content); // "Качественное описание в формате Open Graph"

Основные подходы: Работа с различными атрибутами

Атрибуты name

Пример выборки ключевых слов из атрибута name:

// Запрос ключевых слов
const keywords = document.querySelector('meta[name="keywords"]').content;
console.log(keywords);

Подробнее об этом расскажет наш спикер на видео

Атрибуты property

Выборка данных из атрибутов property выполняется следующим образом:

// Поиск заголовков OG
const ogTitle = document.querySelector('meta[property="og:title"]').content;
console.log(ogTitle);

Обзор: Перебор мета-тегов

Для получения полного списка мета-тегов используйте этот код:

// Время для анализа мета-тегов!
const metas = document.getElementsByTagName('meta');
for (let meta of metas) {
    if (meta.getAttribute('property') === 'og:title') {
        console.log(meta.getAttribute('content'));
    }
}

Всесторонний подход: Универсальная функция выборки

Следующая функция подойдет для извлечения информации из любых мета-тегов:

// Представляем функцию GETCONTENT()!
function getMetaContentByName(name, contentName = 'content') {
    const tag = document.querySelector(`meta[name="${name}"]`);
    return tag ? tag.getAttribute(contentName) : '';
}

Проверка на null и предотвращение ошибок

Обеспечьте безопасность кода, проверяя на null:

// NULL не пройдёт!
const metaContent = getMetaContentByName('description');
if (metaContent) {
    console.log(metaContent);
} else {
    console.log('Не удалось получить. NULL недопустим!');
}

Визуализация

Воспринимайте JavaScript как аналитика, изымающего информацию из скрытых участков кода.

Структура:
- 🧩🧩🧩 (HTML-код)
- 🧩🧩🕹️ (Целевой мета-тег)
- 🧩🧩🧩

Аналитик использует средство выбора (🔍): document.querySelector

const info = document.querySelector('meta[name="keywords"]').content;

Затем агент (🤖) находит заданные данные:

🕵️‍♂️: Информация в атрибуте "content".
🕹️: Ключевые слова: "Javascript, HTML, Мета-тег"

Содержимое атрибута content становится ценной находкой для нашего аналитика.

Обработка динамического содержимого

JavaScript иногда сталкивается с динамически генерируемым контентом и должен ожидать обновления DOM или использовать MutationObserver.

Массовое извлечение мета-данных

Чтобы извлечь массив содержимого мета-тегов, используйте JavaScript:

['description', 'keywords', 'og:title'].forEach(name => {
    console.log(getMetaContentByName(name));
});

Расширенный подход: SEO и доступность

Умение работать с мета-контентом повышает SEO-продвижение и налаживает доступность ресурсов.

Полезные материалы

1. Document: метод querySelector() – Web API | MDN — Начальное руководство по извлечению мета-тегов.
2. html – Как получить информацию из мета-тегов с помощью JavaScript? – Stack Overflow — Форум с обсуждениями методики извлечения данных.
3. Необходимые мета-теги для социальных сетей | CSS-Tricks — Совместимость мета-тегов и социальных сетей.
4. HTML мета-тег – W3Schools — Учебник по мета-тегам.
5. Поиск: getElement, querySelector — Энциклопедия методов поиска элементов в DOM.
6. Применение мета-тегов в HTML: основы и лучшие практики – SitePoint — Рекомендации по использованию мета-тегов.
7. Как извлечь элементы из DOM | DigitalOcean — Руководство по выборке элементов из DOM.