TALLER #CW17 #HTML5SEO
HTML 5 PARA SEO
by | #CW17 #HTML5SEO
"I've seen the FUTURE. It's in my
BROWSER"
jjpeleato.com
1 . 1
¡GRACIAS Y BIENVENID@S!
Mi nombre es José Javier Peleato Pradel
Actualmente trabajo como desarrollador FullStack
WordPress...
¿QUÉ ES HTML?
by | #CW17 #HTML5SEOjjpeleato.com
2 . 1
LENGUAJE DE MARCAS
Un lenguaje de marcado o lenguaje de marcas es un
método de codificar un documento, que junto al
texto,...
Los lenguajes de marcas NO son lenguajes de
programación.
No tienen funciones aritméticas o variables, como si
poseen los ...
Los lenguajes de marcas se llaman así por la práctica
tradicional de marcar los manuscritos con
instrucciones de impresión...
Existen tres tipos de marcado:
Marcado de presentación:
Aquel que indica el formato del texto. Útil para maquetar la prese...
WORLD WIDE WEB (WWW)
World Wide Web (WWW) o red informática mundial es
un sistema de distribución de documentos de
hiperte...
La WWW se desarrolló en Ginebra en las instalaciones
del CERN (Organización Europea para la Investigación
Nuclear) entre m...
Es importante saber que web o www no son sinónimo
de Internet, la web es un subconjunto de Internet que
consiste en página...
TIM BERNERS-LEE
Conocido como el padre de la Web es un científico de
la computación que estableció la primera
comunicación...
Él y su grupo crearon lo que por sus siglas en inglés se
denomina Lenguaje HTML (HyperText Markup
Language), el protocolo ...
En 1989, el CERN era el nodo de Internet más grande
de Europa y Berners-Lee vio la oportunidad de unir
Internet e hipertex...
La primera página web de Internet fue creada por Tim
Berners-Lee en 1991 alojada en el primer servidor web
del mundo: NeXT...
WORLD WIDE WEB CONSORTIUM (W3C)
World Wide Web Consortium (W3C), es un consorcio
internacional que generan y definen
recom...
ESTÁNDARES PUBLICADOS POR EL W3C
CSS DOM HTML XHTML
XML SOAP SVG ...
by | #CW17 #HTML5SEOjjpeleato.com
2 . 14
HTML
HTML, es un estándar que significa Lenguaje de
Marcado para Hipertextos (HyperText Markup
Language) es el elemento de...
HTML determina el contenido de la página web, pero
no su funcionalidad.
Otras tecnologías distintas de HTML son usadas
gen...
HTML usa "markup" o marcado para anotar textos,
imágenes, y otros contenidos que se muestran en el
navegador Web.
El lengu...
HiperText se refiere a enlaces que conectan una
página Web con otra, ya sea dentro de una página
web o entre diferentes si...
by | #CW17 #HTML5SEO
<!DOCTYPE html>
<html lang="es-ES">
<head>
<meta charset="utf-8">
<title>HTML< /title>
</head>
<body>...
XHTML
XHTML (eXtensible HyperText Markup Language) es a
XML como HTML es a SGML. Es decir, XHTML es un
lenguaje de marcado...
by | #CW17 #HTML5SEO
<?xml version="1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"https://www.w3.org/TR...
by | #CW17 #HTML5SEOjjpeleato.com
3 . 1
HTML 5
HTML5 es la última versión de HTML. Quinta revisión
del lenguaje básico de WWW donde establece una
serie de element...
Diseñado para ser utilizable por todos los
desarrolladores de Open Web, los recursos sobre las
tecnologías se clasifican e...
Semántica: Permite describir con mayor precisión
cuál es su contenido.
Conectividad: Permite comunicarse con el servidor
d...
Sin conexión y almacenamiento: Permite a las
páginas web almacenar datos localmente en el lado
del cliente y operar sin co...
Gráficos y efectos 2D/3D: Proporciona una amplia
gama de nuevas características que se ocupan de
los gráficos en la web co...
Acceso al dispositivo: Proporciona APIs para el uso
de varios componentes internos de entrada y salida
de nuestro disposit...
RECURSOS
by | #CW17 #HTML5SEO
https://www.w3.org/html/
https://www.w3.org/TR/html5/
https://www.w3.org/html/logo/
jjpeleat...
APRENDER
by | #CW17 #HTML5SEO
https://www.w3schools.com/html/
https://developer.mozilla.org/es
jjpeleato.com
3 . 9
ELEMENTOS
HTML5
by | #CW17 #HTML5SEOjjpeleato.com
4 . 1
ELEMENTO RAÍZ
Elemento Descripción
Define que el documento está bajo el estándar de HTML 5.
Representa la raíz de un docum...
METADATOS DEL DOCUMENTO
Elemento Descripción
Representa una colección de metadatos acerca del documento,
incluyendo enlace...
Elemento Descripción
Define la URL base para las URLs relativas en la página.
<base href="http://www.example.com/">
Usada ...
Elemento Descripción
Define los metadatos que no pueden ser definidos usando otro
elemento HTML.
Etiqueta de estilo usada ...
SCRIPTING
Elemento Descripción
Define ya sea un script interno o un enlace hacia un script
externo. El lenguaje de program...
SECCIONES
Elemento Descripción
Representa el contenido principal de un documento HTML. Solo
hay un elemento <body> en un d...
Elemento Descripción
Define el pie de una página o sección. Usualmente contiene un
mensaje de derechos de autoría, algunos...
Elemento Descripción
Define una sección en un documento.
Define contenido autónomo que podría existir
independientemente d...
Elemento Descripción
Define algunos contenidos vagamente relacionados con el resto
del contenido de la página. Si es remov...
Elemento Descripción
Define una sección que contiene información de contacto.
Define el contenido principal o importante e...
SEMÁNTICA A NIVEL DE TEXTO
Elemento Descripción
Representa un valor de fecha y hora; el equivalente legible por
máquina pu...
CONTENIDO INCRUSTADO
Elemento Descripción
Representa un video y sus archivos de audio con la interfaz
necesaria para repro...
Elemento Descripción
Permite a autores especificar recursos multimedia alternativos
para los elementos multimedia como <vi...
Elemento Descripción
Representa un área de mapa de bits en el que se pueden utilizar
scripts para renderizar gráficos como...
FORMULARIOS
Elemento Descripción
Representa un conjunto de opciones predefinidas para otros
controles.
Genera claves asimé...
Elemento Descripción
Representa el resultado de un cálculo.
Representa el progreso de finalización de una tarea.
by | #CW1...
CASO PRÁCTICO
by | #CW17 #HTML5SEO
Ejemplos
jjpeleato.com
5 . 1
VALIDADORES
by | #CW17 #HTML5SEOjjpeleato.com
6 . 1
Estándar HTML 5:
SEO on Page:
(WordPress)
WPO:
by | #CW17 #HTML5SEO
http://validator.w3.org/
https://metricspot.com/
https...
¡FELIZ CONGRESO!
by | #CW17 #HTML5SEO
Simplemente, GRACIAS A TOD@S
jjpeleato.com
7
Próxima SlideShare
Cargando en…5
×

