10. Metas

Leer en español

Inside the <head> tag live the so-called meta tags, or configuration tags. They are oriented towards giving a series of guidelines to machines: browsers, search engines, social networks.

They must be placed inside the <head> tag.

<!DOCTYPE html>
<html lang="es">
    <head>
        <meta charset="utf-8">
    </head>
</html

Below you'll see the most used ones at a professional level.

Encoding

Allows unusual characters outside the American alphabet: ñ, á, é...

<meta charset="utf-8">

Title that will appear in the tab

The structure will be: name of the current page + separator + Description of the site.

<title>Home | My great company</title>

Favicon

Icon that will accompany the title. It will also be the icon that gets saved when someone makes a bookmark. A size of 32x32 in PNG format is recommended.

<link rel="icon" type="image/png" href="favicon.png">

Reset the zoom on Smartphones

Mandatory if we make a responsive design. On many occasions the visitor has a zoom active from somewhere else, and it can cause a bad entry experience.

<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">

Author

Declares who the author is. Without practical utility

<meta name="author" content="Your name">

Description

Declares the description of the website. It's used by search engines for the preview.

<meta name="description" content="Description of your website">

(Optional) Browser color

Suggests a color to the browser to customize the window. Currently it's compatible with Android.

<meta name="theme-color" content="#3c790a">

(Optional) Generator

Indicates with which technologies the HTML was generated

<meta name="generator" content="Django">

(Optional) Open Graph, X (Twitter) card and Mastodon

Declares how the link preview will be shown if it's shared on Facebook, Twitter or some other social network.

<!-- Open Graph -->
<meta property="og:image" content="img/miniatura.png">
<meta property="og:title" content="The Rock">
<!-- Options: website, video, audio, article, book or profile -->
<meta property="og:type" content="website">
<meta property="og:url" content="http://www.imdb.com/title/tt0117500/">
<meta property="og:image:secure_url" content="https://secure.example.com/ogp.jpg">
<meta property="og:image:type" content="image/jpeg">
<meta property="og:image:width" content="400">
<meta property="og:image:height" content="300">
<meta property="og:image:alt" content="A shiny red apple with a bite taken out">
<!-- X (Twitter) card -->
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@account">
<meta name="twitter:creator" content="@account">
<!-- Mastodon -->
<link href="https://mastodon.social/@miperfil" rel="me">

(Optional) Normalizer

Balances the styles between Browsers. The most famous is Normalize.css.

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css">

(Optional) You link CSS files

<link rel="stylesheet" type="text/css" href="css/main.css">

You can see the complete HTML5 template in Spanish

This work is under a Attribution-NonCommercial-NoDerivatives 4.0 International license.

Building SPAs with Django and HTML Over the Wire: Learn to build real-time single page applications with Python

Building SPAs with Django and HTML Over the Wire: Learn to build real-time single page applications with Python

The HTML over WebSockets approach simplifies single-page application (SPA) development and lets you bypass learning a JavaScript rendering framework such as React, Vue, or Angular, moving the logic to Python. This web application development book provides you with all the Django tools you need to simplify your developments with real-time results.

Buy the book

Help me keep writing

Every coffee gives me a push toward the next article.

Ko-fi donationsSure, it's on me!

Comments

There are no comments yet.