본문으로 건너뛰기

HTML 메타태그 기초 가이드, SEO와 소셜 공유를 위한 필수 태그

조회수 411 게시일 2008.07.23 2주 전 수정

메타태그는 웹 페이지의 정보를 정의하는 중요한 HTML 요소입니다. SEO, 반응형 웹, SNS 공유 설정에 자주 사용하는 메타태그를 정리했습니다. 자주 사용하는 메타태그, 페이지 자동 이동 등을 다룹니다.

메타태그(Meta Tags)는 HTML 문서의 헤더 부분에 포함되는 태그로, 웹 페이지의 메타데이터(metadata)를 정의하는 데 사용됩니다. 메타데이터는 웹 페이지의 정보를 설명하고 검색 엔진이나 브라우저 등에서 활용될 수 있는 데이터입니다. 때문에 메타태그는 웹 페이지의 검색 엔진 최적화(SEO)나 소셜 미디어 공유 등에서 직접 영향을 줍니다.

자주 사용하는 메타태그

<meta charset="UTF-8">
<!-- 문서의 문자 인코딩을 설정합니다. -->

<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 반응형 웹 디자인을 위해 화면의 너비와 초기 확대/축소 비율을 설정합니다. -->

<meta name="description" content="웹 페이지에 대한 간단한 설명">
<!-- 페이지에 대한 간단한 설명을 지정합니다. 검색 엔진은 이 설명을 검색 결과에 표시합니다. -->

<meta name="keywords" content="키워드1, 키워드2, 키워드3, ...">
<!-- 페이지와 관련된 키워드들을 지정합니다. -->

<meta name="author" content="작성자 이름">
<!-- 작성자의 이름을 지정합니다. -->

<meta name="robots" content="index, follow">
<!-- 검색 엔진이 페이지를 색인하고 링크를 따라가도록 허용합니다. -->

<meta name="og:title" content="공유 제목">
<!-- 소셜 미디어에서 페이지를 공유할 때 나타날 제목을 지정합니다. -->

<meta name="og:image" content="이미지 URL">
<!-- 소셜 미디어에서 페이지를 공유할 때 나타날 이미지를 지정합니다. -->

<meta name="og:description" content="공유 설명">
<!-- 소셜 미디어에서 페이지를 공유할 때 나타날 설명을 지정합니다. -->

페이지 자동 이동

정해진 시간 후에 특정 사이트나 페이지로 자동 이동하는 메타태그입니다.

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="refresh" content="0; url=https://ppcle.com">
    <!-- content 항목의 숫자는 초단위이며 url에는 이동하려는 주소를 적어주세요 -->
    <title>피클웹</title>
</head>
<body></body>
</html>

제작·운영 상담이
필요하시면

이 글과 맞는 범위·일정을 함께 정리해 드립니다.