201609 seo semántico jose roig torres

SEO SEMÁNTICO
Ayuda a tu web ayudando al buscador a
entender tu contenido
Jose Roig Torres - @joseroigtorres#mallorca_seo

Un poco sobre mí
Hola a todos!!!
Soy
Jose Roig Torres,
Especialista en SEO
y Analítica Web
Desarrollador web Especialista en SEO
SEO Manager y
Analítica web
@joseroigtorres
jose@ikaue.com
www.jsroig.com

Pero antes
de empezar,
qué es eso
de la
Semántica?
?

Pero antes
de empezar,
qué es eso
de la
Semántica?
Se conoce como semántica al estudio del
significado de los signos lingüísticos y de
sus combinaciones.

La semántica dentro del posicionamiento
1. La araña rastrea una página
2. Los servidores analizan el
significado (semántica) y
relevancia de la página, y la
clasifican en el ranking
3. La página aparece en los
resultados en función de
diversos factores, entre ellos el
significado que el buscador le
haya atribuido
Araña Página web
Servidores de
Google
Resultados de
búsqueda

Se puede considerar una de las patas del SEO

Queremos que el significado
que extraiga el buscador de una
página coincida con el tema
que queremos posicionar
@joseroigtorres

Para ello hay que facilitarle al buscador la comprensión del contenido

Vamos a ayudar al buscador
<html>
<head>
<title>
<body>
<h1><h2><h3>…
<p>
…
Código de una Página web
Insertamos la
keyword en el
contenido

<html>
<head>
<title>
<body>
<h1><h2><h3>…
<p>
…
Insertamos la
keyword en el
contenido
Pero para trabajar la
semántica basta con
insertar la kw?

<html>
<head>
<title>
<body>
<h1><h2><h3>…
<p>
…
Insertamos la
keyword en el
contenido
NO
Pero para trabajar la
semántica basta con
insertar la kw?

En realidad ni siquiera se necesita insertar la KW
0 ocurrencias de la kw exacta
0 ocurrencias de “billetes de avión”
Se resalta “vuelos baratos” cuando buscamos
“billetes de avión económicos”
Si analizamos la página resaltada:
Aunque no haya páginas que contengan la keyword, el
buscador es capaz de dar resultados útiles

El buscador ha evolucionado en su compresión de las páginas
2011 2012 2013 2014 2015 2016
Knowledge
Graph Hummingbird Rankbrain

YA NO SE TRATA SOLO DE
KEYWORDS, SINO DE
SIGNIFICADOS
@joseroigtorres

Para trabajar la semántica hay que intentar entender como el
buscador extrae el significado de una página
Buscador Persona
Batalla de comprensión
de páginas

Un buscador ve las páginas de forma distinta
Persona El buscador
Imagen Código JS
Código CSS
Código HTML

Sobre el código extrae las partes más relevantes para la semántica
HEADER
FOOTER
SIDEBAR
NAVIGATION
MAIN CONTENT
CONTENT
COMPLEMENTARY CONTENT
CÓDIGO JS
CÓDIGO CSS
CÓDIGO HTML
Navegación
secundaria (poco
relevante)
Contenido de mayor
relevancia dentro el
principal
Parte del layout
(poco relevante)
Contenido
complementario, oculto,
etc (poco relevante)
Contenido principalMeta información
sobre el contenido

Sobre el código extrae las partes más relevantes para la semántica
HEADER
FOOTER
SIDEBAR
NAVIGATION
MAIN CONTENT
CONTENT
COMPLEMENTARY CONTENT
CÓDIGO JS
CÓDIGO CSS
CÓDIGO HTML
Navegación
secundaria (poco
relevante)
Contenido de mayor
relevancia
Parte del layout
(poco relevante)
Contenido
complementario, oculto,
etc (poco relevante)
Contenido principalMeta información
sobre el contenido

El buscador extrae el texto del código y lo analiza
Texto extraído
Terminator (título original en inglés, The Terminator) es una
película estadounidense de ciencia ficción y acción de 1984,
dirigida por James Cameron, coescrita entre Cameron y William
Wisher Jr. y protagonizada por Arnold Schwarzenegger, Linda
Hamilton y Michael Biehn. El filme, rodado en Los Ángeles, fue
producido por Hemdale Film Corporation y distribuido por Orion
Pictures. Schwarzenegger interpreta al Terminator, un ciborg
asesino enviado a través del tiempo desde el año 2029 a 1984
para asesinar a Sarah Connor, interpretada por Linda Hamilton.
Biehn es Kyle Reese, un soldado también enviado desde el futuro
con la misión de proteger a Sarah. Fue filmada de marzo a mayo
de 1984 y finalmente estrenada el 20 de octubre de 1984.
Separa el texto
en términos que
pueda manejar y
analizar.

