SEO técnico, Sin miedo al código - Congreso Web 2014

SEO Técnico, Sin miedo al código

¿Quíen soy?��Pedro Martínez Responsable Departamento SEO en Unidad Editorial �

SEO Tecnico

Automatizar procesos (evitar errores humanos)

Control de indexación de sitios grandes

Respuesta a la pregunta “Eso no se puede hacer”

Mejor posicionamiento

Ventajas de tener en cuenta el código

Herramientas de seguimiento personalizadas

Ejemplo Practico

•  Paginación debe ser con javascript no obtrusivo para que Google pueda seguir los enlaces de cada imagen

Requisitos albumes de ELMUNDO.es

•  Cada imagen debe tener una url propia para la ��indexación independiente de cada una de ellas

•  Navegación centrada en la experiencia de usuario (AJAX)

•  Accesibilidad de las mismas funcionalidades desde cualquier dispositivo

Premisas SEO

Valor de producto

Indexación de contenido

#MarcaEspaña

Optimizando el contenido

16

Optimizando el contenido

COdigos de estado HTTP

1xx: Respuestas informativas

2xx: Peticiones correctas

3xx: Redirecciones

4xx: Errores del cliente

5xx: Errores de servidor

Codigos de estado http

3xx: Redirecciones

301: Movido permanentemente

302: Movido temporalmente

303: Vea Otra (desde HTTP/1.1)

307: Movido temporalmente (desde HTTP/1.1)


4xx: Errores del cliente

403 : Prohibido

404 : No encontrado

408 : Tiempo de espera agotado

410 : Ya no disponible

503 : Servicio no disponible


Comprobar si esas paginas existen o si se debe a un problema de acceso

Verificar si queremos que Google indexe ese contenido

Corrigiendo errores 404

Screaming Frog

Si nunca mas van a estar accesibles y Google no debe rastrearlas

Eliminamos la URL o carpeta desde WMT

Bloqueamos el acceso desde el robots.txt

Marcamos el error como solucionado

en WMT

Corrigiendo errores 404

Gestion de URLs y contenido

Contenido duplicado: Ocurre cuando existen 2 o más versiones de tu sitio. Esto diluye la fuerza de las páginas, se indexan url no amigables a los buscadores….

•  Contenido duplicado en dominio: •  domain.com •  www.domain.com •  domain.com/index.html •  www.domain.com/index.html

•  Contenido duplicado en categorías de producto:

•  http://www.dominio.com/producto.php?item=mesa •  http://www.dominio.com/producto.php?item=mesa&category=madera •  http://www.dominio.com/mesa-madera

Contenido Duplicado

http://cortefiel.com/es/tienda/hombre/cazadoras/

Contenido Duplicado

http://cortefiel.com/es/tienda/hombre/cazadoras/?option_value_talla=&price_order=asc&ov_color_sku=

Contenido Duplicado

http://cortefiel.com/es/tienda/hombre/cazadoras/ http://cortefiel.com/es/tienda/hombre/cazadoras/?option_value_talla=&price_order=asc&ov_color_sku=

<link rel="canonical" href="http://cortefiel.com/es/tienda/hombre/cazadoras/"/>

Link: <http://www.example.com/descargas/libro-blanco.pdf>; rel="canonical"

Ficheros HTML

Ficheros PDF o cualquier indexable por Google

Canonical

Añadir en las cabeceras

¿rel="canonical" es una sugerencia o una directiva?

¿Puede ser el enlace absoluto o relativo?

¿El contenido de un conjunto de páginas debe ser similar al de la versión canónica?

¿Qué sucede si rel="canonical" conduce a una página que no existe?

¿Puede seguir Google una cadena de designaciones rel="canonical"?

¿Se puede utilizar rel="canonical" para sugerir una URL canónica de un dominio completamente distinto?

Que debes saber de “Canonical”

Diferentes idiomas

<html xml:lang="es" lang="es"> !<meta http-equiv="content-language" content="es" /> <link rel="alternate" hreflang="en" href="http://www.friendlyrentals.com/" /> <link rel="alternate" hreflang="nl" href="http://www.friendlyrentals.com/nl/" /> <link rel="alternate" hreflang="it" href="http://www.friendlyrentals.com/it/" /> <link rel="alternate" hreflang="de" href="http://www.friendlyrentals.com/de/" />

Diferentes idiomas

Diferentes idiomas <link rel="alternate" hreflang=”x-default" href="http://www.zara.com/" />

<url>!

<loc>http://www.midominio.com/</loc>!

<xhtml:link rel="alternate” hreflang="es-mx” href="http://www.midominio.com.mx/”/>!

<xhtml:link rel="alternate” hreflang="es-es” href=“http://www.midominio.com/” />!

</url>!

<url>!

<loc>http://www.midominio.com/{pagina interna}</loc>!

