O protocolo Gráfico Aberto

Por admin em

Introdução

O protocolo Gráfico Aberto permite que qualquer página web se torne num objecto arich num gráfico social. Por exemplo, isto é usado no Facebook para permitir que qualquer página web tenha a mesma funcionalidade que qualquer outro objecto no Facebook.

Embora existam e possam ser combinados muitas tecnologias e esquemas diferentes, não existe uma única tecnologia que forneça informação suficiente que represente torichosamente qualquer página web dentro do gráfico social. O protocolo Open Graph constrói sobre estas tecnologias existentes e dá aos programadores uma coisa a implementar. A simplicidade dos programadores é um objectivo chave do protocolo Gráfico Aberto que tem informado muitas das decisões técnicas de design.

Basic Metadata

Para transformar as suas páginas web em objectos gráficos, é necessário adicionar metadados básicos à sua página. Baseámos a versão inicial do protocolo noRDFa, o que significa que colocará <meta> tags no <head> da sua página web. As quatro propriedades exigidas para cada página são:

  • og:title – O título do seu objecto como deve aparecer no gráfico, por exemplo, “The Rock”.
  • og:type – O tipo do seu objecto, por exemplo, “vídeo.movie”. Dependendo do tipo que especificar, outras propriedades podem também ser requeridas.
  • og:image – Um URL de imagem que deve representar o seu objecto dentro do gráfico.
  • og:url – O URL canónico do seu objecto que será usado como ID permanente no gráfico, por exemplo “https://www.imdb.com/title/tt0117500/”.

Como exemplo, o seguinte é a marcação do protocolo Open Graph para The Rock onIMDB:

<html prefix="og: https://ogp.me/ns#"><head><title>The Rock (1996)</title><meta property="og:title" content="The Rock" /><meta property="og:type" content="video.movie" /><meta property="og:url" content="https://www.imdb.com/title/tt0117500/" /><meta property="og:image" content="https://ia.media-imdb.com/images/rock.jpg" />...</head>...</html>

Metadados Opcionais

As seguintes propriedades são opcionais para qualquer objecto e são geralmente recomendadas:

  • og:audio – Um URL para um ficheiro de áudio para acompanhar este objecto.
  • og:description – Uma descrição de uma a duas frases do seu objecto.
  • og:determiner – A palavra que aparece antes do título deste objecto numa frase. Uma enumeração de (a, an, the, “”, auto). Se auto for escolhido, o consumidor dos seus dados deve escolher entre “a” ou “an”.O padrão é “” (em branco).
  • og:locale – O locale estas etiquetas são marcadas em.Do formato language_TERRITORY. O padrão é en_US.
  • og:locale:alternate – Um conjunto de outros locais esta página está disponível em.
  • og:site_name – Se o seu objecto fizer parte de um site maior, o nome que deve ser exibido para o site em geral. e.g, “IMDb”.
  • og:video – Um URL para um ficheiro de vídeo que complementa este objecto.

Por exemplo (quebra de linha apenas para fins de exibição):

<meta property="og:audio" content="https://example.com/bond/theme.mp3" /><meta property="og:description" content="Sean Connery found fame and fortune as the suave, sophisticated British agent, James Bond." /><meta property="og:determiner" content="the" /><meta property="og:locale" content="en_GB" /><meta property="og:locale:alternate" content="fr_FR" /><meta property="og:locale:alternate" content="es_ES" /><meta property="og:site_name" content="IMDb" /><meta property="og:video" content="https://example.com/bond/trailer.swf" />

O esquema RDF (em Tartaruga) pode ser encontrado em ogp.me/ns.

Propriedades estruturadas

Algumas propriedades podem ter metadados extra ligados a elas.Estes são especificados da mesma forma que outros metadados com property econtent, mas o property terá extra :.

O og:image propriedade tem algumas propriedades estruturadas opcionais:

  • og:image:url – Idêntico a og:image.
  • og:image:secure_url – Uma url alternativa para usar se a página web requerHTTPS.
  • og:image:type – Um tipo MIME para esta imagem.
  • og:image:width – O número de pixels de largura.
  • og:image:height – O número de pixels de largura.
  • og:image:alt – Uma descrição do que está na imagem (não uma legenda). Se a página especificar uma og:imagem deve especificar og:image:alt.

Um exemplo completo da imagem:

<meta property="og:image" content="https://example.com/ogp.jpg" /><meta property="og:image:secure_url" content="https://secure.example.com/ogp.jpg" /><meta property="og:image:type" content="image/jpeg" /><meta property="og:image:width" content="400" /><meta property="og:image:height" content="300" /><meta property="og:image:alt" content="A shiny red apple with a bite taken out" />

O og:video tag tem as mesmas tags que og:image. Aqui está um exemplo:

<meta property="og:video" content="https://example.com/movie.swf" /><meta property="og:video:secure_url" content="https://secure.example.com/movie.swf" /><meta property="og:video:type" content="application/x-shockwave-flash" /><meta property="og:video:width" content="400" /><meta property="og:video:height" content="300" />