Texto extraído
Analiza aquellos
términos con
mayor presencia

Texto extraído
producido por Hemdale Film Corporation y distribuido por
Orion Pictures. Schwarzenegger interpreta al Terminator, un
ciborg asesino enviado a través del tiempo desde el año 2029 a
1984 para asesinar a Sarah Connor, interpretada por Linda
Hamilton. Biehn es Kyle Reese, un soldado también enviado
desde el futuro con la misión de proteger a Sarah. Fue filmada
de marzo a mayo de 1984 y finalmente estrenada el 20 de
octubre de 1984.
Busca términos
relacionados, tales
como sinónimos,
variaciones, palabras de
un mismo campo
semántico, etc.

Texto extraído
Busca términos
que aparezcan
cercanos de forma
repetida
(habitualmente
estos están
relacionados)

Texto extraído
Busca términos
sobre de los que
ya disponga de
información
(entidades)

Sobre las distintas entidades busca relaciones
Persona
James Cameron
Persona
Arnold Schwarzenegger
Knowledge Graph de Google
Película
Terminator
País
EEUU
Fecha
20-10-1984
Ha actuado
Ha sido dirigida por
Producida en
Estrenada en

Mediante los datos extraídos del código…
De que
habla la
página
¿ ?
Términos frecuentes y su
relación con otros términos
(sinónimos, antónimos,
variaciones, etc)
Términos que aparezcan
habitualmente cercanos
Meta información extraída del
código
Relaciones entre las entidades
extraídas del texto

Mediante los datos extraídos del código y otras fuentes…
De que
habla la
página
¿ ?
variaciones, etc)
código
Temas de páginas que la
enlazan y que son
enlazadas
Temas recurrentes o similares del
site o autor
…

Mediante los datos extraídos del código y otras fuentes se extrae el significado
De que
habla la
página
¿ ?
variaciones, etc)
código
enlazan y de páginas que
son enlazadas por ella
site o autor.
…

Mediante los datos extraídos del código y otras fuentes se extrae el significado
De que
habla la
página
¿ ?Presencia de sinónimos,
antónimos, variaciones, etc.
Términos con mayor presencia en
la página
enlazan y de páginas que
son enlazadas por ella
site o autor.
…
Todas esto permite indexar las páginas en
función de su significados y no solo de
keywords, esto es lo que conocemos como
Indexación Semántica Latente(LSI)

Vemos que el
buscador cada
vez se parece
más a nosotros
al comprender
contenidos, pese
a ello aún es
conveniente que
le ayudemos.
@joseroigtorres

UNA VEZ ENTENDEMOS UN POCO
COMO EL BUSCADOR INTERPRETA
EL CONTENIDO, PODEMOS
FACILITARLE SU TRABAJO
@joseroigtorres

Pero como ayudamos al buscador a entender una página?

Pero como ayudamos al buscador a entender una página?
Trabajando el Marcado
Semántico
Trabajando la Maquetación
Semántica
Trabajando la LSI
MrS
MqS
LSI

Vamos a
trabajar el
Marcado
Semántico
Objetivo: mediante añadidos
en el código, queremos
ayudar al buscador a
entender el contenido de la
página.
MrS

Hay que saber como usar el código para comunicarse con el buscador
MrS

Se escoge el formato de la comunicación
Hay diversas vías de
comunicarse, pero
conviene usar las más
usadas y/o
recomendadas
Formatos de
comunicación:
Microdatos
RDFa
JSON-LD
Microformatos
…
Leyenda:
Más usados
Recomendados
MrS

Luego hay que usar un vocabulario que entienda el buscador
Vocabularios de
marcado:
Schema.org
Dublin Core
Open Graph
…
Conviene usar los
vocabularios que
permitan mayores
posibilidades de marcado
y más extendidos
Formatos de
comunicación:
Microdatos
RDFa
JSON-LD
Microformatos
…
Leyenda:
Más usados
Recomendados
MrS

Supongamos que queremos hacer el marcado de una página
Buscamos un esquema adecuado
https://schema.org/Product
Queremos marcar una página de
producto
Podemos marcar:
• Tipo de datos
• Nombre
• Imagen
• Valoración
• Ofertas
• …
MrS

