Meta etiquetas en HTML

Desarrollo de Aplicaciones Web

Meta etiquetas en HTML

Contenido:


  1. Meta etiquetas
  2. SEO

Meta etiquetas

Meta etiquetas

  • La cabecera <head> contiene las etiquetas meta, que son leídas por los buscadores al rastrear información.


  • Son una excelente manera para proporcionar a los motores de búsqueda información.


  • Cada uno procesará las etiquetas meta que entienden, ignorando el resto.


  • Meta etiquetas

    Atributos habituales


    Atributo Descripción Sintaxis
    description Descripción del contenido <meta name="description" content="" />
    keywords Palabras clave sobre qué trata el sitio <meta name="keywords" content=", , ," />
    Charset Indica la codificación de caracteres <meta charset="UTF-8"/>

    Meta etiquetas

    En la cabecera del documento se pueden incluir scripts de diferentes lenguajes de programación. Ejemplos:


  • JavaScript
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>


  • CSS
    <link rel="stylesheet" href="ruta/estilo.css" type="text/css" media="screen" />


  • Meta etiquetas

    Otras etiquetas usadas con frecuencia

    author nombre Indica el nombre del autor de la página.
    language idioma Código ISO 639-1 del idioma del documento HTML.
    generator software Indica el programa utilizado para crear la página web.
    theme-color color Color en formato hexadecimal de la barra de navegación del navegador. .
    viewport parámetros Comportamiento de la región visible del navegador. Ver Adaptable (responsive).

    Meta etiquetas

    viewport

    Indica al navegador cómo debe renderizarse la página

    <meta name="viewport" content="
        width = [pixeles | ancho-dispositivo ],
        height = [pixeles | alto-dispositivo],
        initial-scale = float,
        minimum-scale = float,
        maximum-scale = float,
        user-scalable = [yes | no]
    ">

    Meta etiquetas

    viewport

    Meta etiquetas

    Google puede leer otros metadatos que le indican como realizar ciertas acciones:


    Atributo name Atributo content Descripción
    google nositelinkssearchbox Indica a Google que no muestre el minibuscador en los sitios de enlaces.
    google notranslate Indica a Google que no debe traducir la página.
    robots parámetros Indica al robot de un buscador si debe indexar o no la página.

    Meta etiquetas

    La etiqueta <meta name="robots"> puede tener varios parámetros para indicarle diferentes detalles:


    Parámetros Significado
    index Sugiere que se quiere indexar el contenido de la página en el buscador.
    noindex Indica que no debe indexar el contenido de la página en el buscador.
    follow Sugiere que siga los enlaces que encuentre en la página.
    nofollow Indica que no debe seguir los enlaces que encuentre en la página.
    nosnippet Indica que no muestre fragmentos (descripción, etc...).
    noodp Indica que no use la descripción alternativa de DMOZ.
    noarchive Indica que no almacene una versión en caché de la página.
    unavailable_after:[fecha]: Establece una fecha de caducidad para que no se rastree más la página.
    noimageindex Indica que no indexe la página en resultados de Imágenes.
    none Equivalente a indicar los parámetros noindex, nofollow.

    SEO

    SEO

    SEO es el proceso de optimizar el contenido en línea, de manera que un motor de búsqueda prefiera mostrarlo entre los primeros resultados para búsquedas de una determinada palabra clave.



    SEO

    Formas de optimizar el contenido:


    Meta Etiquetas Los buscadores las utilizan para entender de qué se trata el sitio y procesar su alta
    Títulos Tipos de etiquetas específicas para títulos (h1,...h6)
    Meta Descripciones No influye en el posicionamiento, al mostrarse en los resultados influye en las posibilidades de atraer clics hacia el sitio
    Optimización de imágenes No utilizar cualquier nombre de imagen, utilizar texto alternativo y titulo
    URL No usar direcciones URL que no representen el contenido de la página
    Optimización del texto Utilizar palabras clave una cierta cantidad de veces (pueden estar incluidas dentro de las etiquetas “strong”)
    Enfoque semántico de palabras clave El contenido debe satisfacer la expectativa de quienes buscan, la palabra clave debe ir conectada siempre a esa intención
    Velocidad de carga de la página Influye en el ranking de resultados de Google. Una herramienta útil es testmysite
    Estructura de los datos Schema.org es un sitio que muestra cuál es el esquema de datos correcto para posicionarse mejor
    Google AMP Recurso para acelerar la carga de una página web desde un dispositivo móvil