HTML 5 para SEO
-
Upload
jose-javier-peleato-pradel -
Category
Internet
-
view
103 -
download
1
Transcript of HTML 5 para SEO
![Page 1: HTML 5 para SEO](https://reader031.fdocuments.us/reader031/viewer/2022022415/5a64882c7f8b9a52568b4a1f/html5/thumbnails/1.jpg)
TALLER #CW17 #HTML5SEO
HTML 5 PARA SEO
by | #CW17 #HTML5SEO
"I've seen the FUTURE. It's in myBROWSER"
jjpeleato.com
1 . 1
![Page 2: HTML 5 para SEO](https://reader031.fdocuments.us/reader031/viewer/2022022415/5a64882c7f8b9a52568b4a1f/html5/thumbnails/2.jpg)
¡GRACIAS Y BIENVENID@S!
Mi nombre es José Javier Peleato Pradel
Actualmente trabajo como desarrollador FullStackWordPress y colaboro en la organización de la
comunidad WordPress Zaragoza
by | #CW17 #HTML5SEO
"Si buscas resultados distintos, nohagas siempre lo mismo", Albert
Einsteinjjpeleato.com
1 . 2
![Page 4: HTML 5 para SEO](https://reader031.fdocuments.us/reader031/viewer/2022022415/5a64882c7f8b9a52568b4a1f/html5/thumbnails/4.jpg)
LENGUAJE DE MARCASUn lenguaje de marcado o lenguaje de marcas es un
método de codificar un documento, que junto altexto, incorpora etiquetas o marcas que contienen
información adicional acerca de la estructura del textoo su presentación.
by | #CW17 #HTML5SEOjjpeleato.com
2 . 2
![Page 5: HTML 5 para SEO](https://reader031.fdocuments.us/reader031/viewer/2022022415/5a64882c7f8b9a52568b4a1f/html5/thumbnails/5.jpg)
Los lenguajes de marcas NO son lenguajes deprogramación.
No tienen funciones aritméticas o variables, como siposeen los lenguajes de programación.
by | #CW17 #HTML5SEOjjpeleato.com
2 . 3
![Page 6: HTML 5 para SEO](https://reader031.fdocuments.us/reader031/viewer/2022022415/5a64882c7f8b9a52568b4a1f/html5/thumbnails/6.jpg)
Los lenguajes de marcas se llaman así por la prácticatradicional de marcar los manuscritos con
instrucciones de impresión en los márgenes.
En la época de la imprenta, esta tarea hacorrespondido a los marcadores, que indicaban el tipo
de letra, el estilo y el tamaño, así como la correcciónde errores, para que otras personas compusieran la
tipografía.by | #CW17 #HTML5SEOjjpeleato.com
2 . 4
![Page 7: HTML 5 para SEO](https://reader031.fdocuments.us/reader031/viewer/2022022415/5a64882c7f8b9a52568b4a1f/html5/thumbnails/7.jpg)
Existen tres tipos de marcado:
Marcado de presentación: Aquel que indica el formato del texto. Útil para maquetar la presentación de undocumento para solo lectura. En desuso.
Marcado de procedimientos: Aquel que está enfocado hacia la re/presentación del texto. El programa que representael 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 comodeben ser representados, o en qué orden. Ejemplo: XML, etc.
by | #CW17 #HTML5SEOjjpeleato.com
2 . 5
![Page 8: HTML 5 para SEO](https://reader031.fdocuments.us/reader031/viewer/2022022415/5a64882c7f8b9a52568b4a1f/html5/thumbnails/8.jpg)
WORLD WIDE WEB (WWW)World Wide Web (WWW) o red informática mundial es
un sistema de distribución de documentos dehipertexto o hipermedios interconectados vía
internet.by | #CW17 #HTML5SEOjjpeleato.com
2 . 6
![Page 9: HTML 5 para SEO](https://reader031.fdocuments.us/reader031/viewer/2022022415/5a64882c7f8b9a52568b4a1f/html5/thumbnails/9.jpg)
La WWW se desarrolló en Ginebra en las instalacionesdel CERN (Organización Europea para la Investigación
Nuclear) entre marzo de 1989 y diciembre de 1990 porel inglés Tim Berners-Lee y el belga Robert Cailliau.
by | #CW17 #HTML5SEOjjpeleato.com
2 . 7
![Page 10: HTML 5 para SEO](https://reader031.fdocuments.us/reader031/viewer/2022022415/5a64882c7f8b9a52568b4a1f/html5/thumbnails/10.jpg)
Es importante saber que web o www no son sinónimode Internet, la web es un subconjunto de Internet que
consiste en páginas a las que se puede acceder usandoun navegador.
Internet es la red de redes donde reside toda lainformació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
![Page 11: HTML 5 para SEO](https://reader031.fdocuments.us/reader031/viewer/2022022415/5a64882c7f8b9a52568b4a1f/html5/thumbnails/11.jpg)
TIM BERNERS-LEEConocido como el padre de la Web es un científico de
la computación que estableció la primeracomunicación entre un cliente y un servidor usando
el protocolo HTTP en noviembre de 1989.by | #CW17 #HTML5SEOjjpeleato.com
2 . 9
![Page 12: HTML 5 para SEO](https://reader031.fdocuments.us/reader031/viewer/2022022415/5a64882c7f8b9a52568b4a1f/html5/thumbnails/12.jpg)
Él y su grupo crearon lo que por sus siglas en inglés sedenomina Lenguaje HTML (HyperText Markup
Language), el protocolo HTTP (HyperText TransferProtocol) y el sistema de localización de objetos en la
web URL (Uniform Resource Locator).by | #CW17 #HTML5SEOjjpeleato.com
2 . 10
![Page 13: HTML 5 para SEO](https://reader031.fdocuments.us/reader031/viewer/2022022415/5a64882c7f8b9a52568b4a1f/html5/thumbnails/13.jpg)
En 1989, el CERN era el nodo de Internet más grandede Europa y Berners-Lee vio la oportunidad de unir
Internet e hipertexto (HTTP y HTML), de lo que surgiríala World Wide Web.
by | #CW17 #HTML5SEOjjpeleato.com
2 . 11
![Page 14: HTML 5 para SEO](https://reader031.fdocuments.us/reader031/viewer/2022022415/5a64882c7f8b9a52568b4a1f/html5/thumbnails/14.jpg)
La primera página web de Internet fue creada por TimBerners-Lee en 1991 alojada en el primer servidor webdel 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 elconsorcio World Wide Web (W3C). Actualmente sigue
siendo el presidente y director.by | #CW17 #HTML5SEOjjpeleato.com
2 . 12
![Page 15: HTML 5 para SEO](https://reader031.fdocuments.us/reader031/viewer/2022022415/5a64882c7f8b9a52568b4a1f/html5/thumbnails/15.jpg)
WORLD WIDE WEB CONSORTIUM (W3C)World Wide Web Consortium (W3C), es un consorcio
internacional que generan y definenrecomendaciones 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
![Page 16: HTML 5 para SEO](https://reader031.fdocuments.us/reader031/viewer/2022022415/5a64882c7f8b9a52568b4a1f/html5/thumbnails/16.jpg)
ESTÁNDARES PUBLICADOS POR EL W3CCSS DOM HTML XHTML
XML SOAP SVG ...by | #CW17 #HTML5SEOjjpeleato.com
2 . 14
![Page 17: HTML 5 para SEO](https://reader031.fdocuments.us/reader031/viewer/2022022415/5a64882c7f8b9a52568b4a1f/html5/thumbnails/17.jpg)
HTMLHTML, es un estándar que significa Lenguaje deMarcado para Hipertextos (HyperText Markup
Language) es el elemento de construcción más básicode 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
![Page 18: HTML 5 para SEO](https://reader031.fdocuments.us/reader031/viewer/2022022415/5a64882c7f8b9a52568b4a1f/html5/thumbnails/18.jpg)
HTML determina el contenido de la página web, perono su funcionalidad.
Otras tecnologías distintas de HTML son usadasgeneralmente para describir la
apariencia/presentación de una página web (CSS) o sufuncionalidad (JavaScript).
by | #CW17 #HTML5SEOjjpeleato.com
2 . 16
![Page 19: HTML 5 para SEO](https://reader031.fdocuments.us/reader031/viewer/2022022415/5a64882c7f8b9a52568b4a1f/html5/thumbnails/19.jpg)
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
![Page 20: HTML 5 para SEO](https://reader031.fdocuments.us/reader031/viewer/2022022415/5a64882c7f8b9a52568b4a1f/html5/thumbnails/20.jpg)
HiperText se refiere a enlaces que conectan unapá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 laWeb. Al subir contenido a Internet y vincularlo a páginasde otras personas, te haces participante activo de esta
red mundial.by | #CW17 #HTML5SEOjjpeleato.com
2 . 18
![Page 21: HTML 5 para SEO](https://reader031.fdocuments.us/reader031/viewer/2022022415/5a64882c7f8b9a52568b4a1f/html5/thumbnails/21.jpg)
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
![Page 22: HTML 5 para SEO](https://reader031.fdocuments.us/reader031/viewer/2022022415/5a64882c7f8b9a52568b4a1f/html5/thumbnails/22.jpg)
XHTMLXHTML (eXtensible HyperText Markup Language) es a
XML como HTML es a SGML. Es decir, XHTML es unlenguaje 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
![Page 23: HTML 5 para SEO](https://reader031.fdocuments.us/reader031/viewer/2022022415/5a64882c7f8b9a52568b4a1f/html5/thumbnails/23.jpg)
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
![Page 25: HTML 5 para SEO](https://reader031.fdocuments.us/reader031/viewer/2022022415/5a64882c7f8b9a52568b4a1f/html5/thumbnails/25.jpg)
HTML 5HTML5 es la última versión de HTML. Quinta revisión
del lenguaje básico de WWW donde establece unaserie de elementos y atributos que reflejan el uso
típico de los sitios web modernos.by | #CW17 #HTML5SEOjjpeleato.com
3 . 2
![Page 26: HTML 5 para SEO](https://reader031.fdocuments.us/reader031/viewer/2022022415/5a64882c7f8b9a52568b4a1f/html5/thumbnails/26.jpg)
Diseñado para ser utilizable por todos losdesarrolladores de Open Web, los recursos sobre lastecnologías se clasifican en varios grupos según su
función:by | #CW17 #HTML5SEOjjpeleato.com
3 . 3
![Page 27: HTML 5 para SEO](https://reader031.fdocuments.us/reader031/viewer/2022022415/5a64882c7f8b9a52568b4a1f/html5/thumbnails/27.jpg)
Semántica: Permite describir con mayor precisióncuál es su contenido.Conectividad: Permite comunicarse con el servidorde formas nuevas e innovadoras.
by | #CW17 #HTML5SEOjjpeleato.com
3 . 4
![Page 28: HTML 5 para SEO](https://reader031.fdocuments.us/reader031/viewer/2022022415/5a64882c7f8b9a52568b4a1f/html5/thumbnails/28.jpg)
Sin conexión y almacenamiento: Permite a laspáginas web almacenar datos localmente en el ladodel cliente y operar sin conexión de manera máseficiente.Multimedia: Nos otorga un excelente soporte parautilizar contenido multimedia como lo son audio yvideo nativamente.
by | #CW17 #HTML5SEOjjpeleato.com
3 . 5
![Page 29: HTML 5 para SEO](https://reader031.fdocuments.us/reader031/viewer/2022022415/5a64882c7f8b9a52568b4a1f/html5/thumbnails/29.jpg)
Gráficos y efectos 2D/3D: Proporciona una ampliagama de nuevas características que se ocupan delos gráficos en la web como lo son canvas 2D,WebGL, SVG, etc.Rendimiento e Integración: Proporciona una mayoroptimización de la velocidad y un mejor uso delhardware.
by | #CW17 #HTML5SEOjjpeleato.com
3 . 6
![Page 30: HTML 5 para SEO](https://reader031.fdocuments.us/reader031/viewer/2022022415/5a64882c7f8b9a52568b4a1f/html5/thumbnails/30.jpg)
Acceso al dispositivo: Proporciona APIs para el usode varios componentes internos de entrada y salidade nuestro dispositivo.CSS3: Nos ofrece una nueva gran variedad deopciones para hacer diseños más sofisticados.
by | #CW17 #HTML5SEOjjpeleato.com
3 . 7
![Page 31: HTML 5 para SEO](https://reader031.fdocuments.us/reader031/viewer/2022022415/5a64882c7f8b9a52568b4a1f/html5/thumbnails/31.jpg)
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
![Page 32: HTML 5 para SEO](https://reader031.fdocuments.us/reader031/viewer/2022022415/5a64882c7f8b9a52568b4a1f/html5/thumbnails/32.jpg)
APRENDER
by | #CW17 #HTML5SEO
https://www.w3schools.com/html/
https://developer.mozilla.org/esjjpeleato.com
3 . 9
![Page 34: HTML 5 para SEO](https://reader031.fdocuments.us/reader031/viewer/2022022415/5a64882c7f8b9a52568b4a1f/html5/thumbnails/34.jpg)
ELEMENTO RAÍZElemento 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 losdemás elementos deben ser descendientes de este elemento.
by | #CW17 #HTML5SEO
<!doctypehtml>
<html>
jjpeleato.com
4 . 2
![Page 35: HTML 5 para SEO](https://reader031.fdocuments.us/reader031/viewer/2022022415/5a64882c7f8b9a52568b4a1f/html5/thumbnails/35.jpg)
METADATOS DEL DOCUMENTOElemento 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 detítulo del navegador o en las pestañas de página. Solamentepuede contener texto y cualquier otra etiqueta contenida no seráinterpretada.
by | #CW17 #HTML5SEO
<head>
<title>
jjpeleato.com
4 . 3
![Page 36: HTML 5 para SEO](https://reader031.fdocuments.us/reader031/viewer/2022022415/5a64882c7f8b9a52568b4a1f/html5/thumbnails/36.jpg)
Elemento DescripciónDefine 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 documentoHTML actual.
by | #CW17 #HTML5SEO
<base>
<link>
jjpeleato.com
4 . 4
![Page 37: HTML 5 para SEO](https://reader031.fdocuments.us/reader031/viewer/2022022415/5a64882c7f8b9a52568b4a1f/html5/thumbnails/37.jpg)
Elemento DescripciónDefine los metadatos que no pueden ser definidos usando otroelemento HTML.
Etiqueta de estilo usada para escribir CSS en línea.
by | #CW17 #HTML5SEO
<meta>
<style>jjpeleato.com
4 . 5
![Page 38: HTML 5 para SEO](https://reader031.fdocuments.us/reader031/viewer/2022022415/5a64882c7f8b9a52568b4a1f/html5/thumbnails/38.jpg)
SCRIPTINGElemento Descripción
Define ya sea un script interno o un enlace hacia un scriptexterno. El lenguaje de programación es JavaScript
Define un contenido alternativo a mostrar cuando el navegadorno soporta scripting.
by | #CW17 #HTML5SEO
<script>
<noscript>
jjpeleato.com
4 . 6
![Page 39: HTML 5 para SEO](https://reader031.fdocuments.us/reader031/viewer/2022022415/5a64882c7f8b9a52568b4a1f/html5/thumbnails/39.jpg)
SECCIONESElemento Descripción
Representa el contenido principal de un documento HTML. Solohay un elemento <body> en un documento.
Representa un contenedor genérico sin ningún significadoespecial.
Define la cabecera de una página o sección. Usualmente contieneun logotipo, el título del sitio Web y una tabla de navegación decontenidos.
by | #CW17 #HTML5SEO
<body>
<div>
<header>
jjpeleato.com
4 . 7
![Page 40: HTML 5 para SEO](https://reader031.fdocuments.us/reader031/viewer/2022022415/5a64882c7f8b9a52568b4a1f/html5/thumbnails/40.jpg)
Elemento DescripciónDefine el pie de una página o sección. Usualmente contiene unmensaje de derechos de autoría, algunos enlaces a informaciónlegal 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
![Page 41: HTML 5 para SEO](https://reader031.fdocuments.us/reader031/viewer/2022022415/5a64882c7f8b9a52568b4a1f/html5/thumbnails/41.jpg)
Elemento DescripciónDefine una sección en un documento.
Define contenido autónomo que podría existirindependientemente del resto del contenido.
by | #CW17 #HTML5SEO
<section>
<article>
jjpeleato.com
4 . 9
![Page 42: HTML 5 para SEO](https://reader031.fdocuments.us/reader031/viewer/2022022415/5a64882c7f8b9a52568b4a1f/html5/thumbnails/42.jpg)
Elemento DescripciónDefine algunos contenidos vagamente relacionados con el restodel contenido de la página. Si es removido, el contenido restanteseguirá teniendo sentido
Los elemento de cabecera implementan seis niveles de cabecerasde documentos; <h1> es la de mayor y <h6> es la de menorimportancia. Un elemento de cabecera describe brevemente eltema de la sección que introduce.
by | #CW17 #HTML5SEO
<aside>
<h1> -<h6>
jjpeleato.com
4 . 10
![Page 43: HTML 5 para SEO](https://reader031.fdocuments.us/reader031/viewer/2022022415/5a64882c7f8b9a52568b4a1f/html5/thumbnails/43.jpg)
Elemento DescripciónDefine 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
![Page 44: HTML 5 para SEO](https://reader031.fdocuments.us/reader031/viewer/2022022415/5a64882c7f8b9a52568b4a1f/html5/thumbnails/44.jpg)
SEMÁNTICA A NIVEL DE TEXTOElemento Descripción
Representa un valor de fecha y hora; el equivalente legible pormáquina puede ser representado en el atributo datetime.
by | #CW17 #HTML5SEO
<time>
jjpeleato.com
4 . 12
![Page 45: HTML 5 para SEO](https://reader031.fdocuments.us/reader031/viewer/2022022415/5a64882c7f8b9a52568b4a1f/html5/thumbnails/45.jpg)
CONTENIDO INCRUSTADOElemento Descripción
Representa un video y sus archivos de audio con la interfaznecesaria para reproducirlos.
Representa un sonido o stream de audio.
by | #CW17 #HTML5SEO
<video>
<audio>jjpeleato.com
4 . 13
![Page 46: HTML 5 para SEO](https://reader031.fdocuments.us/reader031/viewer/2022022415/5a64882c7f8b9a52568b4a1f/html5/thumbnails/46.jpg)
Elemento DescripciónPermite a autores especificar recursos multimedia alternativospara los elementos multimedia como <video> o <audio>.
Representa un punto de integración para una aplicación ocontenido interactivo externo que por lo general no es HTML.
by | #CW17 #HTML5SEO
<source>
<embed>
jjpeleato.com
4 . 14
![Page 47: HTML 5 para SEO](https://reader031.fdocuments.us/reader031/viewer/2022022415/5a64882c7f8b9a52568b4a1f/html5/thumbnails/47.jpg)
Elemento DescripciónRepresenta un área de mapa de bits en el que se pueden utilizarscripts para renderizar gráficos como gráficas, gráficas de juegos ocualquier 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
![Page 48: HTML 5 para SEO](https://reader031.fdocuments.us/reader031/viewer/2022022415/5a64882c7f8b9a52568b4a1f/html5/thumbnails/48.jpg)
FORMULARIOSElemento Descripción
Representa un conjunto de opciones predefinidas para otroscontroles.
Genera claves asimétricas utilizando varios algoritmos. Dos de losalgoritmos predeterminados son: RSA y DSA
by | #CW17 #HTML5SEO
<datalist>
<keygen>
jjpeleato.com
4 . 16
![Page 49: HTML 5 para SEO](https://reader031.fdocuments.us/reader031/viewer/2022022415/5a64882c7f8b9a52568b4a1f/html5/thumbnails/49.jpg)
Elemento DescripciónRepresenta el resultado de un cálculo.
Representa el progreso de finalización de una tarea.
by | #CW17 #HTML5SEO
<output>
<progress>jjpeleato.com
4 . 17
![Page 50: HTML 5 para SEO](https://reader031.fdocuments.us/reader031/viewer/2022022415/5a64882c7f8b9a52568b4a1f/html5/thumbnails/50.jpg)
CASO PRÁCTICOby | #CW17 #HTML5SEO
Ejemplosjjpeleato.com
5 . 1
![Page 52: HTML 5 para SEO](https://reader031.fdocuments.us/reader031/viewer/2022022415/5a64882c7f8b9a52568b4a1f/html5/thumbnails/52.jpg)
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
![Page 53: HTML 5 para SEO](https://reader031.fdocuments.us/reader031/viewer/2022022415/5a64882c7f8b9a52568b4a1f/html5/thumbnails/53.jpg)
¡FELIZ CONGRESO!
by | #CW17 #HTML5SEO
Simplemente, GRACIAS A TOD@S
jjpeleato.com
7