! !<xhtml:link rel="alternate” hreflang="es-mx”

! ! ! ! ! !href=http://www.midominio.com.mx/{pagina interna} />!

<xhtml:link rel="alternate” hreflang="es-es”

! ! ! !href="http://www.midominio.com/{pagina interna}”/>!

</url>!

Sitemaps multidioma

rel=prev y rel=next http://www.example.com/artículo-parte1.html!

http://www.example.com/artículo-parte2.html!



<link rel="canonical" href="http://www.example.com/artículo-parte1.html">!

!

<link rel="prev" href="http://www.example.com/artículo-parte1.html">!

!

<link rel="next" href="http://www.example.com/artículo-parte3.html">!

Fuente: https://support.google.com/webmasters/answer/1663744?hl=es

Paginaciones

rel=prev y rel=next

Metas Especiales

Twitter Cards

Twitter Cards

Galerías Productos

SEO Mobile

LO QUE ALGUNOS LLAMAN FUTURO, ES EL PRESENTE.

TARIFAS PRINCIPALES OPERADORES

¿Pensamos en esto a la hora de programar un site?

Movistar TP 15

1 GB

Vodafone T-Internet 1 GB

Orange Delfin 1 GB

Fuente: https://developers.google.com/webmasters/smartphone-sites/details

1.- Responsive Web Design

2.- Dynamically serving (Misma URL)

3.- Diferentes URLs para mobile

SEO Mobile


Responsive Web Design

@media only screen and (max-width: 640px) {...}

Metodo recomendado por Google

Utilizar el robots.txt para indicar que parte de ficheros CSS Javascript deben ser indexados por cada crawler

El CSS media recomendado por Google

SEO Mobile


Dynamically serving (misma URL)

GET /page-1 HTTP/1.1!Host: www.example.com!(...rest of HTTP request headers...)!!HTTP/1.1 200 OK!Content-Type: text/html!Vary: User-Agent!Content-Length: 5710!(... rest of HTTP response headers...)

Utilizar la cabecera Vary:UserAgent para identificar si es un dispositivo movil o no

SEO Mobile


Diferentes URLs

<link rel="alternate" media="only screen and (max-width: 640px)" href="http://m.example.com/page-1" >

<link rel="canonical" href="http://www.example.com/page-1" >

<?xml version="1.0" encoding="UTF-8"?>!<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"! xmlns:xhtml="http://www.w3.org/1999/xhtml">!<url>!<loc>http://www.example.com/page-1/</loc>!<xhtml:link! rel="alternate"! media="only screen and (max-width: 640px)"! href="http://m.example.com/page-1" />!</url>!</urlset>

Sitemaps

SEO Mobile

APP Indexing

App Indexing

App permite insertar botones en las Serps para ofrecer la posibilidad de acceder al mismo contenido que en la web pero desde tu App, siempre que el contenido sea relevante.

<html> <head> ... <link rel="alternate" href="android-app://com.example.android/http/example.com/gizmos" /> ... </head> <body> … </body>

App Indexing

Debemos implementar código tanto en la web como en nuestra App

Código a insertar en la web:

<activity android:name="com.example.android.GizmosActivity" android:label="@string/title_gizmos" > <intent-filter android:label="@string/filter_title_viewgizmos"> <action android:name="android.intent.action.VIEW" />  <data android:scheme="http" android:host="example.com" android:pathPrefix="/gizmos" /> <category android:name="android.intent.category.DEFAULT" /> <category android:name="android.intent.category.BROWSABLE" /> </intent-filter> </activity>

App Indexing

Ejemplo de código que añadiríamos en la aplicación:

Debemos implementar código tanto en la web como en nuestra App

Microdatos

Las páginas que utilizan schema tienen mejores rankings

Fuente: http://www.searchenginejournal.com/study-webmasters-online-marketers-missing-power-schema-org/

Microdatos

#22 #25 2013

#21 #25 2014

¿Qué es Schema?

Microdatos

Producto de colaboración entre los principales buscadores para mejorar la web mediante un vocabulario común

Schema.org :: Recetas

Microdatos

Schema.org :: Eventos Microdatos

Schema.org :: Musica Microdatos (schema.org)

Schema.org :: Peliculas Microdatos (schema.org)

Schema.org :: Productos Microdatos

Pages using Schema.org markups have higher Google rankings

Microdatos

¿Cual es el objetivo?

TU CONTENIDO ES MÁS ATRACTIVO

¿Cómo se implementan los microdatos?

Microdatos

<p itemscope > Me llamo Pedro Martínez, soy el Responsable del departamento SEO de Unidad Editorial y esta es mi página web <a href="http://pedromg.com" >pedromg.com</a>. </p>

1. Determinar el ámbito del microdato

Implementando microdatos

Microdatos

<p itemscope itemtype="http://schema.org/Person">

