SEO, which stands for Search Engine Optimization, is an important aspect to ensure that the website we create appears in Google search results or other search engines. One of the basic ways to perform SEO optimization is by using meta tags placed within the <head> section of the HTML structure. In this article, we will understand meta tags, the function of the <head> section, and basic SEO practices in HTML so that your website is more easily recognized by search engines.

Meta Tag Head

A meta tag is a piece of code in HTML that resides within the <head> element to provide instructions to search engines about the content of the page we are creating. Information from tags will not be directly visible to users, but it significantly impacts the UX (User Experience). Here is an example of the structure of meta tags, and of course, it's SEO-friendly.

<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Learn About Meta Tag & SEO HTML | NganggurDev</title>
  <meta name="description" content="Description dor CTA (Call To Action) or Keyword">
  <link rel="canonical" href="https://www.nganggurdev.com/article/learn-html-for-beginners-8-meta-tags-and-seo-in-html">
  <meta name="robots" content="index, follow">
  <!-- Open Graph -->
  <meta property="og:title" content="title for sharing into socmed">
  <meta property="og:description" content="short description for sharing into socmed.">
  <meta property="og:image" content="https://www.nganggurdev.com/img/og.jpg">
  <meta property="og:url" content="https://www.nganggurdev.com/article/learn-html-for-beginners-8-meta-tags-and-seo-in-html">
  <meta property="og:type" content="article">
  <!-- Twitter Card -->
  <meta name="twitter:card" content="summary_large_image">
  <!-- Schema.org -->
  <script type="application/ld+json">
  {
    "@context":"https://schema.org",
    "@type":"Article",
    "headline":"Learn About Meta Tag & SEO HTML",
    "image":"https://www.nganggurdev.com/img/og.jpg",
    "datePublished":"2025-07-21",
    "author":{"@type":"Person","name":"NganggurDev"}
  }
  </script>
</head>

The meta tags above are common tags used for optimizing SEO. Let's discuss some of the main meta tags that are very important for SEO from the code above.

<title> is the page title that will appear in the browser. Ideally, the title should be no more than 60 characters long.
<meta charset="UTF-8"> prevents character corruption.
<meta name="viewport"> is used for responsiveness, helping the page display optimally on mobile devices.
<meta name="description"> provides a brief description to understand the content of a website page.
<meta name="robots" content="index, follow" tells the browser that this page can be indexed.
<link rel="canonical"> is used to inform the browser about the main version of a web page when there are multiple pages with the same or similar content.

Benefits of Meta Tags for SEO

Although meta tags are not directly visible to visitors, they play a significant role in SEO optimization because they influence how search engines crawl, understand website content, and display websites in search results. Here is a detailed explanation of the benefits of meta tags for SEO.

Meta Description The meta description is usually displayed below the page title in Google search results. By using an attractive meta description and relevant keywords, you can increase the number of clicks, commonly referred to as CTR.
Title Tag Search engines use the title tag to determine the page title that will be displayed in search results, and this will be one of the ranking factors.
Meta Viewport Since Google updated its Mobile-First Indexing algorithm, mobile performance and appearance have become important factors in determining rankings. This meta tag also helps ensure that the page displays correctly on mobile devices.
Canonical Tag Search engines like Google don't like duplicate content. If a search engine finds many URLs with similar content, it can get confused about which page should appear in the search results. Therefore, the function of the canonical tag is to inform search engines about the main or original URL of a webpage.
Meta Robots Meta Robots are used to control the behavior of search engine robots (crawlers) as they crawl the web pages we create. With this tag, you can determine whether a page is allowed to appear in search results or not.

Basic SEO Tips for HTML

Here are some tips that might help you optimize your SEO using HTML.

Use relevant <title> tags that contain your main keywords according to the content you create.
Try to make the content of your meta description unique on every page.
The ideal maximum length for a meta description is 150-160 characters.
Use heading tags like <h1> for the title of your content.
Optimize image usage with the alt attribute.
Use semantic tags like <article>, <nav>, and <footer> for a clear content structure.
Avoid excessive keyword usage.

Conclusion

Optimizing SEO using various meta tags in the <head> is an important step when building a website. By writing descriptive and SEO-friendly HTML structure, your website will be easier for search engines and visitors to find and understand.

Thankyou.

Learn HTML for Beginners #8: Meta Tags and SEO in HTML

Meta Tag Head

Benefits of Meta Tags for SEO

Basic SEO Tips for HTML

Conclusion