Skip to main content

HTML APIs

on
0

HTML Meta Tags and SEO Basics

on

HTML Meta Tags and SEO Basics: Make Your Site Discoverable

Common HTML meta tags visualized

Meta tags provide metadata about your HTML document that isn't visible to users but is crucial for search engines and browsers.

1. Essential Meta Tags

Character Encoding

<meta charset="UTF-8">

Viewport (for mobile)

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

Description

<meta name="description" content="Free web development tutorials and resources">

Keywords (less important now)

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

Author

<meta name="author" content="Your Name">
How meta tags affect SEO

2. Open Graph Meta Tags (for Social Media)

<meta property="og:title" content="Your Page Title">
<meta property="og:description" content="Your page description">
<meta property="og:type" content="website">
<meta property="og:url" content="https://yourwebsite.com/page">
<meta property="og:image" content="https://yourwebsite.com/image.jpg">

3. Twitter Card Meta Tags

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Your Page Title">
<meta name="twitter:description" content="Your page description">
<meta name="twitter:image" content="https://yourwebsite.com/image.jpg">

4. Other Useful Meta Tags

<!-- Prevent indexing -->
<meta name="robots" content="noindex, nofollow">

<!-- Refresh page -->
<meta http-equiv="refresh" content="30">

<!-- Theme color for mobile browsers -->
<meta name="theme-color" content="#4285f4">

5. Complete SEO-Friendly Head Section

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Learn web development with free tutorials">
    <meta name="keywords" content="HTML, CSS, JavaScript, Web Development">
    <meta name="author" content="Your Name">
    
    <!-- Open Graph -->
    <meta property="og:title" content="Learn Web Development">
    <meta property="og:type" content="website">
    <meta property="og:url" content="https://yourwebsite.com">
    <meta property="og:image" content="https://yourwebsite.com/og-image.jpg">
    
    <title>Learn Web Development - Free Tutorials</title>
    
    <!-- Favicon -->
    <link rel="icon" href="/favicon.ico">
</head>

Proper use of meta tags helps search engines understand your content and improves how your site appears in search results!

Comments

Post a Comment