201609 seo semántico jose roig torres

SEO SEMÁNTICOAyuda 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 SEOSEO Manager y

Analítica web

@joseroigtorres

[email protected]

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

contenidoNO

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ódigoRelaciones 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

Relaciones entre las entidades


…

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 buscadorMrS

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 GoogleMrS

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

https://schema.org/

https://developers.google.com/search/docs/data-types/data-type-selector




https://search.google.com/structured-data/testing-tool?hl=es

http://www.bing.com/toolbox/markup-validator

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 HTML5MqS

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 igualMqS

<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 TagMqS

<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 postMqS

<header>

<footer>

<main>

<aside>

<nav>

<article>

Contenido más relevante

<aside>

Ejemplo sencillo de maquetación semántica en un listadoMqS

<header>

<footer>

<main>

<aside>

<nav>

<section>

Contenido más relevante

<article>

<article>

Respetando los estándares en HTMLMqS

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ódigoMqS

<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


<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


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


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


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>


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

https://www.w3.org/TR/wai-aria/roles

https://www.w3.org/html/

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 tratarLSI

El tema que

trabajaremos es:

El personaje de

“Sarah Connor

en Terminator 2”

Buscamos vocabulario relacionado con la temáticaLSI

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ánticaLSI

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ánticaLSI

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

Buscamos términos con relación semánticaLSI

Sinónimos Antónimos

Familias de términos

relacionadas

Plurales

Femenino/masculino …


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


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 relevanciaLSI

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 relevanciaLSI

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/gfacet/gfacet.php

https://adwords.google.com/KeywordPlanner

https://ubersuggest.io/

LSI

https://www.google.es/intl/es/insidesearch/features/search/knowledge.html

http://wiki.dbpedia.org/


http://www.visualdataweb.org/gfacet/gfacet.php

Tranquilos, ya termina

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 [email protected] www.jsroig.com

201609 seo semántico jose roig torres

Marketing