메타태그로 검색 친화적인 홈페이지 만들기

7 개월 전 1,916

메타태그(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>

한글 맞춤법과 문법 검사기 모음

부산대학교 한국어 맞춤법/문법 검사기를 비롯하여 네이버, 다음, 인크..

홈페이지 이미지 사이즈, 해상도 그리고 비율

웹 이미지를 제작할 때 고려해야 할 중요한 요소는 이미지의 사이즈, ..

로렘 입숨과 한글 로렘 입숨, 웹 디자인 추천 도구

로렘 입숨, Lorem Ipsum은 일종의 더미 텍스트(dummy t..

IP 주소 및 도메인 정보 조회, WHOIS 검색.

원하는 도메인을 사용할 수 있는지, 웹사이트를 누가 소유하고 있는지,..

웹사이트 디자인을 완성하는 웹폰트와 무료 폰트

홈페이지나 쇼핑몰 제작 시 꼭 필요한 무료 폰트, 웹폰트를 소개합니..

웹디자인 참고 사이트와 홈페이지 제작업체 순위

굿디자인웹, 디비컷, 카페24 디자인센터, 비핸스 Behance, 월..