What is a Meta Tag in HTML? - Focus

A meta tag in HTML is an element that provides metadata (information) about a web page.
Meta tags do not display content on the page; instead, they provide information to browsers, search engines, and other services.

Contents

Why Meta Tags Are Important:Commonly Used Meta Tags and Properties Detailed Examples:Complete Example:Key Takeaways:

They are placed inside the <head> section of an HTML document.

Syntax:

<meta name="name" content="value">

Why Meta Tags Are Important:

Help search engines understand the page content (SEO).
Define the character set of the document.
Control viewport settings for responsive design.
Specify page descriptions, keywords, author, and more.

Commonly Used Meta Tags and Properties

Meta Tag	Description	Example
Charset	Specifies the character encoding.	`<meta charset="UTF-8">`
Viewport	Controls layout and scaling on mobile devices.	`<meta name="viewport" content="width=device-width, initial-scale=1.0">`
Description	Short description of the page (SEO).	`<meta name="description" content="Learn HTML and web development.">`
Keywords	List of keywords (less relevant today for SEO).	`<meta name="keywords" content="HTML, CSS, Web Development">`
Author	Specifies the author of the document.	`<meta name="author" content="John Doe">`
Robots	Instructs search engines on indexing and following links.	`<meta name="robots" content="index, follow">`
Refresh/Redirect	Automatically refreshes the page after a certain time or redirects.	`<meta http-equiv="refresh" content="5; url=https://example.com">`
Open Graph (Facebook Sharing)	Controls how the page appears when shared on social media.	`<meta property="og:title" content="Learn HTML">`
Twitter Cards	Enhances the appearance of the page on Twitter.	`<meta name="twitter:card" content="summary_large_image">`

Detailed Examples:

1. Charset Example:

<meta charset="UTF-8">

Ensures proper encoding for special characters like é, ü, ñ.

2. Viewport Example (Responsive Design):

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Ensures the page adapts to different screen sizes (important for mobile devices).

3. Description Example (SEO):

<meta name="description" content="This is a comprehensive guide to HTML for beginners.">

Used by search engines as a summary of the page.

4. Keywords Example (Less Relevant Today):

<meta name="keywords" content="HTML, CSS, JavaScript, Web Development">

Not heavily used by search engines anymore but can still be useful in some cases.

5. Author Example:

<meta name="author" content="Jane Doe">

Specifies the author of the page.

6. Robots Example:

<meta name="robots" content="noindex, nofollow">

Tells search engines not to index the page or follow any links on it.

Value	Meaning
`index`	Index the page
`noindex`	Don’t index the page
`follow`	Follow links on the page
`nofollow`	Don’t follow any links on the page

7. Refresh/Redirect Example:

<meta http-equiv="refresh" content="10;url=https://example.com">

Redirects to https://example.com after 10 seconds.

8. Open Graph (for Facebook Sharing):

<meta property="og:title" content="Learn HTML Fast">
<meta property="og:description" content="A quick and easy guide to HTML.">
<meta property="og:image" content="https://example.com/html-guide.png">
<meta property="og:url" content="https://example.com/html-guide">

Defines how the page appears when shared on Facebook.

9. Twitter Cards:

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Learn HTML Fast">
<meta name="twitter:description" content="Quick and easy HTML guide for beginners.">
<meta name="twitter:image" content="https://example.com/html-guide.png">

Enhances page appearance on Twitter.

Complete Example:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Learn HTML from scratch with this beginner-friendly guide.">
    <meta name="keywords" content="HTML, Web Development, Coding">
    <meta name="author" content="John Doe">
    <meta name="robots" content="index, follow">
    <title>Learn HTML - Beginner's Guide</title>
</head>
<body>
    <h1>Welcome to HTML Guide</h1>
</body>
</html>

Key Takeaways:

Meta tags provide information about a webpage to browsers, search engines, and social media platforms.
Important for SEO, social media previews, and responsive design.
Placed within the <head> section of an HTML document.

Let me know if you need more details or help with anything else! 😊