검색 효율을 높이는 메타 태그 종류 meta tag

웹사이트 제작을 하고 검색엔진에 잘 노출시키기 위해선 메타 태그 ( meta tag ) 를 이용하는 방법이 있다. 이것은 SEO 최적화와 관련이 있고, 네이버부터 구글까지 모든 검색엔진에서 사용한다. 단순히 블로그를 이용하는 것이라면 상관없지만 자신이 웹사이트나 홈페이지가 검색결과에 잘 노출되도록 하려면 신경써야 할 필요가 있다.

메타 태그 ( meta tag )

메타 태그는 html 문서의 head 태그 사이에 위치하며 사용자에게 보여주는 화면의 요약정리본이라 생각할 수 있다.

먼저 사전적 의미를 살펴보자.

meta 란 단어의 사전적 의미는 위치, 상태의 변화와 관련 있음을 나타낸다.

사전적 의미를 살펴봐도 난해하긴 마찬가지

만화책 같은 서적의 표지정보, 길거리 전단지 정보라고 생각해도 된다.

이런 것들이 메타정보 이기도 하다.

이런 메타 정보들이 어떤 것인지 이해하기 쉬운 것이 길거리 전단지, 영화 포스터 등이 있다.

웹페이지를 검색엔진이 SEO를 위해 읽어가는 요약본 정도라고 생각할 수 있지만, 효율적으로 검색엔진 노출을 하기 위해선 메타정보를 잘 꾸밀 필요도 있다.

많이 사용되는 종류

많이 사용되는 메타 태그는 3가지 종류를 가진다.

이 5가지 외에도 더 많은 meta tag 들이 있지만 많이 사용되는 부분은 3가지 이다.

title
웹페이지의 제목을 표시한다.
keyword
웹페이지의 주요 단어들을 표시한다.
description
웹페이지의 설명을 표시한다.
author
웹페이지의 작성자를 표시한다.
copyright
웹페이지의 저작권자 등의 내용을 표시한다.

사용법

메타 태그는 html 문서의 head 태그 사이에 위치한다.

웹페이지의 정보를 요약하고 정리한 내용을 작성하여 검색엔진이 이 웹페이지의 용도와 설명이 무엇인지 파악하도록 도와주는 기능을 한다.

검색결과에는 이 메타태그의 내용이 표시되기 때문에 명확하게 작성해 주는 것이 좋다.

문서의 내용과 관련없는 키워드는 되도록 사용하지 않는 것이 좋다고 한다.

<!-- html5 기본템플릿 -->
<!DOCTYPE html>

    <!-- head -->
    <head>
        
        <!-- meta SEO 컨텐츠 -->
        <meta name="title" content="제목">
        <meta name="description" content="내용">
        <meta name="keywords" content="키워드">
        <meta name="author" content="작성자">
        <meta name="copyright" content="저작권">
        <!-- // -->

        <!-- meta 반응형 웹표준 -->
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <!-- // -->

        <!-- 스타일 -->
        <style></style>
        <!-- // -->

    </head>
    <!-- // -->

    <!-- body -->
    <body></body>
    <!-- // -->

    <!-- 자바스크립트 -->
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
    <!-- // -->

</html>

'programming > web' 카테고리의 다른 글

html 이란 홈페이지 만들기 위한 마크업 언어 (0)	2022.02.03
html 자동 목차 만들기 jquery 플러그인 toc.js 사용 (0)	2021.12.11
구글 SEO 등록과 검색에 유리한 검색노출용 컨텐츠 웹사이트 만들기 (0)	2021.07.08
CSS html 모든 태그 여백 제거 및 초기화 (0)	2021.06.17
html 태그 여백을 두자 margin padding 차이 (0)	2021.06.15