Skillversitas

HTML Meta Tags

Meta tags provide metadata information about a web page. Meta tags are placed in the <head> section.

Basic Meta Tags

Character Encoding

<meta charset="UTF-8">

Viewport

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

Description

<meta name="description" content="Technology University Information Portal">

Keywords

<meta name="keywords" content="university, campus, education, college">

Author

<meta name="author" content="Technology University IT Team">

Robots

<meta name="robots" content="index, follow">

Open Graph (Facebook)

<meta property="og:type" content="website">
<meta property="og:title" content="Technology University">
<meta property="og:description" content="Technology University Information Portal">
<meta property="og:image" content="https://univ-tech.edu/image.jpg">
<meta property="og:url" content="https://univ-tech.edu">

Twitter Cards

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Technology University">
<meta name="twitter:description" content="Technology University Information Portal">
<meta name="twitter:image" content="https://univ-tech.edu/image.jpg">

Case Study: Campus Website SEO

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!-- SEO Meta Tags -->
    <title>Technology University - Academic Information Portal</title>
    <meta name="description" content="Technology University provides academic information, new student registration, and online administrative services.">
    <meta name="keywords" content="university, campus, college, undergraduate, Informatics Engineering, Information Systems">
    <meta name="author" content="Technology University IT Team">
    <meta name="robots" content="index, follow">

    <!-- Open Graph -->
    <meta property="og:type" content="website">
    <meta property="og:title" content="Technology University">
    <meta property="og:description" content="Technology University Academic Information Portal">
    <meta property="og:image" content="https://univ-tech.edu/og-image.jpg">
    <meta property="og:url" content="https://univ-tech.edu">
    <meta property="og:site_name" content="Technology University">

    <!-- Twitter Cards -->
    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:title" content="Technology University">
    <meta name="twitter:description" content="Academic Information Portal">
    <meta name="twitter:image" content="https://univ-tech.edu/twitter-image.jpg">

    <link rel="canonical" href="https://univ-tech.edu">
</head>
<body>
    <h1>Technology University</h1>
</body>
</html>

Everyday Case Study

Case: A developer needs to optimize a page's SEO.

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!-- The title must be unique and descriptive -->
    <title>2024 New Student Registration - Technology University</title>

    <!-- Description 150-160 characters -->
    <meta name="description" content="Technology University new student registration is open January 1 - February 28, 2024. Register now!">

    <!-- Relevant keywords -->
    <meta name="keywords" content="new student registration, university, technology university, enrollment 2024">

    <!-- Canonical URL -->
    <link rel="canonical" href="https://univ-tech.edu/pmb-2024">
</head>

Important Meta Tags

<!-- charset is required -->
<meta charset="UTF-8">

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

<!-- SEO -->
<title>Unique Title</title>
<meta name="description" content="Description 150-160 characters">
<meta name="robots" content="index, follow">

<!-- Open Graph for social media -->
<meta property="og:title" content="Title">
<meta property="og:description" content="Description">
<meta property="og:image" content="Image URL">

Best Practices

  1. Unique title: 50-60 characters
  2. Descriptive description: 150-160 characters
  3. Viewport always present: For mobile
  4. Open Graph: For social media sharing
  5. Canonical URL: To avoid duplicate content

Summary

Meta tags are important for SEO and social media. Always use title, description, and Open Graph tags.