HTML 5 para SEO

47 visualizaciones

Publicado el

HTML5 es la última versión de HTML. Quinta revisión del lenguaje básico de WWW donde establece una serie de elementos y atributos que reflejan el uso típico de los sitios web modernos.

Con este tutorial podrás aprender sobre como estructurar correctamente HTML 5 y todo el potencial que ofrece en el planteamiento de un correcto código y la estandarización W3C.

Publicado en: Internet
  • Sé el primero en comentar

  • Sé el primero en recomendar esto

HTML 5 para SEO

  1. 1. TALLER #CW17 #HTML5SEO HTML 5 PARA SEO by | #CW17 #HTML5SEO "I've seen the FUTURE. It's in my BROWSER" jjpeleato.com 1 . 1
  2. 2. ¡GRACIAS Y BIENVENID@S! Mi nombre es José Javier Peleato Pradel Actualmente trabajo como desarrollador FullStack WordPress y colaboro en la organización de la comunidad WordPress Zaragoza by | #CW17 #HTML5SEO "Si buscas resultados distintos, no hagas siempre lo mismo", Albert Einstein jjpeleato.com 1 . 2
  3. 3. ¿QUÉ ES HTML? by | #CW17 #HTML5SEOjjpeleato.com 2 . 1
  4. 4. LENGUAJE DE MARCAS Un lenguaje de marcado o lenguaje de marcas es un método de codificar un documento, que junto al texto, incorpora etiquetas o marcas que contienen información adicional acerca de la estructura del texto o su presentación. by | #CW17 #HTML5SEOjjpeleato.com 2 . 2
  5. 5. Los lenguajes de marcas NO son lenguajes de programación. No tienen funciones aritméticas o variables, como si poseen los lenguajes de programación. by | #CW17 #HTML5SEOjjpeleato.com 2 . 3
  6. 6. Los lenguajes de marcas se llaman así por la práctica tradicional de marcar los manuscritos con instrucciones de impresión en los márgenes. En la época de la imprenta, esta tarea ha correspondido a los marcadores, que indicaban el tipo de letra, el estilo y el tamaño, así como la corrección de errores, para que otras personas compusieran la tipografía. by | #CW17 #HTML5SEOjjpeleato.com 2 . 4
  7. 7. Existen tres tipos de marcado: Marcado de presentación: Aquel que indica el formato del texto. Útil para maquetar la presentación de un documento para solo lectura. En desuso. Marcado de procedimientos: Aquel que está enfocado hacia la re/presentación del texto. El programa que representa el documento debe interpretar el código en el mismo orden en el que aparece. Ejemplos: TeX, HTML, etc. Marcado descriptivo: Utiliza etiquetas para describir los fragmentos de texto, pero sin especificar como deben ser representados, o en qué orden. Ejemplo: XML, etc. by | #CW17 #HTML5SEOjjpeleato.com 2 . 5
  8. 8. WORLD WIDE WEB (WWW) World Wide Web (WWW) o red informática mundial es un sistema de distribución de documentos de hipertexto o hipermedios interconectados vía internet. by | #CW17 #HTML5SEOjjpeleato.com 2 . 6
  9. 9. La WWW se desarrolló en Ginebra en las instalaciones del CERN (Organización Europea para la Investigación Nuclear) entre marzo de 1989 y diciembre de 1990 por el inglés Tim Berners-Lee y el belga Robert Cailliau. by | #CW17 #HTML5SEOjjpeleato.com 2 . 7
  10. 10. Es importante saber que web o www no son sinónimo de Internet, la web es un subconjunto de Internet que consiste en páginas a las que se puede acceder usando un navegador. Internet es la red de redes donde reside toda la información. Tanto el correo electrónico, como FTPs, juegos, etc. son parte de Internet, pero no de la Web. by | #CW17 #HTML5SEOjjpeleato.com 2 . 8
  11. 11. TIM BERNERS-LEE Conocido como el padre de la Web es un científico de la computación que estableció la primera comunicación entre un cliente y un servidor usando el protocolo HTTP en noviembre de 1989. by | #CW17 #HTML5SEOjjpeleato.com 2 . 9
  12. 12. Él y su grupo crearon lo que por sus siglas en inglés se denomina Lenguaje HTML (HyperText Markup Language), el protocolo HTTP (HyperText Transfer Protocol) y el sistema de localización de objetos en la web URL (Uniform Resource Locator). by | #CW17 #HTML5SEOjjpeleato.com 2 . 10
  13. 13. En 1989, el CERN era el nodo de Internet más grande de Europa y Berners-Lee vio la oportunidad de unir Internet e hipertexto (HTTP y HTML), de lo que surgiría la World Wide Web. by | #CW17 #HTML5SEOjjpeleato.com 2 . 11
  14. 14. La primera página web de Internet fue creada por Tim Berners-Lee en 1991 alojada en el primer servidor web del mundo: NeXT Computer que se encontraba en el CERN y fue puesto en línea el 6 de agosto de 1991. En octubre de 1994 Tim Berners-Lee fundo el consorcio World Wide Web (W3C). Actualmente sigue siendo el presidente y director. by | #CW17 #HTML5SEOjjpeleato.com 2 . 12
  15. 15. WORLD WIDE WEB CONSORTIUM (W3C) World Wide Web Consortium (W3C), es un consorcio internacional que generan y definen recomendaciones y estándares que aseguran el crecimiento de la World Wide Web. by | #CW17 #HTML5SEO https://www.w3.org/ http://www.w3c.es/ jjpeleato.com 2 . 13
  16. 16. ESTÁNDARES PUBLICADOS POR EL W3C CSS DOM HTML XHTML XML SOAP SVG ... by | #CW17 #HTML5SEOjjpeleato.com 2 . 14
  17. 17. HTML HTML, es un estándar que significa Lenguaje de Marcado para Hipertextos (HyperText Markup Language) es el elemento de construcción más básico de una página web y se usa para crear y representar visualmente una sitio web. HTML es una ampliación/extensión de SGML (Standard Generalized Markup Language), un estándar para la definición de lenguajes de marcas. by | #CW17 #HTML5SEOjjpeleato.com 2 . 15
  18. 18. HTML determina el contenido de la página web, pero no su funcionalidad. Otras tecnologías distintas de HTML son usadas generalmente para describir la apariencia/presentación de una página web (CSS) o su funcionalidad (JavaScript). by | #CW17 #HTML5SEOjjpeleato.com 2 . 16
  19. 19. HTML usa "markup" o marcado para anotar textos, imágenes, y otros contenidos que se muestran en el navegador Web. El lenguaje de marcas HTML incluye "elementos/etiquetas" especiales tales como head, title, body, header, article, section, p, div, span, img, y muchos más. by | #CW17 #HTML5SEOjjpeleato.com 2 . 17
  20. 20. HiperText se refiere a enlaces que conectan una página Web con otra, ya sea dentro de una página web o entre diferentes sitios web. Los hipervínculos son un aspecto fundamental de la Web. Al subir contenido a Internet y vincularlo a páginas de otras personas, te haces participante activo de esta red mundial. by | #CW17 #HTML5SEOjjpeleato.com 2 . 18
  21. 21. by | #CW17 #HTML5SEO <!DOCTYPE html> <html lang="es-ES"> <head> <meta charset="utf-8"> <title>HTML< /title> </head> <body> <!-- Content --> </body> </html> jjpeleato.com 2 . 19
  22. 22. XHTML XHTML (eXtensible HyperText Markup Language) es a XML como HTML es a SGML. Es decir, XHTML es un lenguaje de marcado que es similar al HTML, pero con una sintaxis más estricta y expresada como XML. by | #CW17 #HTML5SEO http://librosweb.es/libro/xhtml/ jjpeleato.com 2 . 20
  23. 23. by | #CW17 #HTML5SEO <?xml version="1.0"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="https://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>XHTML< /title> </head> <body> <!-- Content --> </body> </html> jjpeleato.com 2 . 21
  24. 24. by | #CW17 #HTML5SEOjjpeleato.com 3 . 1
  25. 25. HTML 5 HTML5 es la última versión de HTML. Quinta revisión del lenguaje básico de WWW donde establece una serie de elementos y atributos que reflejan el uso típico de los sitios web modernos. by | #CW17 #HTML5SEOjjpeleato.com 3 . 2
  26. 26. Diseñado para ser utilizable por todos los desarrolladores de Open Web, los recursos sobre las tecnologías se clasifican en varios grupos según su función: by | #CW17 #HTML5SEOjjpeleato.com 3 . 3
  27. 27. Semántica: Permite describir con mayor precisión cuál es su contenido. Conectividad: Permite comunicarse con el servidor de formas nuevas e innovadoras. by | #CW17 #HTML5SEOjjpeleato.com 3 . 4
  28. 28. Sin conexión y almacenamiento: Permite a las páginas web almacenar datos localmente en el lado del cliente y operar sin conexión de manera más eficiente. Multimedia: Nos otorga un excelente soporte para utilizar contenido multimedia como lo son audio y video nativamente. by | #CW17 #HTML5SEOjjpeleato.com 3 . 5
  29. 29. Gráficos y efectos 2D/3D: Proporciona una amplia gama de nuevas características que se ocupan de los gráficos en la web como lo son canvas 2D, WebGL, SVG, etc. Rendimiento e Integración: Proporciona una mayor optimización de la velocidad y un mejor uso del hardware. by | #CW17 #HTML5SEOjjpeleato.com 3 . 6
  30. 30. Acceso al dispositivo: Proporciona APIs para el uso de varios componentes internos de entrada y salida de nuestro dispositivo. CSS3: Nos ofrece una nueva gran variedad de opciones para hacer diseños más sofisticados. by | #CW17 #HTML5SEOjjpeleato.com 3 . 7
  31. 31. RECURSOS by | #CW17 #HTML5SEO https://www.w3.org/html/ https://www.w3.org/TR/html5/ https://www.w3.org/html/logo/ jjpeleato.com 3 . 8
  32. 32. APRENDER by | #CW17 #HTML5SEO https://www.w3schools.com/html/ https://developer.mozilla.org/es jjpeleato.com 3 . 9
  33. 33. ELEMENTOS HTML5 by | #CW17 #HTML5SEOjjpeleato.com 4 . 1
  34. 34. ELEMENTO RAÍZ Elemento Descripción Define que el documento está bajo el estándar de HTML 5. Representa la raíz de un documento HTML o XHTML. Todos los demás elementos deben ser descendientes de este elemento. by | #CW17 #HTML5SEO <!doctype html> <html> jjpeleato.com 4 . 2
  35. 35. METADATOS DEL DOCUMENTO Elemento Descripción Representa una colección de metadatos acerca del documento, incluyendo enlaces a, o definiciones de, scripts y hojas de estilo. Define el título del documento, el cual se muestra en la barra de título del navegador o en las pestañas de página. Solamente puede contener texto y cualquier otra etiqueta contenida no será interpretada. by | #CW17 #HTML5SEO <head> <title> jjpeleato.com 4 . 3
  36. 36. Elemento Descripción Define la URL base para las URLs relativas en la página. <base href="http://www.example.com/"> Usada para enlazar JavaScript y CSS externos con el documento HTML actual. by | #CW17 #HTML5SEO <base> <link> jjpeleato.com 4 . 4
  37. 37. Elemento Descripción Define los metadatos que no pueden ser definidos usando otro elemento HTML. Etiqueta de estilo usada para escribir CSS en línea. by | #CW17 #HTML5SEO <meta> <style> jjpeleato.com 4 . 5
  38. 38. SCRIPTING Elemento Descripción Define ya sea un script interno o un enlace hacia un script externo. El lenguaje de programación es JavaScript Define un contenido alternativo a mostrar cuando el navegador no soporta scripting. by | #CW17 #HTML5SEO <script> <noscript> jjpeleato.com 4 . 6
  39. 39. SECCIONES Elemento Descripción Representa el contenido principal de un documento HTML. Solo hay un elemento <body> en un documento. Representa un contenedor genérico sin ningún significado especial. Define la cabecera de una página o sección. Usualmente contiene un logotipo, el título del sitio Web y una tabla de navegación de contenidos. by | #CW17 #HTML5SEO <body> <div> <header> jjpeleato.com 4 . 7
  40. 40. Elemento Descripción Define el pie de una página o sección. Usualmente contiene un mensaje de derechos de autoría, algunos enlaces a información legal o direcciones para dar información de retroalimentación. Define una sección que solamente contiene enlaces de navegación by | #CW17 #HTML5SEO <footer> <nav> jjpeleato.com 4 . 8
  41. 41. Elemento Descripción Define una sección en un documento. Define contenido autónomo que podría existir independientemente del resto del contenido. by | #CW17 #HTML5SEO <section> <article> jjpeleato.com 4 . 9
  42. 42. Elemento Descripción Define algunos contenidos vagamente relacionados con el resto del contenido de la página. Si es removido, el contenido restante seguirá teniendo sentido Los elemento de cabecera implementan seis niveles de cabeceras de documentos; <h1> es la de mayor y <h6> es la de menor importancia. Un elemento de cabecera describe brevemente el tema de la sección que introduce. by | #CW17 #HTML5SEO <aside> <h1> - <h6> jjpeleato.com 4 . 10
  43. 43. Elemento Descripción Define una sección que contiene información de contacto. Define el contenido principal o importante en el documento. Solamente existe un elemento <main> en el documento. by | #CW17 #HTML5SEO <address> <main> jjpeleato.com 4 . 11
  44. 44. SEMÁNTICA A NIVEL DE TEXTO Elemento Descripción Representa un valor de fecha y hora; el equivalente legible por máquina puede ser representado en el atributo datetime. by | #CW17 #HTML5SEO <time> jjpeleato.com 4 . 12
  45. 45. CONTENIDO INCRUSTADO Elemento Descripción Representa un video y sus archivos de audio con la interfaz necesaria para reproducirlos. Representa un sonido o stream de audio. by | #CW17 #HTML5SEO <video> <audio> jjpeleato.com 4 . 13
  46. 46. Elemento Descripción Permite a autores especificar recursos multimedia alternativos para los elementos multimedia como <video> o <audio>. Representa un punto de integración para una aplicación o contenido interactivo externo que por lo general no es HTML. by | #CW17 #HTML5SEO <source> <embed> jjpeleato.com 4 . 14
  47. 47. Elemento Descripción Representa un área de mapa de bits en el que se pueden utilizar scripts para renderizar gráficos como gráficas, gráficas de juegos o cualquier imagen visual al vuelo. Define una imagen vectorial embebida. Define una fórmula matemática. by | #CW17 #HTML5SEO <canvas> <svg> <math> jjpeleato.com 4 . 15
  48. 48. FORMULARIOS Elemento Descripción Representa un conjunto de opciones predefinidas para otros controles. Genera claves asimétricas utilizando varios algoritmos. Dos de los algoritmos predeterminados son: RSA y DSA by | #CW17 #HTML5SEO <datalist> <keygen> jjpeleato.com 4 . 16
  49. 49. Elemento Descripción Representa el resultado de un cálculo. Representa el progreso de finalización de una tarea. by | #CW17 #HTML5SEO <output> <progress> jjpeleato.com 4 . 17
  50. 50. CASO PRÁCTICO by | #CW17 #HTML5SEO Ejemplos jjpeleato.com 5 . 1
  51. 51. VALIDADORES by | #CW17 #HTML5SEOjjpeleato.com 6 . 1
  52. 52. Estándar HTML 5: SEO on Page: (WordPress) WPO: by | #CW17 #HTML5SEO http://validator.w3.org/ https://metricspot.com/ https://www.wpdoctor.es/ Pagespeed Insights Pingdom Tools GTmetrix jjpeleato.com 6 . 2
  53. 53. ¡FELIZ CONGRESO! by | #CW17 #HTML5SEO Simplemente, GRACIAS A TOD@S jjpeleato.com 7

×