본문으로 건너뛰기

Essential Head Tags for Search Engine Optimization

head Tag - Search Engine Optimization

The contents within the head tag may not be visible on the website, but they provide metadata to search engines describing the document, so they require special attention.

Let's take a look at the key contents within the head tag used in the practice.


Key HTML Tags within the head

This is the metadata area of a web page. It contains settings or information for the web page, references to external stylesheets, scripts, etc., and is not displayed by the web browser.


<meta charset="UTF-8" />

  • This tag defines the character encoding method (the conversion of characters into a form that computers can use) for the web document.
  • "UTF-8" is an internationally used character encoding method that supports various languages and characters.

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

  • This tag controls how a 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 necessary for mobile and responsive designs.
  • width=device-width means to set the viewport width equal to the width of the device.
  • initial-scale=1.0 sets the initial zoom level.

<title>Website Title</title>

  • It defines the title of the web page. This title is displayed in 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 for the search engine results page (SERP).

Open Graph (OG) Tags

  • Define meta information used when sharing website content on social media platforms (e.g., Facebook).

    • og:title: The title of the content being shared
    • og:description: The description of the content being shared
    • og:type: The type of content (e.g., website, video, etc.)
    • og:image: The image URL displayed when shared

  • Sets the favicon (icon) image of the website displayed in the browser tab.

  • Connects an external CSS file to the web page. In this example, the stylesheet "pretendard.css" is connected via CDN.

  • The Canonical Link informs search engines of the URL of the original page when a web page has a copy with the same (or very similar) content at another URL.

다음 내용이 궁금하다면?

월 12,500원 PLUS 멤버십 가입 or 강의를 등록해 주세요!