El marcado mediante Microdatos
<img src="dell-30in-lcd.jpg" alt="A Dell UltraSharp
monitor" />
Dell UltraSharp 30" LCD Monitor
87 out of 100 based on 24 user ratings
$1250 to $1495 from 8 sellers
Sellers:
<a href="save-a-lot-monitors.com/dell-30.html">
Save A Lot Monitors - $1250</a>
<a href="jondoe-gadgets.com/dell-30.html">
Jon Doe's Gadgets - $1350</a>
...
<div itemscope itemtype="http://schema.org/Product">
<img itemprop="image" src="dell-30in-lcd.jpg" alt="A Dell UltraSharp monitor"/>
<span itemprop="name">Dell UltraSharp 30" LCD Monitor</span>
<div itemprop="aggregateRating"
itemscope itemtype="http://schema.org/AggregateRating">
<span itemprop="ratingValue">87</span>
out of <span itemprop="bestRating">100</span>
based on <span itemprop="ratingCount">24</span> user ratings
</div>
<div itemprop="offers" itemscope itemtype="http://schema.org/AggregateOffer">
<span itemprop="lowPrice">$1250</span>
to <span itemprop="highPrice">$1495</span>
from <span itemprop="offerCount">8</span> sellers
Sellers:
<div itemprop="offers" itemscope itemtype="http://schema.org/Offer">
<a itemprop="url" href="save-a-lot-monitors.com/dell-30.html">
</div>
</div>
...
</div>
Código SIN Microdatos Código CON Microdatos
En el marcado usaremos los atributos
especiales de microdatos:
• Itemscope
• Itemtype
• Itemprop
MrS

<div vocab="http://schema.org/" typeof="Product">
<img property="image" src="dell-30in-lcd.jpg" alt="A Dell UltraSharp monitor"/>
<span property="name">Dell UltraSharp 30" LCD Monitor</span>
<div property="aggregateRating“ typeof="AggregateRating">
<span property="ratingValue">87</span>
out of <span property="bestRating">100</span>
based on <span property="ratingCount">24</span> user ratings
</div>
<div property="offers" typeof="AggregateOffer">
<span property="lowPrice">$1250</span>
to <span property="highPrice">$1495</span>
from <span property="offerCount">8</span> sellers
Sellers:
<div property="offers" typeof="Offer">
<a property="url" href="save-a-lot-monitors.com/dell-30.html">
</div>
<div property="offers" typeof="Offer">
<a property="url" href="jondoe-gadgets.com/dell-30.html">
</div>
...
</div>
El marcado mediante RDFa
monitor" />
Sellers:
...
Código SIN RDFa Código CON RDFa
En el marcado usaremos los atributos
especiales de RDFa
• vocab
• typeof
• property
MrS

El marcado semántico también te permite conseguir los Rich Snippets
Rich Snippet obtenidos con marcado
Semántico
Rich snippets que permite Google
MrS

Algunos enlaces de interés
Referencias de vocabulario y marcado
Vocabulario Schema.org
Rich Snippets que permite Google
Definición del marcado en JSON-LD
Definición del marcado con Microdatos
Herramientas de ayuda
Herramienta para practicar formato JSON-LD
Generador de marcados con Microdatos
Validadores de datos estructurados
Validador de datos estructurados de Google
Validador de datos estructurados de Bing
Validador de datos estructuras de GSC
MrS
https://schema.org/
https://developers.google.com/search/docs/data-types/data-type-selector
http://json-ld.org/learn.html
https://www.w3.org/TR/microdata/
http://json-ld.org/playground/
http://www.microdatagenerator.com/
https://search.google.com/structured-data/testing-tool?hl=es
http://www.bing.com/toolbox/markup-validator
https://www.google.com/webmasters/tools/structured-data

Vamos a
trabajar la
maquetación
semántica
Objetivo: la idea es maquetar
aportando significado a cada
parte del código, para que al
buscador pueda encontrar las
partes importantes
POCA IMPORTANCIA
POCA IMPORTANCIA
IMPORTANTE
MUY IMPORTANTE
MqS

Como destacar partes relevantes del código?
MqS

Como destacar partes relevantes del código?
MqS
Usando tags semánticos (HTML5)
Respetando los estándares en HTML
Otras formas de hacerlo

Vamos a trabajar los Tags Semánticos de HTML5
MqS
Cada uno de estos tags indican cual
es la función de su contenido.
<article>
<aside>
<details>
<figcaption>
<figure>
<footer>
<header>
<main>
<mark>
<nav>
<section>
<summary>
<time>
Si se utilizan correctamente, ayudan
al buscador a detectar el contenido
de mayor relevancia.

No todos los tags nos interesan igual
MqS
<article>
<aside>
<details>
<figcaption>
<figure>
<footer>
<header>
<main>
<mark>
<nav>
<section>
<summary>
<time>
Los tags que más nos interesan son
los que definen la estructura general

