IMPORTANT: Per accedir als fitxer de subversion: http://acacha.org/svn (sense password). Poc a poc s'aniran migrant els enllaços. Encara però funciona el subversion de la farga però no se sap fins quan... (usuari: prova i la paraula de pas 123456)

Facebook

Utilitza Open Graph Protocol (aka OGP).

Exemple:

<http prefix="og: http://ogp.me/ns#">
<head>

<meta property="og:title" content="Enjoy Fireworks">
<meta property="og:description" content="Fireworks are beautiful.
     This article explains how beautiful fireworks are.">
<meta property="og:image" content=
     "https://developers.google.com/web/imgs/fireworks.jpg">
<meta property="og:url" content=
    "{{site.sample_link_base}}discovery-and-distribution/optimizations-for-crawlers/social-sites.html">
<meta property="og:type" content="website">

</head>

Resources:

Laravel

Paquet per ajudar a la construcció dels headers:

https://github.com/chriskonnertz/open-graph
 $og = new OpenGraph();

    $og->title('Apple Cookie')
        ->type('article')
        ->image('http://example.org/apple.jpg')
        ->description('Welcome to the best apple cookie recipe never created.')
        ->url();

Render these tags in a template as follows:

    {!! $og->renderTags() !!}

Google

Especificació:

https://schema.org/docs/full.html

Exemple:

<div itemscope itemtype="http://schema.org/Article">
  <h1 itemprop="name">Enjoy fireworks</h1>
  <p itemprop="description">Fireworks are beautiful.
   This article explains how beautiful fireworks are.</p>
  <img itemprop="image" src="//developers.google.com/web/imgs/fireworks.jpg" />
</div>

Eina per a comprovar:

https://search.google.com/structured-data/testing-tool/u/0/

Resources:

Twitter

Twitter utilitza Twitter Cards:

Exemple amb totes 3 xarxes

Això d'haurà d'aplicar a la Landing Page del projecte de síntesi.

 
 <!-- namespace declaration -->
<html prefix="og: http://ogp.me/ns#">
  <!-- define microdata scope and type -->
  <head itemscope itemtype="http://schema.org/Article">
    <title>Social Site Example</title>
    <!-- define ogp and itemprop of microdata in one line -->
    <meta property="og:title" itemprop="name" content="Enjoy Fireworks">
    <!-- define ogp image -->
    <meta property="og:image" content=
     "https://developers.google.com/web/imgs/fireworks.jpg">
    <!-- use link[href] to define image url for microdata -->
    <link itemprop="image" href="//developers.google.com/web/imgs/fireworks.jpg">
    <!-- define ogp and itemprop of microdata in one line -->
    <meta property="og:url" content=
     "{{site.sample_link_base}}discovery-and-distribution/optimizations-for-crawlers/social-sites2.html">
    <!-- define ogp type -->
    <meta property="og:type" content="website">
    <!-- define twitter cards type -->
    <meta name="twitter:card" content="summary_large_image">
    <!-- define site's owner twitter id -->
    <meta name="twitter:site" content="agektmr">
    <!-- define description for ogp and itemprop of microdata in one line -->
    <meta property="og:description" itemprop="description"
     content="Fireworks are beautiful. This article explains how beautiful fireworks are.">
    <!-- general description (separate with ogp and microdata) -->
    <meta name="description" content="Fireworks are beautiful.
     This article explains how beautiful fireworks are.">
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
    <link rel="stylesheet" href="https://code.getmdl.io/1.2.1/material.indigo-pink.min.css">
    <script defer src="https://code.getmdl.io/1.2.1/material.min.js"></script>
    <style>
      body {
        margin: 2em;
      }
    </style>
  </head>

Vegeu també

Enllaços externs