seo técnico, sin miedo al código - congreso web 2014
Post on 24-Jun-2015
6.949 Views
Preview:
DESCRIPTION
TRANSCRIPT
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
Indexación de contenido
Indexación de contenido
Indexación de contenido
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)
Codigos de estado http
4xx: Errores del cliente
403 : Prohibido
404 : No encontrado
408 : Tiempo de espera agotado
410 : Ya no disponible
503 : Servicio no disponible
Codigos de estado http
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!
http://www.example.com/artículo-parte3.html!
http://www.example.com/artículo-parte4.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
<meta name="twitter:card" content="summary"/> <meta name="twitter:site" content="@usuariodetwitter"/> <meta name="twitter:title" content="Titulo de la página"/> <meta name="twitter:image" content="'url-imagen'"/> <meta name="twitter:description" content="Descripción de la noticia/>
Fuente: https://dev.twitter.com/docs/cards/
Twitter Cards
<meta name="twitter:card" content="product"> <meta name="twitter:site" content="@twitter"> <meta name="twitter:title" content=”Nombre del producto"> <meta name="twitter:description" content=”Descripción del producto."> <meta name="twitter:image" content="https://dominio.com/graphics/00000001/mug-new.jpg"> <meta name="twitter:data1" content="$3"> <meta name="twitter:label1" content="Price"> <meta name="twitter:data2" content="Black"> <meta name="twitter:label2" content="Color">
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
Fuente: https://developers.google.com/webmasters/smartphone-sites/details
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
Fuente: https://developers.google.com/webmasters/smartphone-sites/details
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
Fuente: https://developers.google.com/webmasters/smartphone-sites/details
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" /> <!-- Accepts URIs that begin with "http://example.com/gizmos” --> <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>
1. Determinar el ámbito del microdato
2. Especificar el tipo de elemento
Implementando microdatos
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>
1. Determinar el ámbito del microdato
2. Especificar el tipo de elemento
3. Indicar las propiedades del elemento
Implementando microdatos
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
Fuente: https://support.google.com/webmasters/answer/2413309?hl=es
• 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
Fuente: https://support.google.com/webmasters/answer/162163?hl=es
• 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: pedro.martinez@elmundo.es Twitter: @PedroMG
top related