블로그 head 메타 태그

컴퓨터-IT-인터넷-모바일/HTML-CSS-PHP
2024. 2. 21. 15:47

블로그 head 메타 태그: 심층 가이드 및 실제 사용 예시
블로그 head 메타 태그는 블로그 페이지의 중요한 정보를 검색 엔진과 사용자에게 제공하는 데 중요한 역할을 합니다. 이 가이드에서는 블로그 head 메타 태그의 종류, 기능 및 실제 사용 예시를 자세히 살펴보겠습니다.

1. 주요 블로그 head 메타 태그:

title: 블로그 페이지의 제목을 지정합니다. 검색 결과 페이지(SERP)에 표시되며, 사용자가 페이지를 식별하는 데 중요한 역할을 합니다.
description: 블로그 페이지의 간략한 설명을 제공합니다. SERP에 표시되며, 사용자가 페이지의 내용을 파악하는 데 도움을 줍니다.
keywords: 블로그 페이지와 관련된 키워드를 지정합니다. 검색 엔진이 페이지의 내용을 이해하는 데 도움을 주지만, 과도하게 사용하면 오히려 역효과를 낼 수 있습니다.
viewport: 모바일 기기에서 블로그 페이지를 올바르게 표시하도록 설정합니다. 반응형 웹 디자인을 사용하지 않는 경우 필수입니다.
robots: 검색 엔진이 페이지를 크롤링하고 인덱싱할 수 있는지 여부를 지정합니다.
charset: 블로그 페이지의 문자 인코딩을 지정합니다.
author: 블로그 게시글의 작성자를 지정합니다.
og:title: Facebook 등 소셜 미디어 플랫폼에서 공유될 때 표시되는 제목을 지정합니다.
og:description: Facebook 등 소셜 미디어 플랫폼에서 공유될 때 표시되는 설명을 제공합니다.
og:image: Facebook 등 소셜 미디어 플랫폼에서 공유될 때 표시되는 이미지를 지정합니다.
twitter:title: Twitter에서 공유될 때 표시되는 제목을 지정합니다.
twitter:description: Twitter에서 공유될 때 표시되는 설명을 제공합니다.
twitter:image: Twitter에서 공유될 때 표시되는 이미지를 지정합니다.

2. 실제 사용 예시:

다음은 블로그 head 메타 태그의 실제 사용 예시입니다.

HTML
<head>
  <title> 블로그 제목 - 블로그 이름 </title>
  <meta name="description" content="블로그 간략 설명">
  <meta name="keywords" content="블로그, 키워드 1, 키워드 2">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="robots" content="index,follow">
  <meta charset="UTF-8">
  <meta name="author" content="블로그 작성자 이름">

  <meta property="og:title" content="Facebook 공유 제목">
  <meta property="og:description" content="Facebook 공유 설명">
  <meta property="og:image" content="https://example.com/image.jpg">

  <meta name="twitter:title" content="Twitter 공유 제목">
  <meta name="twitter:description" content="Twitter 공유 설명">
  <meta name="twitter:image" content="https://example.com/image.jpg">
</head>