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

3 개월 전 1,600

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

홈페이지 제작 기간은 보통 얼마나 걸리나요?

홈페이지, 쇼핑몰 등 웹사이트 제작에 걸리는 기간은 짧게는 며칠에서 ..

홈페이지, 웹사이트 디자인 사이즈

현재 인터넷 이용자의 미디어 해상도를 고려했을 때 적절한 홈페이지 가..

웹 호스팅 선택 기준과 비용, 추천 업체

웹 호스팅은 홈페이지나 쇼핑몰을 운영하기 위해 꼭 필요한 웹 서버를 ..

그누보드, 워드프레스, 제로보드 등 편리한 웹사이트 제…

홈페이지, 쇼핑몰, 커뮤니티 제작 시 비용과 시간을 줄이고 편리하게 ..

디비컷, 추천 웹에이전시와 웹디자인 참고 사이트

웹디자이너 커뮤니티 '디비컷'과 카페24 디자인센터, 아카데미 정글,..

웹 호스팅, 웹 서버 관리 방법

전문적인 호스팅 업체를 이용할 경우 데이터와 DB의 백업이 매일 새벽..