Categoría: HTML5

Dependiendo de la versión de chrome, tendremos 2 formas.

A partir de la versión de chrome 67.0.3396.62

Añadimos este atributo a la etiqueta HTML5 Video

controlslist="nodownload"

Navegador Chrome sin el atributo controllist=»nodownload»

Navegador chrome con el atributo controllist=»nodownload»

El icono para descargar va depender de la versión de chrome instalada

Para versiones anteriores

Deberemos implementar unas clases CSS para ocultar el botón de descargar

video::-internal-media-controls-download-button {display:none}
video::-webkit-media-controls-enclosure {overflow:hidden}
video::-webkit-media-controls-panel {width: calc(100% + 18px); /* Ajustar los pixeles segun se necesite */}

metatag Robots, para que sirve

La metaetiqueta «robots» permite utilizar un enfoque granular y a nivel de página para controlar cómo se deben indexar y servir a los usuarios páginas concretas en los resultados de la Búsqueda de Google.

<meta name="robots" content="noindex" />

La metaetiqueta «robots» del ejemplo anterior indica a los buscadores que no muestren esa página en los resultados de búsqueda.

Como el atributo name tiene el valor robots, la directiva se aplica a todos los rastreadores.

Para aplicarla a un rastreador específico, sustituye el valor robots del atributo name por el nombre del rastreador en cuestión.

Los rastreadores específicos también se denominan user-agent (los rastreadores utilizan su user-agent para solicitar acceso a una página).

El nombre de user-agent del rastreador web estándar de Google es Googlebot.

<meta name="googlebot" content="noindex" />

Los buscadores pueden tener distintos rastreadores con propiedades y fines diferentes.

Directivas de la metaetiqueta «robots» y los elementos «data-nosnippet» y «X-Robots-Tag»

all

No hay restricciones de indexación ni de publicación. Esta directiva es el valor predeterminado y no tiene ningún efecto si se utiliza de forma explícita.

noindex

No se muestra la página en los resultados de búsqueda.

nofollow

No se siguen los enlaces de la página.

none

Equivalente a noindex, nofollow.

noarchive

No se muestra ningún enlace en caché en los resultados de búsqueda.

nosnippet

No se muestra ningún fragmento ni la vista previa de ningún vídeo en los resultados de búsqueda de la página. Es posible que se siga mostrando una miniatura de imagen estática (si está disponible) si permite obtener una mejor experiencia de usuario.

Esto se aplica a todas las formas de resultados de búsqueda (en la Búsqueda web de Google, Google Imágenes o Discover).

max-snippet:[number]

Se usan un máximo de [number] caracteres como fragmento de texto para este resultado de búsqueda (ten en cuenta que una URL puede aparecer como varios resultados de búsqueda en una página de resultados de búsqueda).

No afecta a las vistas previas de imágenes o vídeos y, además, se aplica a todas las formas de resultados de búsqueda (como la Búsqueda web de Google, Google Imágenes, Descubrir o el Asistente). Sin embargo, este límite no se aplica en los casos en los que un editor haya concedido permiso por separado para utilizar el contenido.

Por ejemplo, si el editor proporciona contenido en forma de datos estructurados en la página o tiene un acuerdo de licencia con Google, esta configuración no interrumpe los usos permitidos más específicos. Esta directiva se ignora si no se especifica ningún elemento [number] que se pueda analizar.

Valores especiales:

0: no se mostrará ningún fragmento. Equivalente a nosnippet.
-1: no hay límite de longitud de fragmentos.

Ejemplo: max-image-preview:[setting]

Se establece el tamaño máximo de una vista previa de imagen para la página en los resultados de búsqueda.

Valores setting aceptados:

• none
  No se mostrará ninguna vista previa de la imagen.
• standard
  Es posible que se muestre una vista previa de la imagen predeterminada.
• large
  Es posible que se muestre una vista previa más grande de una imagen, hasta el ancho del viewport.

Se aplica a todo tipo de resultados de búsqueda (como la Búsqueda web de Google, Google Imágenes, Discover o el Asistente). Sin embargo, este límite no se aplica en los casos en los que un editor haya concedido permiso por separado para utilizar el contenido.

Por ejemplo, si el editor proporciona contenido en forma de datos estructurados en la página, como AMP y versiones canónicas de un artículo, o tiene un acuerdo de licencia con Google, esta configuración no interrumpirá los usos permitidos más específicos.

Los editores que no quieran que Google muestre imágenes en miniatura de mayor tamaño cuando sus páginas AMP y la versión canónica de un artículo aparezcan en la búsqueda o en Discover deben especificar un valor max-image-preview de standard o none.

Ejemplo: max-video-preview:[number]

Utiliza fragmentos de vídeo de [number] segundos como máximo para los vídeos de esta página en los resultados de búsqueda.

Otros valores admitidos:

0: como máximo, se puede utilizar una imagen estática, de acuerdo con la configuración de «max-image-preview».
-1: no hay límite.

Se aplica a todo tipo de resultados de búsqueda (en la Búsqueda web de Google, Google Imágenes, Google Vídeos, Discover o el Asistente).

Esta directiva se ignora si no se especifica ningún elemento [number] que se pueda analizar.

Ejemplo:

• notranslate
  No se ofrece una traducción de esta página en los resultados de búsqueda.
• noimageindex
  No se indexan las imágenes de esta página.
• unavailable_after: [date/time]
  No se muestra esta página en los resultados de búsqueda después de la fecha y hora especificadas. La fecha y la hora deben especificarse en formatos ampliamente aceptados, como RFC 822, RFC 850 o ISO 8601. Esta directiva se ignora si no se especifica ningún valor [date/time] válido. De forma predeterminada, el contenido no tiene fecha de caducidad.