Tipo de contenido al que se orienta cada Tag
MqS
<header>: cabecera de la sección
<footer>: pie de la sección
<nav>: conjunto de enlaces de navegación
<main>: contenido principal dentro del <body>
<article>: contenido independiente dentro de la página
<aside>: contenido complementario al contenido de la sección
<section>: grupo de elementos relacionados entre ellos

Ejemplo sencillo de maquetación semántica en un post
MqS
<header>
<footer>
<main>
<aside>
<nav>
<article>
Contenido más relevante
<aside>

Ejemplo sencillo de maquetación semántica en un listado
MqS
<header>
<footer>
<main>
<aside>
<nav>
<section>
Contenido más relevante
<article>
<article>

Respetando los estándares en HTML
MqS
Si se respetan estos estándares deberían haber pocos o ningún error en el HTML
Es recomendable reducir estos errores
pues pueden complicar el análisis del
contenido al buscador

Otras formas de destacar las partes relevantes de código
MqS
<div id=“header”>
<ul class=“main-nav”>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<div id=“content”>
<ul class=“item-list”>
<li class=“item”></li>
</ul>
</div>
<div id=“footer”>
</div>
Antes de que hubiera tags
semánticos, el buscador ya miraba el
código para ver la función de cada
una de sus partes.
Clases e Ids como por ejemplo:
• Header
• Footer
• Main/content
• Nav/navigation
• etc
Manteniendo los nombres de Clases e Ids habitualmente usados en CMS

MqS
<div id=“header”>
<ul class=“main-nav”>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<div id=“content”>
</ul>
</div>
<div id=“footer”>
</div>
Antes de que hubiera tags
semánticos, el buscador ya miraba el
código para ver la función de cada
una de sus partes.
Clases e Ids como por ejemplo:
• Header
• Footer
• Main/content
• Nav/navigation
• etc
Manteniendo los nombres de Clases e Ids habitualmente usados en Frameworks
Pero esto es algo se tenia más en cuenta
en versiones anteriores a HTML5 para
detectar contenido, por lo que se
considera cada vez menos relevante

MqS
Manteniendo un código simple
<header>
<footer>
<main>
<article>
<div>
<div>
<div>
Contenido relevante
<header>
<footer>
<main>
<article>
Contenido relevante
Más complejo de analizar Menos complejo de analizar

MqS
Manteniendo un código simple
<header>
<footer>
<main>
<article>
<div>
<div>
<div>
Contenido relevante
<header>
<footer>
<main>
<article>
Contenido relevante
Más complejo de analizar Menos complejo de analizar
Pero hay páginas que necesitan muchos
tags anidados y los buscadores cada vez
tienen menos problemas con ello, por lo
que esto es cada vez es menos relevante

MqS
Usando los roles de WAI-ARIA
Roles para definir estructura:
• Article: contenido independiente.
• Banner: encabezado de página.
• Complementary: información
complementario de la información principal.
• Contentinfo: información de empresa, suele
ser el pie de página.
• Main: contenido principal.
• Navigation: menú de navegación.
<div id=“header” role=“banner”>
<ul class=“main-nav” role=“navigation”>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<div id=“content” role=“main”>
<li class=“item” role=“article”></li>
<li class=“item ” role=“article”></li>
</ul>
<div class=“social-buttons” role=“navigation”></div>
</div>
<div id=“footer” role=“contentinfo”>
</div>

MqS
Usando los roles de WAI-ARIA
Roles para definir estructura:
• Article: contenido independiente.
• Banner: encabezado de página.
• Complementary: información
complementario de la información principal.
• Contentinfo: información de empresa, suele
ser el pie de página.
• Main: contenido principal.
• Navigation: menú de navegación.
<div id=“header” role=“banner”>
<ul class=“main-nav” role=“navigation”>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<div id=“content” role=“main”>
<li class=“item ” role=“article”></li>
</ul>
<div class=“social-buttons” role=“navigation”></div>
</div>
<div id=“footer” role=“contentinfo”>
</div>
Aunque esto cada vez se usa menos en
favor de los tags semánticos de HTML5

Referencias de vocabulario y marcado
Especificación Wai-aria Roles
Especificación HTML5
Herramientas de ayuda
Validador HTML
https://www.w3.org/TR/wai-aria/roles
https://www.w3.org/html/
https://validator.w3.org/
MqS

Vamos a
trabajar la
Indexación
Semántica
Latente
Objetivo: la idea es trabajar el
texto de una página para que
al buscador le sea más sencillo
entenderlo
LSI