The og:audio tag tem apenas as 3 primeiras propriedades disponíveis (uma vez que o tamanho não faz sentido para o som):

<meta property="og:audio" content="https://example.com/sound.mp3" /><meta property="og:audio:secure_url" content="https://secure.example.com/sound.mp3" /><meta property="og:audio:type" content="audio/mpeg" />

Arrays

Se uma tag pode ter vários valores, basta colocar várias versões da mesma<meta> tag na sua página. A primeira etiqueta (de cima para baixo) é dadapreferência durante os conflitos.

<meta property="og:image" content="https://example.com/rock.jpg" /><meta property="og:image" content="https://example.com/rock2.jpg" />

P>Põe propriedades estruturadas depois de declarar a sua etiqueta de raiz. Sempre que um outro elemento raiz é analisado, essa propriedade estruturada é considerada como tendo sido feita e outra é iniciada.

Por exemplo:

<meta property="og:image" content="https://example.com/rock.jpg" /><meta property="og:image:width" content="300" /><meta property="og:image:height" content="300" /><meta property="og:image" content="https://example.com/rock2.jpg" /><meta property="og:image" content="https://example.com/rock3.jpg" /><meta property="og:image:height" content="1000" />

significa que existem 3 imagens nesta página, a primeira imagem é 300x300, a do meio tem dimensões não especificadas, e a última é 1000px alto.

Tipos de objectos

Para que o seu objecto possa ser representado dentro do gráfico, é necessário especificar o seu tipo. Isto é feito utilizando o og:type propriedade:

<meta property="og:type" content="website" />

Quando a comunidade concorda com o esquema para um tipo, este é adicionado à lista de tipos globais. Todos os outros objectos no sistema de tipos sãoCURIOS da forma

<head prefix="my_namespace: https://example.com/ns#"><meta property="og:type" content="my_namespace:my_type" />

Os tipos globais são agrupados em verticais. Cada vertical tem itsown namespace. O og:type valores para um namespace são sempre prefixados com o namespace e depois um ponto.Isto é para reduzir a confusão com os tipos de nomes definidos pelo utilizador que têm sempre neles colóns.

Música

  • Namespace URI: https://ogp.me/ns/music#

og:type valores:

music.song

  • music:duration – inteiro >=1 – A duração da canção em segundos.
  • music:album – music.album array – O álbum de onde esta canção é de.
  • music:album:disc – inteiro >=1 – De que disco do álbum esta canção está a tocar.
  • music:album:track – inteiro >==1 – Que faixa é esta canção.
  • music:musician – matriz de perfis – O músico que fez esta canção.

music.album

  • music:song – music.song – A canção deste álbum.
  • music:song:disc – integer >==1 – O mesmo que music:album:disc mas em reverso.
  • music:song:track – inteiro >=1 – O mesmo que music:album:track mas em reverso.
  • music:musician – perfil – O músico que fez esta canção.
  • music:release_date – datetime – A data de lançamento do álbum.

music.playlist

  • music:song – Idêntico aos da música.album
  • music:song:disc
  • music:song:track
  • music:creator – perfil – O criador desta playlist.

music.radio_station

    >>li> music:creator – profile – O criador desta estação.

Video

    Namespace URI: https://ogp.me/ns/video#

og:type valores:

video.movie

    • video:actor – profile array -Actores no filme.
    • video:actor:role – string – O papel que desempenharam.
    • video:director – profile array -Directores do filme.
    • video:writer – profile array -Escritores do filme.
    • video:duration – integer >==1 – A duração do filme em segundos.
    • video:release_date – data – A data de lançamento do filme.
    • video:tag – string array -Tag words associated with this movie.

    video.episode

    • video:actor – Idêntico ao vídeo.filme
    • video:actor:role
    • video:director
    • video:writer
    • video:duration
    • video:release_date
    • video:tag
    • video:series – video.tv_show – A que série pertence este episódio.

    video.tv_show

    Um programa de televisão 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.

    Não Vertical

    Estes são objectos globalmente definidos que simplesmente não cabem num butyet vertical são amplamente utilizados e acordados.

    og:type valores:

    article – Namespace URI: https://ogp.me/ns/article#

    • article:published_time – data/hora – Quando o artigo foi publicado pela primeira vez.
    • article:modified_time – data/hora – Quando o artigo foi alterado pela última vez.
    • article:expiration_time – datatime – Quando o artigo estiver desactualizado após.
    • article:author – profile array -Escritores do artigo.
    • article:section – string – Um nome de secção de alto nível. Ex. Tecnologia
    • article:tag – string array -Tag palavras associadas a este artigo.

    book – Namespace URI: https://ogp.me/ns/book#

    • book:author – matriz de perfil – Quem escreveu este livro.
    • book:isbn – string – O ISBN
    • book:release_date – datetime – A data em que o livro foi lançado.
    • book:tag – string array -Tag palavras associadas a este livro.

    profile – Namespace URI: https://ogp.me/ns/profile#

      • profile:first_name – string – Um nome normalmente dado a um indivíduo por um dos pais ou escolhido por ele próprio.
      • profile:last_name – string – Um nome herdado de uma família ou casamento e pelo qual o indivíduo é comummente conhecido.
      • profile:username – string – Uma pequena string única para identificá-los.
      • profile:gender – enum (masculino, feminino) – O seu género.

      website – Namespace URI: https://ogp.me/ns/website#

      Nenhuma propriedade adicional para além das básicas. Qualquer página web não assinalada deve ser tratada como og:type website.

      Tipos

      Os seguintes tipos são utilizados na definição de atributos no protocolo Open Graph.

      Type Descrição Literais
      Boolean A Boolean representa um valor verdadeiro ou falso true, falso, 1, 0
      DateTime A DateTime representa um valor temporal composto por uma data (ano, mês, dia) e uma componente de tempo opcional (horas, minutos) ISO 8601
      Enum Um tipo que consiste num conjunto delimitado de valores de cadeia constantes (membros de enumeração). Um valor de string que é um membro da enumeração
      Float Um número de ponto flutuante assinado de 64 bits Todos os literais que estão em conformidade com os seguintes formatos:
      1.234
      -1.234
      1.2e3
      -1.2e3
      7E-10
      Integer Um inteiro assinado de 32 bits. Em muitas línguas inteiros com mais de 32 bits tornam-se flutuantes, por isso limitamos o protocolo Open Graph para uma fácil utilização em várias línguas. Todos os literais que estão em conformidade com os seguintes formatos:
      1234
      -123
      /td>
      String Uma sequência de caracteres Unicode Todos os literais compostos de caracteres Unicode sem caracteres de escape
      URL Uma sequência de caracteres Unicode que identificam um recurso da Internet. Todos os URLs válidos que utilizam os protocolos https:// ou https://

      Discussão e suporte

      P>Pode discutir o Open Graph Protocol no grupo do Facebook ou na lista de correio do programador.Está actualmente a ser consumido pelo Facebook (ver a sua documentação), Google (ver a sua documentação), andmixi. Está a ser publicado por IMDb, Microsoft, NHL, Posterous, Rotten Tomatoes,TIME, Yelp, e muitos outros.

      Implementations

      A comunidade de código aberto desenvolveu uma série de analisadores e ferramentas editoriais. Informe o grupo do Facebook se também construiu algo fantástico!

      • Facebook Object Debugger -Facebook’s official parser and debugger
      • Google Rich Snippets Testing Tool – Open Graph protocol support in specific verticals and Search Engines.
      • Validador PHP e Gerador de Marcações – validador de entrada OGP 2011 e gerador de marcações em objectos PHP5
      • PHP Consumer – uma pequena biblioteca para acesso aos dados do Protocolo Gráfico Aberto em PHP
      • OpenGraphNode em PHP – um analisador simples para PHP
      • PyOpenGraph -uma biblioteca escrita em Python para analisar informações sobre o protocolo Open Graph – informação de sítios Web
      • OpenGraph Ruby -Ruby Gem que analisa páginas Web e extrai a marcação do protocolo Open Graph
      • OpenGraph for Java – pequena classe Java utilizada para representar o protocolo Open Graph
      • RDF:RDFa::Parser -Perl RDFa parser que compreende o protocolo Open Graph
      • plugin WordPress -Plugin WordPress oficial do Facebook, que adiciona metadados Open Graph a sites alimentados por WordPress.
      • Plugin OGP WordPress alternativo – plugin WordPress simples e leve, que adiciona metadados de Gráfico Aberto aos sítios WordPress alimentados por WordPress.

Categorias: Articles

0 comentários

Deixe uma resposta

O seu endereço de email não será publicado. Campos obrigatórios marcados com *

Artigos relacionados

Articles

O que é SAP S/4 HANA Cloud? Um olhar mais profundo

No início de Fevereiro de 2017, a SAP anunciou uma versão pública em nuvem do seu principal produto – S/4 HANA ERP Suite – como um elemento chave da sua iniciativa de transformação digital. O Ler mais…

Articles

241 Nomes de Cães Britânicos

Nomes de Cães Fêmeas ” Nomes de Cães BritânicosNomes de Cães Macho ” Nomes de Cães Britânicos p>Big lista de 241 nomes de cães britânicos para caber em qualquer Bulldog Inglês, Brittany Spaniel, Yorkshire Terrier, Ler mais…

Articles

Finding Apartments for Disabled Apartment Hunters

Apartment Guide Editorial Team Published: 21 de Junho de 2017 Actualizado: 16 de Agosto de 2019 Finding apartment that’s accessible and comfortable is more challenging for disabled apartment hunters and their network of support. Mas Ler mais…