https://developers.google.com/search/reference/robots_meta_tag

Consulta la lista completa de los rastreadores de Google.

Por ejemplo, para mostrar una página en los resultados de búsqueda web de Google, pero no en Google Noticias, utiliza la siguiente metaetiqueta:

<meta name="googlebot-news" content="noindex" />

Para especificar varios rastreadores de forma individual, puedes utilizar varias metaetiquetas «robots»:

<meta name="googlebot" content="noindex">
<meta name="googlebot-news" content="nosnippet">

metatag NOODP, para que sirve

Si tu sitio web está listado en el Open Directory Project (DMOZ), los buscadores puede elegir por utilizar el titulo y la descripción de DMOZ en sus resultados de sus búsquedas y no lo que consta en tu pagina web, unas veces ocurre también por que en tu pagina esta faltando el titulo y/o meta descripción.

Para evitar este comportamiento se debe hacer uso de la meta tag NOODP, si por el contrario si que queremos forzar a que los datos los extraiga de DMOZ debemos poner ODP.

Común para todos los buscadores

<meta name="" content="noodp"> Datos propios
<meta name="" content="odp">  Datos de DMOZ

Buscadores específicos

En el name poner el nombre del robot de búsqueda

Robot de Google

<meta name="googlebot" content="noodp"> No DMOZ
<meta name="googlebot" content="odp"> Si DMOZ

Robot de Yahoo

<meta name="slurp" content="noodp"> No DMOZ
<meta name="slurp" content="odp"> Si DMOZ

Robot de Bing

<meta name="msnbot" content="noodp"> No DMOZ
<meta name="msnbot" content="odp"> Si DMOZ

NOTA: El 17 de marzo de 2017 se dio de baja este servicio, con lo que esta meta no tiene ninguna utilidad a fecha de hoy.

Puedes navegar por lo que era dmoz.org, aqui.

Una ruta de exploración segun la especificación HTML5 está formada por varios enlaces que reflejan la estructura jerárquica de un sitio web y permiten que el usuario la explore.

Permitiendo marcar el orden y nombre de los elementos en los resultados de búsquedas de los principales buscadores entre ellos Google, Microsoft y Yahoo! ya lo comprender y lo muestran en sus resultados.

Ejemplo:

<div class="navega">
<span itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
<a href="http://megazona.com" title="megazona.com" itemprop="url" rel="index">
<span itemprop="title">megazona</span></a>
</span>
»
<span itemscope itemtype=http://data-vocabulary.org/Breadcrumb>
<a href=http://megazona.com/html5/ title="Html5" itemprop=url>
<span itemprop=title>html5</span></a>
</span>
»
<span itemscope itemtype=http://data-vocabulary.org/Breadcrumb>
<a href=http://megazona.com/html5/microdatos/ title="Microdatos" itemprop=url>
<span itemprop=title>microdatos</span></a>
</span>
</div>

Nuevos elementos semánticos / Estructural

Nuevos para medios de comunicación / Media

El nuevo elemento <canvas>

Nuevos elementos de formulario

Elementos eliminados de la version anterior de HTML

Los siguientes elementos o etiquetas de la version HTML4 fueron eliminados y su uso no sería correcto para la nueva versión de HTML5

• <acronym>
• <applet>
• <basefont>
• <big>
• <center>
• <dir>
• <font>
• <frame>
• <frameset>
• <NOFRAMES>
• <strike>
• <tt>

Requisitos que tiene que cumplir apple-touch-icon.png

• El formato en png
• El ancho y alto del fichero es fijo, los tamaños ha ido aumentado conforme las pantallas han crecido.
• El nombre del fichero debe llamarse apple-touch-icon.png el propio iphone redondeara las esquinas y le dará el efecto típico de los botones del iPhone, si no deseas que el icono se le apliquen los efectos el iPhone deberás guardarlo con el nombre apple-touch-icon-precomposed.png el teléfono al encontrar este fichero dejara el icono tal cual este.
  NOTA: Aunque esto no es del todo cierto, si no existe la meta el navegador buscara directamente en la raiz del website.

Una vez creado el fichero y subido a nuestra web deberemos añadir el siguiente meta en el header

<link rel="apple-touch-icon" href="https://tudominio.com/apple-touch-icon.png">

El nombre del archivo puede ser distinto y la ubicación en la web también, si lo especificamos en la ruta de la meta.

Metas apple-touch-icon con tamaños en html

<link rel="apple-touch-icon" href="[rutaarchivo]">
<link rel="apple-touch-icon-precomposed" href="[rutaarchivo]">
<link rel="apple-touch-icon" sizes="57x57" href="[rutaarchivo]">
<link rel="apple-touch-icon" sizes="60x60" href="[rutaarchivo]"> 
<link rel="apple-touch-icon" sizes="72x72" href="[rutaarchivo]">
<link rel="apple-touch-icon" sizes="76x76" href="[rutaarchivo]">
<link rel="apple-touch-icon" sizes="114x114" href="[rutaarchivo]"> 
<link rel="apple-touch-icon" sizes="120x120" href="[rutaarchivo]">
<link rel="apple-touch-icon" sizes="128x128" href="[rutaarchivo]"> 
<link rel="apple-touch-icon" sizes="144x144" href="[rutaarchivo]"> 
<link rel="apple-touch-icon" sizes="152x152" href="[rutaarchivo]">
<link rel="apple-touch-icon" sizes="167x167" href="[rutaarchivo]">
<link rel="apple-touch-icon" sizes="180x180" href="[rutaarchivo]">

Ejemplo de apple-touch-icon utilizado en megazona

Generadores de apple-touch-icon online

• https://iconifier.net/
• https://manytools.org/http-html-text/apple-touch-icon-generator/
• https://digitalagencyrankings.com/iconogen/