El documento habla sobre optimización SEO técnica y el valor de tener en cuenta el código al optimizar un sitio web. Menciona ejemplos prácticos como la paginación con JavaScript no intrusivo y URLs propias para cada imagen de un álbum para mejorar la indexación. También cubre temas como indexación de contenido, códigos de estado HTTP, gestión de URLs, contenido duplicado, idiomas multilengüe, SEO móvil, App Indexing y microdatos.

1. SEO Técnico,
Sin miedo al código

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

3. SEO Tecnico

4. 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

5. Ejemplo
Practico

7. • 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

8. Indexación de contenido

9. Indexación de contenido

10. Indexación de contenido

11. Indexación de contenido

12. Indexación de contenido

14. #MarcaEspaña

15. Optimizando
el contenido

16. 16
Optimizando el contenido

17. COdigos de estado HTTP

18. 1xx: Respuestas informativas
2xx: Peticiones correctas
3xx: Redirecciones
4xx: Errores del cliente
5xx: Errores de servidor
Codigos de estado http

19. 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

20. 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

21. 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

22. Screaming Frog

23. 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

24. Gestion de URLs
y contenido

25. 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=mesacategory=madera
• http://www.dominio.com/mesa-madera
Contenido Duplicado

26. http://cortefiel.com/es/tienda/hombre/cazadoras/
Contenido Duplicado

27. http://cortefiel.com/es/tienda/hombre/cazadoras/?
option_value_talla=price_order=ascov_color_sku=
Contenido Duplicado

29. http://cortefiel.com/es/tienda/hombre/cazadoras/
http://cortefiel.com/es/tienda/hombre/cazadoras/?option_value_talla=price_order=ascov_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

30. ¿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”

31. Diferentes idiomas

32. 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

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

34. url!
lochttp://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!
lochttp://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

35. rel=prev y rel=nexthttp://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

36. Metas Especiales

37. Twitter Cards

38. Twitter Cards
Galerías Productos

39. 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

40. SEO Mobile

41. LO QUE ALGUNOS LLAMAN FUTURO, ES EL
PRESENTE.

42. 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

43. 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

44. 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

45. 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

46. 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!
lochttp://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

47. APP Indexing

48. 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.

49. 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:

50. 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

51. Microdatos

52. Las páginas que utilizan schema
tienen mejores rankings
Fuente:
http://www.searchenginejournal.com/study-webmasters-online-marketers-missing-power-schema-o
Microdatos
#22 #252013
#21 #252014

53. ¿Qué es Schema?
Microdatos
Producto de colaboración entre los principales buscadores
mejorar la web mediante un vocabulario común

54. Schema.org :: Recetas
Microdatos

55. Schema.org :: Eventos
Microdatos

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

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

58. Schema.org :: Productos
Microdatos

59. Pages using Schema.org markups have higher Google rankings
Microdatos

60. ¿Cual es el objetivo?

61. TU CONTENIDO
ES MÁS
ATRACTIVO

62. ¿Cómo se implementan los
microdatos?
Microdatos

63. 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

64. 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

65. p itemscope itemtype=http://schema.org/Person
Me llamo span itemprop=name Pedro Martínez/span, soy el
span itemprop=jobTitleResponsable del departamento SEO /
span de Unidad Editorial y esta es mi página web
a href=http://pedromg.com itemprop=urlpedromg.com/a.
/p
1. Determinar el ámbito del microdato
2. Especificar el tipo de elemento
3. Indicar las propiedades del elemento
Implementando microdatos
Microdatos

66. Let’s
mark-­‐up
a
Yorkshire
Pudding
recipe
page
Microdatos – Migas de Pan

67. Marcado JSON-LD
Recomendado por el W3C desde el 16 de Enero del 2014
Integrado por Google tanto para
sitios web como para mailing

68. Microdatos vs JSOn Data

69. 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

70. 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:

71. Marcado con JSON-DL - Mailing

72. Snippet de video

74. 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

75. 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

76. 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
h2Vídeo: span itemprop=nameTí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=descriptionDescripción del vídeo/span
/div
Propiedades del objeto VideoObject de schema.org
Campos recomendados
• Duración
• ContenURL
• embedURL
• UploadDate
Videos - Microdatos

77. 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

78. Fuente: http://www.google.com/webmasters/tools/richsnippets
Rich Snippets Testing Tool preview

79. Fuente: https://www.google.com/webmasters/markup-helper/
Rich Snippets Testing Tool preview

80. WMT: Datos estructurados

81. Cuidado!

82. Destacar es fácil ...
... Lo difícil es hacerlo
bien.
Microdatos

83. Gracias!!
Pedro Martínez
Correo: pedro.martinez@elmundo.es
Twitter: @PedroMG