Pero antes de trabajar el significado de una página…
LSI
Hay que tener claro que
por página se trabajará
un único tema.

Pero antes de trabajar el significado de una página…
LSI
Recordar que no se trata de una
simple repetición de una keyword,
sino de reforzar un tema mediante la
inclusión de términos relacionados
semánticamente

Como trabajaremos la Indexación Semántica Latente?
LSI
Buscamos vocabulario relacionado con la temática
Buscamos entidades relacionadas con el tema
Buscamos términos con relación semántica
Trabajamos los términos más relevantes
1
2
3
4

Lo primero es tener claro el tema que vamos a tratar
LSI
El tema que
trabajaremos es:
El personaje de
“Sarah Connor
en Terminator 2”

Buscamos vocabulario relacionado con la temática
LSI
Para ello podemos usar la herramienta de palabras clave de Adwords
… …
Buscamos terminator 2 Buscamos Sarah Conor
Términos
habitualmente
relacionados:
Terminator 2
Película
Juicio final
T1000
Arnold
Año de estreno
…
Términos
habitualmente
relacionados:
Sarah Connor
Terminator 2
Terminator 1
John connor
Actriz
Kyle Reese
…

Buscamos entidades y relaciones que refuercen la semántica
LSI
Para ello podemos usar
http://www.visualdataweb.org/relfinder/relfinder.php
Esta herramienta funciona sobre distintas bases de datos
semánticas (dbpedia por ejemplo).
La idea es extraer de ella distintas entidades y relaciones, las
cuales también podría disponer Google, y usarlas para reforzar
la semántica del texto.

Buscamos entidades y relaciones que refuercen la semántica
LSI
En este caso hemos buscado relaciones entre
“Sarah connor” y “terminator 2”,
pero podríamos haber intentado buscar por
cualquiera de los términos obtenidos con la
herramienta de palabras clave

LSI
Sinónimos Antónimos
Familias de términos
relacionadas
Plurales
Femenino/masculino …

LSI
Sinónimos Antónimos
Familias de términos
relacionadas
Plurales
Femenino/masculino …
Nos interesan
especialmente obtener
estos términos para
los que tengan mayor
relevancia

LSI
Terminator 2:
Terminator el juicio final
Segunda parte de
Terminator
Secuela de Terminator 1
…
Sarah Connor:
Sarah Jeanette Connor
Sarah
…
Famílias de términos
relacionadas:
Actores de Terminator 2
Premios obtenidos
Modelos de terminators
…

Trabajamos los términos con mayor relevancia
LSI
Sarah Connors
Terminator 2 el juicio final
John Connor
Linda Hamilton
Para potenciar el tema
principal, los términos
con mayor relevancia
deberían aparecer con
mayor frecuencia y
cercanos entre si.
Tema: Sarah Connor en Terminator 2

Trabajamos los términos con mayor relevancia
LSI
Sarah Connors
Terminator 2 el juicio final
John Connor
Linda Hamilton
Para potenciar el tema
principal, los términos
con mayor relevancia
deberían aparecer con
mayor frecuencia y
cercanos entre si.
Tema: Sarah Connor en Terminator 2
Hay que recordar usar sinónimos y
variaciones de los términos principales para
no caer en problemas por
sobreoptimización

Es importante también no perder el norte…
LSI
No hay que convertir el
texto en un sinsentido de
términos semánticamente
relacionados, el texto debe
ser útil y dar respuesta a las
búsquedas de los usuarios

Bases de datos semánticas
Knowledge Graph Google
DBpedia
Herramientas para extraer entidades
Relfinder
Gfacet
Búsqueda de términos relacionados
Keyword Planner Adwords
Über Suggest
https://www.google.es/intl/es/insidesearch/features/search/knowledge.html
http://wiki.dbpedia.org/
http://www.visualdataweb.org/relfinder/relfinder.php
http://www.visualdataweb.org/gfacet/gfacet.php
https://adwords.google.com/KeywordPlanner
https://ubersuggest.io/
LSI

Solo unos comentarios más
La semántica ya no va solo de Keywords, sino de significados
El buscador cada vez entiende mejor el contenido, pero sigue
siendo conveniente ayudarle
El significado en una página no solo se trabaja en el texto,
también en el propio código
@joseroigtorres

¿Preguntas?
Hablad ahora o
callad para siempre

MUCHAS GRACIAS
@joseroigtorres jose@ikaue.com www.jsroig.com

201609 seo semántico jose roig torres

Recommended

Recommended

More Related Content

Recently uploaded

Recently uploaded (7)

Featured

Featured (20)

201609 seo semántico jose roig torres