HTML - Lesson 10: Metas | Andros Fenollosa

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.

Will you buy me a coffee?

This is how I keep writing without ads or paywalls.

Sure, it's on me!

Comments

There are no comments yet.