Me llamo Pedro Martínez, soy el Responsable del departamento SEO de Unidad Editorial y esta es mi página web

<a href="http://pedromg.com" >pedromg.com</a>.

</p>


2. Especificar el tipo de elemento


Microdatos

<p itemscope itemtype="http://schema.org/Person"> Me llamo <span itemprop="name"> Pedro Martínez</span>, soy el <span itemprop="jobTitle">Responsable del departamento SEO </span> de Unidad Editorial y esta es mi página web <a href=http://pedromg.com itemprop="url">pedromg.com</a>.

</p>


2. Especificar el tipo de elemento

3. Indicar las propiedades del elemento


Microdatos

Let’s mark-‐up a Yorkshire Pudding recipe page

Microdatos – Migas de Pan

Marcado JSON-LD

Recomendado por el W3C desde el 16 de Enero del 2014

Integrado por Google tanto para sitios web como para mailing

Microdatos vs JSOn Data

JSON-LD vs Microdatos

-  Código fuente mas limpio, el marcado no se realiza en las etiquetas HTML

-  Se puede utilizar tanto para sitios web como para emailing

JSON-LD

Microdatos

- Mayor integración y documentación -  A día de hoy Google recomienda AUN microdatos

Marcado con JSON-DL

<script type="application/ld+json"> { "@context" : "http://schema.org", "@type" : "Event", "name" : "Slim Whitman Tribute", "startDate" : "2013-07-06", "location" : { "@type" : "Place", "name" : "Hollywood Bowl" } } </script>

Ejemplo:

Marcado con JSON-DL - Mailing

Snippet de video

Diferentes formas de implementación del snippet de video 1. Sitemap de video 2. Microdato de video 3. RDF’a de facebook

Snnipet de Video

https://support.google.com/webmasters/answer/80472?hl=es

•  Titulo •  Descripción •  URL de la página de reproducción, •  URL en miniatura, •  URL del reproductor (SWF) o la ubicación

del archivo de vídeo sin procesar.

Campos obligatorios

Especificaciones del sitemaps: •  50.000 entradas por sitemaps, se pueden enviar varios sitemaps •  Ficheros admitidos: mpg, .mpeg, .mp4, .m4v, .mov, .wmv, .asf, .avi, .ra, .ram, .rm, .flv, .swf •  Tu archivo robots.txt no debe bloquear ninguno de los elementos (incluidas la URL de la página de reproducción, la URL de vídeo y la URL en miniatura)

Campos recomendados

•  Duración •  Fecha de publicación

Sitemap de Video


•  Nombre •  Descripción •  Thumbnail de la imagen

Campos obligatorios

Ejemplo: <div itemprop="video" itemscope itemtype="http://schema.org/VideoObject"> <h2>Vídeo: <span itemprop="name">Título</span></h2> <meta itemprop="duration" content="T1M33S" /> <meta itemprop="thumbnailUrl" content="thumbnail.jpg" /> <meta itemprop="contentURL" content="http://www.example.com/video123.flv" /> <meta itemprop="embedURL" content="http://www.example.com/videoplayer.swf?video=123" /> <meta itemprop="uploadDate" content="2011-07-05T08:00:00+08:00" /> <meta itemprop="expires" content="2012-01-30T19:00:00+08:00" /> <object ...> <param ...> <embed type="application/x-shockwave-flash" ...> </object> <span itemprop="description">Descripción del vídeo</span> </div>

Propiedades del objeto "VideoObject" de schema.org

Campos recomendados

•  Duración •  ContenURL •  embedURL •  UploadDate

Videos - Microdatos


•  Image_src – Preview de la imagen •  Video_src – Url del video (o reproductor)

Campos obligatorios

Ejemplo: <meta name="title" content="Baroo? - cute puppies" /> <meta name="description" content="The cutest canine head tilts on the Internet!" /> <link rel="image_src" href="http://example.com/thumbnail_preview.jpg" /> <link rel="video_src" href="http://example.com/video_object.swf?id=12345"/> <meta name="video_height" content="296" /> <meta name="video_width" content="512" /> <meta name="video_type" content="aplicación/x-shockwave-flash" />

Google reconoce las propiedades de Facebook Share

Vídeos: Facebook Share y RDFa

Fuente: http://www.google.com/webmasters/tools/richsnippets

Rich Snippets Testing Tool preview

Fuente: https://www.google.com/webmasters/markup-helper/

Rich Snippets Testing Tool preview

WMT: Datos estructurados

Cuidado!

Destacar es fácil ...

... Lo difícil es hacerlo bien.

Microdatos

Gracias!!

Pedro Martínez Correo: [email protected] Twitter: @PedroMG

SEO técnico, Sin miedo al código - Congreso Web 2014

Data & Analytics

Transcript of SEO técnico, Sin miedo al código - Congreso Web 2014