23.12.2024

Extraindo Dados de Meta Tags Usando JavaScript

Resposta Rápida

Use JavaScript para recuperar o conteúdo da meta tag description da seguinte forma:

// Solicitando dados
const content = document.querySelector('meta[name="description"]').content;
console.log(content); // "Olá, mundo! As melhores descrições!"

Para uma tag com o atributo property, mudamos o seletor:

// Seleção por atributos property
const content = document.querySelector("meta[property='og:description']").content;
console.log(content); // "Descrição de qualidade no formato Open Graph"

Abordagens Principais: Trabalhando com Diferentes Atributos

Atributos name

Exemplo de extração de palavras-chave do atributo name:

// Solicitando palavras-chave
const keywords = document.querySelector('meta[name="keywords"]').content;
console.log(keywords);

Atributos property

A extração de dados de atributos property é feita da seguinte forma:

// Buscando títulos OG
const ogTitle = document.querySelector('meta[property="og:title"]').content;
console.log(ogTitle);

Visão Geral: Iterando Através das Meta Tags

Para obter uma lista completa de meta tags, use este código:

// Hora de analisar as meta tags!
const metas = document.getElementsByTagName('meta');
for (let meta of metas) {
    if (meta.getAttribute('property') === 'og:title') {
        console.log(meta.getAttribute('content'));
    }
}

Abordagem Abrangente: Função Universal de Recuperação de Conteúdo

A seguinte função é adequada para extrair informações de qualquer meta tag:

// Apresentando a função GETCONTENT()!
function getMetaContentByName(name, contentName = 'content') {
    const tag = document.querySelector(`meta[name="${name}"]`);
    return tag ? tag.getAttribute(contentName) : '';
}

Verificação de Nulo e Prevenção de Erros

Garanta a segurança do código verificando se é nulo:

// NULO não passa!
const metaContent = getMetaContentByName('description');
if (metaContent) {
    console.log(metaContent);
} else {
    console.log('Falha na recuperação. NULO não é permitido!');
}

Visualização

Pense no JavaScript como um analista extraindo informações de partes ocultas do código.

Estrutura:
- 🧩🧩🧩 (código HTML)
- 🧩🧩🕹️ (meta tag alvo)
- 🧩🧩🧩

O analista usa uma ferramenta de seleção (🔍): document.querySelector

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

Então o agente (🤖) encontra os dados especificados:

🕵️‍♂️: Informação no atributo "content".
🕹️: Palavras-chave: "JavaScript, HTML, Meta tag"

O conteúdo do atributo content se torna uma descoberta valiosa para nosso analista.

Lidando com Conteúdo Dinâmico

O JavaScript às vezes trabalha com conteúdo gerado dinamicamente e deve esperar por atualizações do DOM ou usar MutationObserver.

Extração em Lote de Dados de Meta

Para extrair um array de conteúdos de meta tags, use JavaScript:

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

Abordagem Avançada: SEO e Acessibilidade

A capacidade de trabalhar com conteúdo meta melhora os esforços de SEO e aumenta a acessibilidade dos recursos.

Recursos Úteis

1. Document: método querySelector() – Web API | MDN — Um guia para iniciantes sobre como extrair meta tags.
2. html - Como obter informações de meta tags usando JavaScript? - Stack Overflow — Fórum de discussão sobre métodos de extração de dados.
3. Meta Tags Essenciais para Mídias Sociais | CSS-Tricks — Compatibilidade de meta tags com redes sociais.
4. Meta Tag HTML - W3Schools — Um tutorial sobre meta tags.
5. Busca: getElement, querySelector — Uma enciclopédia de métodos de busca de elementos no DOM.
6. Usando Meta Tags em HTML: Noções Básicas e Melhores Práticas – SitePoint — Recomendações para uso de meta tags.
7. Como Extrair Elementos do DOM | DigitalOcean — Um guia sobre como selecionar elementos do DOM.

Video

Navigation