00님, 저희 페이지 검색해도 안 나오는데요?[4] (meta tag 작성하는 법)

이번 주제는 meta tag입니다.
작성법부터 주의사항까지 실전에서 사용할 수 있을 정도로 알아봅시다.

meta tag의 특성

html의 <head></head> 안에 위치합니다.
웹 페이지의 정보를 사용자나 로봇에게 알립니다.
웹페이지의 제목, 설명, 키워드, 작성자, 언어, 캐시 제어 등의 메타데이터를 정의합니다.

meta tag 작성법

<head>
    <!-- meta -->
    <meta name="title" content="BellRiver">
    <meta name="subject" content="BellRiver Main Page"/>
    <meta name="author" content="BellRiver"/>
    <meta name="Copyright" content="BellRiver">
    <meta name="Publisher" content="BellRiver">
    <meta http-equiv="Distribution" content="BellRiver">
    <!-- <meta http-equiv="Other Agent" content="BellRiver" /> -->
    <meta name="description" content="안녕하세요. 개인 공부/기록/개발/블로그 용 사이트입니다">
    <meta name="Keywords" content="웹, 웹사이트, 사이트, 개발, 공부, 블로그, 기록, 포트폴리오, BellRiver, bellriver">
    <meta name="Location" content="ko_KR">

    <!-- email -->
    <meta http-equiv="Reply-To" content="email@gmail.com" />
    <meta http-equiv="Email" content ="email@gmail.com" />

    <!-- meta og -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta property="og:type" content="website">
    <meta property="og:url" content="https://bellriver.co.kr">
    <meta property="og:title" content="BellRiver">
    <meta property="og:image" content="/img/public/bellriver_ico.png">
    <meta property="og:description" content="안녕하세요. 개인 공부/기록/개발/블로그 용 사이트입니다.">
    <meta property="og:site_name" content="BellRiver">
    <meta property="og:locale" content="ko_KR">
    <!-- 미리보기 이미지, 필요 없을 시 삭제 -->
    <!-- <meta property="og:image:width" content="1200">
    <meta property="og:image:height" content="630"> -->

    <!-- meta twitter -->
    <meta name="twitter:card" content="website" />
    <meta name="twitter:site" content="BellRiver" />
    <meta name="twitter:title" content="BellRiver" />
    <meta name="twitter:description" content="안녕하세요. 개인 공부/기록/개발/블로그 용 사이트입니다." />
    <meta name="twitter:creator" content="BellRiver" />
    <meta name="twitter:image" content="/img/public/bellriver_ico.png" />
    <meta name="twitter:domain" content="https://bellriver.co.kr">
    
    <!-- link canonical -->
    <link rel="canonical" href="https://bellriver.co.kr">

    <!-- icon -->
    <link rel="icon" href="/favicon.ico"/>
</head>

위 코드를 복사한 후 상황에 맞게 수정하시면 됩니다.

대부분의 코드들은 meta tag의 name 속성을 참고하시면 됩니다.
여기서 중요하다고 생각되는 태그들의 설명을 도와드리겠습니다.

meta name="title"

이 title은 탭의 이름으로 나오는 제목입니다.

meta name="description"

이 태그는 페이지의 간단한 설명을 제공합니다.
검색 결과에서 페이지 제목 아래에 표시되는 텍스트로 사용됩니다.
검색 시 나오는 설명글이기 때문에 무척 중요합니다.

meta name="keywords"

페이지와 관련된 주요 키워드입니다.
예전에는 검색 엔진 최적화에 큰 영향을 미쳤지만, 현재 구글 등 주요 검색 엔진에서는 더 이상 이 태그를 랭킹 신호로 사용하지 않습니다.
영향력이 미미하므로 필수적이지는 않지만, 여전히 다른 검색 엔진이나 특수 목적으로 사용할 수 있습니다.

meta name="viewport"

페이지가 다양한 장치에서 어떻게 보일 지를 제어합니다.
반응형 웹 디자인을 구현할 때 중요하며, 특히 모바일 장치에서의 사용자 경험을 개선합니다.
일반적으로 모바일에 최적화되지 않은 사이트를 좁은 스크린 장치에서 더 잘 보이도록 하는 방법입니다.
웹 페이지의 반응형을 위해 꼭 작성해줘야 하는 태그입니다.
만약 적응형으로 하신다면 PC 페이지에서는 작성하지 않아도 됩니다.
PC보다 모바일의 픽셀이 더 빽빽해서 벌어지는 현상입니다.

meta og(open graph), meta twitter

이 코드는 SNS들을 위한 코드입니다.
사이트 링크를 복사한 후 카톡이나 다른 SNS로 상대방에게 공유할 경우 미리보 이미지와 함께 표시되곤 합니다.
이 역할을 해주는 것이 og 코드의 역할이며 SNS에서 검색할 때 상위에 노출될 수 있도록 도와주는 역할을 합니다.
사이트 링크 공유 시 설정 이미지가 보입니다!

link rel="canonical"

canonical은 표준 URL 설정을 위해 필요한 태그입니다.
비슷한 페이지를 서치 로봇들은 중복 페이지로 간주합니다.
이렇게 canonical을 설정해 두면 설정한 하나의 페이지를 표준으로 간주하여 다른 페이지의 크롤링 빈도를 줄입니다.

참고 문헌:

Google에서 지원하는 메타 태그 및 속성 | Google 검색 센터 | 문서 | Google for Developers

Google은 페이지 수준 메타 태그와 태그 속성 둘 다 지원합니다. Google 검색에서 지원할 수 있는 특수 태그의 목록을 살펴보세요.

developers.google.com

Google에서는 웹 순위에서 키워드 메타 태그를 사용하지 않습니다 | Google 검색 센터 블로그 |

2008년에

developers.google.com

Viewport meta tag - HTML: Hypertext Markup Language | MDN

이 문서에서는 "viewport" <meta> 태그를 사용하여 뷰포트의 크기와 모양을 제어하는 방법에 대해 설명합니다.

developer.mozilla.org

728x90