Skip to main content
Practice

head Tag - Search Engine Optimization

The content within the head tag is not visible on your website, but it provides metadata that describes the document to search engines, making it essential to pay special attention to.

Let's explore the key contents used in the head tag of our practice.


Key HTML Tags in head​

This is the metadata section of the web page. It includes references to configurations or information about the web page, external stylesheets, and scripts, but it does not display content on the screen.


<meta charset="UTF-8" />​

  • This tag defines the character encoding used by the web document.
  • "UTF-8" is an internationally used character encoding that supports a wide range of languages and characters.

<meta http-equiv="X-UA-Compatible" content="IE=edge" />​

  • This tag controls how the website is rendered in Internet Explorer.
  • "IE=edge" instructs IE to use the latest rendering engine.

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

  • This tag is essential for mobile and responsive design.
  • width=device-width sets the viewport width to the width of the device.
  • initial-scale=1.0 sets the initial zoom level.

<title>Website Title</title>​

  • Defines the web page's title. It appears on the browser tab and is also used in search engine results.

Meta Tags for SEO and Sharing​

  • <meta name="title" ... /> and <meta name="description" ... />: Set the title and description displayed on the search engine results page (SERP).

Open Graph (OG) Tags​

  • These tags are used to define metadata when the website content is shared on social media platforms (e.g., Facebook).

    • og:title: Title of the shared content
    • og:description: Description of the shared content
    • og:type: Type of content (e.g., website, video)
    • og:image: URL of the image displayed when shared

<link rel="icon" type="image/x-icon" href="ImageURL" />​

  • Sets the favicon that appears in the browser tab for the website.

<link rel="stylesheet" ... />​

  • Links an external CSS file to the web page. In this example, it links to a stylesheet called "pretendard.css" via a CDN.

<link rel="canonical" href="https://www.example.com" />​

  • A Canonical Link tells search engines the original URL of a web page, especially if there are other URLs with identical (or very similar) content.

Want to learn more?

Join CodeFriends Plus membership or enroll in a course to start your journey.