검색등록
네이버 구글에 검색이 잘되게 하는 기본 조건 메타(meta) 태그는?
검색엔진 등록에 기본이 되는 메타 태그에 대해 알아보려고 합니다. 검색엔진은 수집 로봇이라는 프로그램을 통해 웹사이트에 접속하여 필요한 정보를 수집하고 데이터베이스로 변환하여 사용자가에 노출이 되도록 하는 방식입니다. 구글의 경우는 Googlebot 이라고 명시하고 있으며 네이버는 Yati 라는 이름의 수집 프로그램을 사용합니다.
등록하지 않아도 사용자들이 공유하거나 여러 곳에 링크가 있다면 검색 로봇은 등록되지 않은 사이트도 자동 추가 해주기도 합니다. 그렇지만 실제 사용자가 찾고자 하는 키워드나 회사 이름이 아니라 잘못된 정보로 등록되는 경우가 많아 검색 등록이라는 절차를 통해 정확하게 검색엔진에 제공하는 게 좋습니다.
태그는 무엇인가요?
우리가 인터넷에서 네이버나 구글과 같은 웹사이트를 볼 수 있는 것은 브라우저가 메타 태그를 해석하여 화면에 표시 해 주기 때문입니다. HTML (Hyper Text Markup Language) 약자로 지정된 태그를 통한 여러가지 구성으로 화면을 구성해주는 규칙 입니다. 태그의 특징으로는 < 태그로 시작하여 > 태그로 종료되게 되어 있습니다. 간단한 예제는 아래를 참고할 수 있습니다. 여기에서 < 태그로 시작하고 !-- 부분은 주석으로 -- > 해당 부분은 무시되게 태그를 작성하는 제작자에게 참고가 되는 문구가 됩니다.
<!--붉은색 텍스트--> <font color="red">메타 태그</font> <!--버튼--> <button type="button">버튼</button> <!--이미지 표시--> <img src="경로">
이와 같은 형식으로 이미지, 색상, 버튼, 링크, 사이즈, 테이블 등을 구성할 수 있는 기본이 됩니다.
메타 태그는 어떤 역할을 하나요?
홈페이지나 웹사이트에 대한 기본적인 사항을 기입하는 게 메타 태그라고 이해할 수 있습니다. 검색엔진이 웹사이트를 수집할 때 자동으로 분석하여 수집하면 좋겠지만 표준이 없다 보면 어떤 부분이 사이트 제목이며 키워드인지 알 수가 없게 됩니다. 이런 문제를 해결하기 위해 검색 로봇이 쉽게 수집할 수 있도록 태그 상단에 meta라고 시작하는 태그에 전달하고 싶은 규칙을 지정하게 됩니다. 불필요한 정보를 줄이고 검색엔진 최적화에 도움이 되기 위해서는 검색엔진 가이드라인에 맞는 메타 태그 작성이 필요합니다. SEO의 기본이 될 있는 메타 태그는 title, description 제목과 설명을 기본으로 하며 그 외에 og로 시작하는 Open Graph라고 하는 공유 규칙도 설정할 수 있습니다.
메타 태그 이름에 대한 가이드라인
여기에서는 네이버로 검색했을 때 기준으로 안내하겠습니다. 여기서 설명하고 있지 않은 서브 메뉴와 채널의 경우에는 네이버에서만 사용하는 방식으로 다음에 설명하도록 하겠습니다.
meta robots
robots.txt에서도 설치할 수 있지만 메타 태그에서도 첫 화면을 수집 여부를 지정할 수 있습니다. 홈페이지를 제작 중 이거나 임시 도메인 또는 검색엔진에 노출이 되지 않길 원하는 경우에는 수집이 불가능하도록 지정할 수 있습니다.
<!--수집허용--> <meta name="robots" content="index, follow">
<!--수집불가--> <meta name="robots" content="noindex">
<!--첫 화면과 링크 수집거부--> <meta name="robots" content="noindex, nofollow" />
<!--구글 클로러만 수집거부--> <meta name="googlebot" content="noindex">
title 태그
가장 기본이 되는 태그로 없어서 안되며 첫 화면에서는 사이트 제목을 표시하며 서브 페이지에서는 사이트 제목 구분자 페이지 제목과 같은 규칙을 통해 중복되지 않도록 하는 게 좋습니다.
<title>오픈메이크</title>
auther 태그
제작자나 작가 이름을 지정하는 부분으로 실제 검색 수집에서는 사용되지 않기에 필수 사항은 아닙니다.
description 태그
타이틀 태그 다음으로 중요한 부분으로 웹사이트에서 관련이 되는 키워드 나열로 사용하여 검색에 노출되도록 합니다. 서술식이나 브랜드를 알리는 슬로건도 나쁘지는 않지만 해당 문구로는 사용자 유입을 기대하기 어렵습니다.
<meta name="description" content="웹 프로그램 개발, 홈페이지 제작, 웹사이트 구축, 렌딩페이지 서비스, 소프트웨어 유지보수">
keywords 태그
다른 검색엔진에서는 사용하지 않지만 구글에서는 오래전부터 사용하는 방식으로 사이트와 관련된 키워드를 제출하도록 되어 있습니다.
<meta name="keywords" content="웹 프로그램 개발, 홈페이지 제작, 웹사이트 구축, 렌딩페이지 서비스, 소프트웨어 유지보수">
og 태그
스마트폰과 스마트 기기들이 생겨나고 소셜 미디어에서 공유하기 쉽도록 만들어진 규칙 입니다. 공유할 때 타이틀, url, 설명문구, 공유 이미지를 지정하여 해당 정보를 통해 섬네일과 함께 카드 모양으로 표시되도록 전달이 되게 됩니다.
<meta property="og:title" content="오픈메이크">
<meta property="og:url" content="http://www.opm.kr">
<meta property="og:type" content="website">
<meta property="og:description" content="웹 프로그램 개발, 홈페이지 제작, 웹사이트 구축, 렌딩페이지 서비스, 소프트웨어 유지보수">
<meta property="og:site_name" content="오픈메이크">
<meta property="og:image" content="https://www.opm.kr//image/logo/opm.webp">
twitter 태그
필수 사항은 아니지만 트위터 사이트만 별도로 지정할 수 있습니다.
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="오픈메이크">
<meta name="twitter:description" content="웹 프로그램 개발, 홈페이지 제작, 웹사이트 구축, 렌딩페이지 서비스, 소프트웨어 유지보수">
<meta name="twitter:image" content="https://www.opm.kr/image/logo/opm.webp">
canonical 태그
사이트에서 사용하게 되는 대표 도메인을 지정하는 부분입니다.
<link rel="canonical" href="http://www.opm.kr">
shortcut icon 태그
크롬이나 엣지와 같은 브라우저 상단에 아이콘으로 사용되기도 하며 파비콘이라고 하여 검색엔진에서 사이트를 검색할 때 앞에 표시되는 아이콘으로도 사용 됩니다. 이미지가 작게 표시되므로 단순하고 작은 이미지를 추천합니다.
<link rel="shortcut icon" href="https://www.opm.kr/image/logo/opm.webp">
검색 엔진 등록에 가장 기본이 되는 메타 태그에 대해 소개 해 드렸습니다. 정해진 규칙이 있기에 시작 태그와 종료 태그가 틀리지 않게 작성하는 게 중요합니다. 잘못된 메타 태그를 작성하는 경우 검색엔진에서 삭제되거나 전혀 검색이 되지 않을 수 있습니다.
추가 메타 태그 설명
위에서 설명한 태그는 대부분 필수이기에 반드시 들어가야 좋습니다. 해당 태그 이외에도 아래와 같이 다양한 태그도 지원하고 있지만 필수 사항이 아닌 부분도 있으므로 용도에 따라 활용할 수 있습니다.
| meta tag | 기능 및 설명 |
| keywords | 구글 검색엔진에 의해 검색되는 키워드 나열 |
| robots | robots.txt 설정하지 않고도 메타 태그에서 수집 여부 결정 |
| date | 제작 일자를 기입할 수 있습니다. |
| location | 위치를 지정합니다. |
| copyright | 저작권에 대한 부분을 지정합니다. |
| charset | 문자 인코딩 방식으로 최근에는 다국어 표현을 위해 utf-8을 사용합니다. |
| Generator | 제작 도구를 표시하며 에디터 사용 시 자동으로 들어가기도 합니다. |
| Distribution | 배포자를 표기합니다. |
| Refresh | 페이지 새로 고침이 되는 주기와 전환 시점 |
관련 문서를 통해서도 추가 정보를 확인할 수 있습니다.
오픈메이크 사이트의 메타 태그 예시
오픈메이크 태그를 참고하여 작성하셔도 되며 브라우저에서 단축키 Ctrl + U를 누르면 소스 보기를 할 수 있습니다.
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="robots" content="index, follow"> <title>오픈메이크</title> <meta name="Subject" content="오픈메이크"> <meta name="title" content="오픈메이크"> <meta name="author" content="http://www.opm.kr"> <meta name="description" content="웹 프로그램 개발, 홈페이지 제작, 웹사이트 구축, 렌딩페이지 서비스, 소프트웨어 유지보수"> <meta name="keywords" content="웹 프로그램 개발, 홈페이지 제작, 웹사이트 구축, 렌딩페이지 서비스, 소프트웨어 유지보수"> <meta property="og:title" content="오픈메이크"> <meta property="og:url" content="http://www.opm.kr"> <meta property="og:type" content="website"> <meta property="og:description" content="웹 프로그램 개발, 홈페이지 제작, 웹사이트 구축, 렌딩페이지 서비스, 소프트웨어 유지보수"> <meta property="og:site_name" content="오픈메이크"> <meta property="og:image" content="https://www.opm.kr//image/logo/opm.webp"> <meta name="twitter:card" content="summary"> <meta name="twitter:title" content="오픈메이크"> <meta name="twitter:description" content="웹 프로그램 개발, 홈페이지 제작, 웹사이트 구축, 렌딩페이지 서비스, 소프트웨어 유지보수"> <meta name="twitter:image" content="https://www.opm.kr//image/logo/opm.webp"> <link rel="canonical" href="http://www.opm.kr"> <link rel="shortcut icon" href="https://www.opm.kr//image/logo/opm.webp"> <link rel="apple-touch-icon-precomposed" href="https://www.opm.kr/image/logo/opm.webp"> 하단 생략
검색엔진최적화에 기본이 되는 메타 태그에 대한 설명과 함께 사용 방법을 안내 해 드렸습니다. 사이트를 개편하거나 수정으로 인해 태그가 없어지거나 잘못된 경우가 있어 검색에 노출되지 않는 문제가 발생할 수 있기에 해당 정보를 이해하고 관리하는 게 좋습니다.
