El código que muestro a continuación es algo básico para la indexación de sites en las redes sociales.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 | <!-- Update your html tag to include the itemscope and itemtype attributes. --> <html itemscope itemtype="http://schema.org/Article"> <!-- Place this data between the <head> tags of your website --> <title>Page Title. Maximum length 60-70 characters</title> <meta name="description" content="Page description. No longer than 155 characters." /> <!-- Schema.org markup for Google+ --> <meta itemprop="name" content="The Name or Title Here"> <meta itemprop="description" content="This is the page description"> <meta itemprop="image" content="http://www.example.com/image.jpg"> <!-- Twitter Card data --> <meta name="twitter:card" content="summary_large_image"> <meta name="twitter:site" content="@publisher_handle"> <meta name="twitter:title" content="Page Title"> <meta name="twitter:description" content="Page description less than 200 characters"> <meta name="twitter:creator" content="@author_handle"> <!-- Twitter summary card with large image must be at least 280x150px --> <meta name="twitter:image:src" content="http://www.example.com/image.jpg"> <!-- Open Graph data --> <meta property="og:title" content="Title Here" /> <meta property="og:type" content="article" /> <meta property="og:url" content="http://www.example.com/" /> <meta property="og:image" content="http://example.com/image.jpg" /> <meta property="og:description" content="Description Here" /> <meta property="og:site_name" content="Site Name, i.e. Moz" /> <meta property="article:published_time" content="2013-09-17T05:59:00+01:00" /> <meta property="article:modified_time" content="2013-09-16T19:08:47+01:00" /> <meta property="article:section" content="Article Section" /> <meta property="article:tag" content="Article Tag" /> <meta property="fb:admins" content="Facebook numberic ID" /> |
Herramientas para probar la valides de los meta tags
Twitter Validator: https://dev.twitter.com/docs/cards/validation/validator
Facebook Debugger: https://developers.facebook.com/tools/debug
Google Structured Data Testing Tool: http://www.google.com/webmasters/tools/richsnippets
Pinterest Rich Pins Validator: http://developers.pinterest.com/rich_pins/validator/
Tips de buenas practicas
Optimizacion de imagenes.
La imagen que enlazas en tus datos sociales no tiene que estar en la página, pero debería representar bien tu contenido. La imagen le permite controlar lo que la gente ve cuando comparte su contenido, por lo que es importante utilizar imágenes de calidad.
Cada plataforma social tiene diferentes estándares para el dimensionamiento. Normalmente, es más fácil mantenerlo sencillo y elegir un tamaño de imagen que funcione para todos los servicios.
Twitter thumbnail: 120x120px
Twitter imagen grande: 280x150px
Facebook: Los estándares varían, pero una imagen de al menos 200×200 pixeles funciona mejor. Facebook recomienda imágenes grandes de hasta 1200×630 pixeles de ancho.
