WDD 231: Desenvolvimento Frontend para Web I

S02 – Atividade de Aprendizagem: Metadados para Redes Sociais

Visão Geral

Sites de redes sociais, como o Facebook, rastreiam sites para que possam gerar pré-visualizações detalhadas aos usuários, incluindo informações como título, descrição e uma imagem ilustrativa. Sem informações adicionais, eles tentarão adivinhar o conteúdo da sua página. No entanto, você pode fornecer esses dados diretamente a essas plataformas, garantindo que seu site tenha a aparência que você deseja. Essas informações são fornecidas por meio de meta tags de redes sociais.

Nesta atividade, você aprenderá mais sobre meta tags de redes sociais e como incluí-las em suas páginas da web.

Preparação

As meta tags de redes sociais são usadas para oferecer suporte a uma visualização detalhada para rastreadores de redes sociais, como o Facebook, com informações relevantes, incluindo título, descrição, imagem ilustrativa e local. Sem essas meta tags, a plataforma tentará adivinhar o conteúdo da sua página. É melhor fornecer as informações de forma explícita para que você possa especificar o que deseja exibir.

Meta tags Comuns de Redes Sociais

Como você já aprendeu, as meta tags são usadas dentro da seção <head> da página para definir informações sobre ela, como o autor ou uma descrição. Se você usar meta tags específicas que estejam alinhadas com as expectativas das redes sociais, ficará mais fácil para esses sites identificarem e utilizarem as informações que você deseja.

Não existe um padrão oficial para as propriedades de redes sociais definido nos padrões HTML. Em vez disso, há certas propriedades que as principais redes sociais procuram e que você pode incluir em sua página para informá-las.

As meta tags mais comuns para redes sociais incluem o seguinte:

Facebook

O Facebook usa meta tags Open Graph para fornecer uma prévia detalhada da sua página quando ela é compartilhada na plataforma.

A seguir estão algumas propriedades comuns de Open Graph (og) que você pode querer incluir em suas páginas HTML:

Exemplo

A seguir estão as meta tags og em apple.com:

<meta property="og:title" content="Apple">
<meta property="og:description" content="Discover the innovative world of Apple and shop everything iPhone, iPad, Apple Watch, Mac, and Apple TV, plus explore accessories, entertainment, and expert device support.">
<meta property="og:url" content="https://www.apple.com/">
<meta property="og:locale" content="en_US">
<meta property="og:image" content="https://www.apple.com/ac/structured-data/images/open_graph_logo.png?202110180743" />
<meta property="og:type" content="website">
<meta property="og:site_name" content="Apple">
X (Twitter)

A plataforma X, anteriormente conhecida como Twitter, usa os cartões sociais do Twitter (ou X Cards) para fornecer uma prévia detalhada da sua página quando ela é compartilhada na plataforma.

A seguir estão algumas propriedades comuns de X Cards que você pode querer incluir em suas páginas HTML:

Exemplo

A seguir estão as meta tags do Twitter em microsoft.com:

<meta name="twitter:url" content="https://www.microsoft.com/pt-br">
<meta name="twitter:title" content="Microsoft – AI, Cloud, Productivity, Computing, Gaming &amp; Apps">
<meta name="twitter:description" content="Explore Microsoft products and services and support for your home or business. Shop Microsoft 365, Copilot, Teams, Xbox, Windows, Azure, Surface and more.">
<meta name="twitter:card" content="summary">

Decida o que incluir

Como você pode ver, existem várias propriedades diferentes que podem ser definidas tanto para o Facebook e Twitter quanto para outras redes sociais. Como existem diversas opções, pode ser difícil decidir o que incluir.

Se você quiser definir explicitamente todos esses valores para todos esses sites, precisará incluir todas essas meta tags, mesmo que elas possam parecer redundantes. Por outro lado, você pode decidir que apenas as propriedades mais básicas são necessárias e deixar que a rede social adivinhe as outras informações que precisar.

A maioria dos sites inclui algumas propriedades disponíveis, não todas.

Avalie Seu Conhecimento

  1. Quais são as propriedades de redes sociais do site principal da Igreja em https://br.aigrejadejesuscristo.org/?

    Você pode visualizar as metapropriedades acessando o site e visualizando a fonte ou inspecionando o conteúdo da página.

    Observe que o conteúdo pode mudar a qualquer momento. Se você não estiver vendo o mesmo conteúdo, não se preocupe, pois o princípio e a aplicação são partes importantes deste exercício.

    Clique para obter a Resposta 
    <meta property="og:description" content="Discover a service-oriented, globally-connected Christian church that is led by a prophet of God and seeks to follow Jesus Christ and His restored gospel.">
<meta property="og:image" content="https://www.churchofjesuschrist.org/imgs/45e59c1c726d11ec9eb5eeeeac1ea79d5f76a9ce/full/!1280%2C674/0/default">
<meta property="og:title" content="Homepage - The Church of Jesus Christ of Latter-day Saints">

Instruções da Atividade

Adicione meta tags de redes sociais do Facebook à sua página inicial do curso.

  1. Abra sua página inicial do curso a partir da tarefa da semana anterior. (indice.html)
  2. Adicione estas metapropriedades de Open Graph ao documento:
    1. título
    2. descrição
    3. imagem
    4. url
  3. Teste e confira seus metadados visualizando o código-fonte da página nas Ferramentas do Desenvolvedor do navegador.

Recursos Opcionais