Neste artigo você vai aprender como criar meta-tags para disponibilizar dados estruturados para redes sociais.
Protocolo Open Graph
O protocolo Open Graph permite que qualquer página da web se torne um objeto rico em um gráfico social. Por exemplo, isso é usado no Facebook para permitir que qualquer página da web tenha a mesma funcionalidade que qualquer outro objeto no Facebook.
Metadados Básicos
Para transformar suas páginas da web em objetos gráficos, você precisa adicionar metadados básicos à sua página. Baseamos a versão inicial do protocolo em RDFa, o que significa que você colocará <meta>tags adicionais no <head>de sua página da web. As quatro propriedades necessárias para cada página são:
og:title - O título do seu objeto como ele deve aparecer no gráfico, por exemplo, "Programar WEB - Seção Programação".
og:type - O tipo do seu objeto, por exemplo, "article". Dependendo do tipo que você especificar, outras propriedades também podem ser necessárias.
og:image - Um URL de imagem que deve representar seu objeto no gráfico.
og:url - O URL canônico de seu objeto que será usado como seu ID permanente no gráfico, por exemplo, "https://programarweb.mrab/programacao"
Vou explicar um pouco melhor og:type pois ele tem muitos tipos:
og:type
Esta meta-tag na minha opnião é a mais importante pois explica para as redes sociais que tipo de objeto está sendo descrito e indexado.
og:type pode vir acrescida de outras meta-tags complementáres a fim incluir novas informações. Elas podem ser de:
Música
music.song
music:duration- inteiro > = 1 - A duração da música em segundos.
music:album- music.album array - O álbum do qual pertence esta música.
music:album:disc- inteiro > = 1 - Em qual disco do álbum esta música está.
music:album:track- inteiro > = 1 - Qual faixa é essa música.
music:musician- array de perfis - O músico que fez essa música.
Exemplo:
<meta property="og:title" content="Dirt" /> <meta property="og:type" content="music.song" /> <meta property="music:album" content="Dirt" /> <meta property="music:musician" content="Keane" /> <meta property="music:album:disc" content="1" /> <meta property="music:album:track" content="1" /> <meta property="music:release_date" content="2021" />
Vídeo
video.movie
video:actor - array de perfis - Atores do filme.
video:actor:role - string - O papel que eles desempenharam.
video:director - matriz de perfis - Diretores do filme.
video:writer - matriz de perfil - Escritores do filme.
video:duration - inteiro > = 1 - A duração do filme em segundos.
video:release_date - datetime - A data em que o filme foi lançado.
video:tag - array de strings - Palavras de tag associadas a este filme.
Exemplo:
<meta property="og:title" content="Max X Vírus" /> <meta property="og:type" content="video.movie" /> <meta property="video:duration" content="30" /> <meta property="video:tag" content="Jogo, Android, trailer" /> <meta property="video:duration" content="30" />
video.tv_show
Um programa de TV com vários episódios. Os metadados são idênticos a video.movie.
video.other
Um vídeo que não pertence a nenhuma outra categoria. Os metadados são idênticos a video.movie.
Artigo
article
article:published_time - datetime - Quando o artigo foi publicado pela primeira vez.
article:modified_time - datetime - Quando o artigo foi alterado pela última vez.
article:expiration_time - datetime - Quando o artigo fica desatualizado depois.
article:author - array de perfis - Escritores do artigo.
article:section - string - Um nome de seção de alto nível. Por exemplo, tecnologia
article:tag - array de strings - Palavras de tag associadas a este artigo.
Exemplo:
<meta property="og:type" content="article" />
<meta property="og:url" content="https://programarweb.mrab.com.br/programação/utilizando-o-recurso-de-geolocalização-do-html-5-junto-com-o-openstreetmap" />
<meta property="og:title" content="Utilizando o recurso de geolocalização do HTML 5 junto com o openStreetmap" />
<meta property="og:description" content="Aprenda a criar mapa de geolocalização que mostra onde você está utilizando apenas o html5 e java-script." />
<meta property="og:locale" content="pt_BR" />
<meta property="og:image" content="https://programarweb.mrab.com.br/sites/default/files/logo_programar_web_final_qualidade.png" />
<meta property="og:site_name" content="Programar WEB" /> Livro
book
book:author - array de perfis - Quem escreveu este livro.
book:isbn - string - O ISBN
book:release_date - datetime - A data em que o livro foi lançado.
book:tag - array de strings - Palavras de tag associadas a este livro.
Perfil
profile
profile:first_name- string - Um nome normalmente dado a um indivíduo por um dos pais ou escolhido por ele mesmo.
profile:last_name- string - Um nome herdado de uma família ou casamento e pelo qual o indivíduo é comumente conhecido.
profile:username- string - Uma string curta e exclusiva para identificá-los.
profile:gender- enum (masculino, feminino) - Seu gênero.
Website
website - Nome de Website
Dentro da esturura do Html e semanticamente os meta-tags tem ser colocadas dentro de <head> ... </head> no começo da página.
<html>
<head>
<!-- meta-tags Facebook -->
<meta property="og:type" content="article" />
<meta property="og:url" content="https://programarweb.mrab.com.br/programação/utilizando-o-recurso-de-geolocalização-do-html-5-junto-com-o-openstreetmap" />
<meta property="og:title" content="Utilizando o recurso de geolocalização do HTML 5 junto com o openStreetmap" />
<meta property="og:description" content="Aprenda a criar mapa de geolocalização que mostra onde você está utilizando apenas o html5 e java-script." />
<meta property="og:locale" content="pt_BR" />
<meta property="og:image" content="https://programarweb.mrab.com.br/sites/default/files/logo_programar_web_final_qualidade.png" />
<meta property="og:site_name" content="Programar WEB" />
<!-- meta-tags Twitter -->
<meta name="twitter:creator" content="@Programar_W_E_B" />
<meta name="twitter:title" content="Utilizando o recurso de geolocalização do HTML 5 junto com o openStreetmap" />
<meta name="twitter:description" content="Aprenda a criar um mapa de geolocalização que mostra onde você está utilizando apenas o html5 e java-script." />
<meta name="twitter:image" content="https://programarweb.mrab.com.br/sites/default/files/logo_programar_web_final_qualidade.png" />
</head>
<body>
</body>
</html>
Existem outras meta-tags, que não vou explicar aqui. Caso você queira mais informações acesse estes links:
Espero que você possa ter entendido a importancia de colocar meta-tags em páginas WEB.