<meta information content="websites" />

Let your website talk to us!

<meta content='Carlos Batman' />

Meta informação

  • ​Dados que não são renderizados (normalmente)
  • Comunicação com máquinas ("bots de motores de busca", "screen readers")

Meta tags

  • ​Tags html não-renderizadas (normalmente)
  • Tags que passam informação a máquinas
  • SEO, Rich Snippets, Redes sociais...

Open Graph

The Open Graph protocol enables any web page to become a rich object in a social graph - OGP

OpenGraph

Notes

source (data and images): Stack Overflow

If a tag can have multiple values, just put multiple versions of the same tag on your page. The first tag (from top to bottom) is given preference during conflicts.

og:image supports multiple images

OpenGraph 4 Facebook

Characteristics and tips

 

 

OpenGraph 4 Facebook

  • Large and wide
    • 1200x630px (rec.)
    • 600x315 (min.)
    • below this, it is set as 'square'
  • Small and inline
    • 200x200 (min.)

Images

source (data and images): Facebook Developers

OpenGraph 4 Facebook

Can I avoid this?

  • Pre-cache with Sharing debugger
  • Set meta info for image width and height after it:
    • og:image:width
    • og:image:height

Pre-caching

source: Facebook Developers

(...) the first person who shares a piece of content won't see a rendered image.

OpenGraph 4 Facebook

 

Tooling

source: Facebook Developers

Botão para partilhar

  • Não esquecer parâmetro u
  • {{ url }} = url da página
  • onclick opcional (serve para abrir nova janela)
  • Estranhamente ausente da documentação (?)
<a 
  href="http://www.facebook.com/sharer.php?u={{ url }" 
  onclick="return !window.open(this.href, 'Facebook')">
    Partilhar
</a>

OpenGraph AND Twitter

Characteristics and tips

 

 

Meta Tags para Twitter

  • Herda meta tags Open Graph
  • Tem tags específicas para definir aspeto de partilha (Card)

Twitter Sharing

 

Tooling

source: Twitter Card Validator

Botão para partilhar

  • Não esquecer parâmetro url
  • {{ url }} = url da página
  • onclick opcional (serve para abrir nova janela)
  • Card não aparece em janela de partilha
<a 
  href="https://twitter.com/share?url={{ url }}" 
  onclick="return !window.open(this.href, 'Twitter')">
    Partilhar
</a>

OpenGraph 4

Facebook AND Twitter

The bare minimum for both, avoiding repetition

 

 

<meta property="og:title" content="Title">
<meta property="og:description" content="Some description">
<meta property="og:image" content="http://image-url-example.jpg">
<meta property="og:url" content="the-default-url">
<meta name="twitter:card" content="summary_large_image">
<!-- recommended, for analytical tools -->
<meta property="fb:app_id" content="app-id-whatever" />
<meta name="twitter:site" content="@website-username">
  • Title, description and image are used by both
    • image large enough for facebook, at most 1MB (twitter constraint)
  • canonical url: Facebook
  • Twitter card... duh!
  • Social network Analytics

source: The Essential Meta Tags for Social Media

Schema.org

Structured data for search engines

 

 

Schema?

So... what is is?

  • Just a "vocabulary" that defines entities
    • have properties with names and value types
  • Created by some search engine gurus
    • Google, Microsoft, Yandex & Yahoo!
  • Can be inserted in pages, emails in different formats
  • Provide "valuable" and structured data to Search Engines
    • can "optimize" and restructure results in "rich snippets"

Schema

How can it be added to a web page?

JSON-LD (rec. by Google)

Microdata (in HTML markup)

There are others...

<script type="application/ld+json">
{
  "@context": "http://schema.org/",
  "@type": "Person",
  "name": "John Wick",
  "alternateName": "Boogeyman Killer",
  "url": "http://www.johnwickkills.com",
  "image": "http://montrealrampage.com/wp-content/uploads/2017/02/jw1.jpg",
  "sameAs": "https://www.facebook.com/johnwickmovie/",
  "jobTitle": "Assassin",
  "worksFor": {
    "@type": "Organization",
    "name": "Independent"
  }  
}
</script>
<!-- just an example of structure, of course -->
<span itemscope itemtype="http://schema.org/Person">
  <meta itemprop="name" content="John Wick"/>
  <meta itemprop="alternateName" content="Boogeyman Killer"/>
  <link itemprop="url" href="http://www.johnwickkills.com"/>
  <img itemprop="image" src="http://montrealrampage.com/wp-content/uploads/2017/02/jw1.jpg"/>
  <meta itemprop="jobTitle" content="Assassin"/>
  <span itemprop="worksFor" itemscope itemtype="http://schema.org/Organization">
    <meta itemprop="name" content="Independent"/>
  </span>
  <a itemprop="sameAs" href="https://www.facebook.com/johnwickmovie/">Facebook</a>
</span>

Schema

Example - Recipe 

<script type="application/ld+json">
{
  "@context": "http://schema.org/", 
  "@type": "Recipe", 
  "name": "Fwied Wabbit",
  "image": "http://3.bp.blogspot.com/-HaSlBKaJw0I/VKazwDcelRI/AAAAAAAAALs/YlKI80Oh3CM/s1600/bugs-bunny.gif",
  "description": "A dewicious treat for hungwy huntews!",
  "author": {
    "@type": "Person",
    "name": "Elmer Fudd"
  },
  "datePublished": "2017-11-04",
  "prepTime": "PT20M",
  "cookTime": "PT5M", 
  "totalTime": "PT25M", 
  "recipeCategory": "entree", 
  "recipeYield": "1", 
  "nutrition": {
    "@type": "NutritionInformation",
    "calories": "324 cal"
  },
  "recipeIngredient": [
    "Bunny Wabbit",
    "ACME Bawbecue Sauce"
  ],
  "recipeInstructions": [
    "Hunt the wabbit",
    "Add sauce to the wabbit",
    "Fwi it!",
    "Enjoy"
  ],
  "aggregateRating": {
    "@type": "AggregateRating",
    "ratingValue": "4",
    "bestRating": "5",
    "worstRating": "0",
    "ratingCount": "5"
  }
}
</script>

Tested in Google's Schema Markup Validator and made with Merkle's Schema Markup Generator

Schema

Useful tools

 

HTML <meta tags e atributos>

Passar informação ao "user agent"

 

 

hreflang

Links para o equivalente a uma certa página, mas noutra língua

Bibliography

Meta Information for Websites

By Miguel Costa

Made with Slides.com

Meta Information for Websites

On meta information for web pages, with emphasis on it impact for social networks and search engines.

  • 446

More from Miguel Costa