SEO(2) - meta 태그와 title 태그
📌시작하며
이전 포스팅에서 seo의 종류에 대해 알아봤는데, 이번 포스팅에서는 On-site SEO에서 meta 태그에 대해 알아보고자 한다.
이 글은 아래와 같이 이어집니다.
✅title태그
1
2
3
4
5
6
7
<!DOCTYPE html>
<html>
<head>
<title>문서의 제목</title>
</head>
<body></body>
</html>
<title>은 문서의 제목을 정의하며, 브라우저의 제목 표시줄이나 페이지 탭에 표시 된다.
SEO에 매우 중요한 역할을 하는데, 검색 엔진 알고리즘에서 검색 결과와 페이지 나열시 순서를 결정하는데 사용되기 때문이다.
즉, 제목 작성시에는 키워드를 넣어 최대한 정확하고 의미있게 만드는 것이 중요하다.
✅meta태그
<meta> 태그는 <head>태그 안에 작성되며, HTML 문서에 대한 메타데이터를 정의한다. 페이지에 표시되는 내용은 아니지만, 기계(크롤러)들은 이 내용을 인식할 수 있어 브라우저, 검색 엔진, 기타 웹 서비스에서 사용 된다.
➡️기본적인 meta태그
💟description
웹 페이지 설명을 작성한다. 작성 된 내용은 검색 결좌 페이지에서 페이지 요약 내용으로 사용 된다.
1
<meta name="description" content="웹 페이지에 대한 설명" />
💟keywords
웹 페이지와 관련된 키워드를 나타낸다. 검색 엔진이 색인 할 때 사용 된다.
1
<meta name="keywords" content="키워드1, 키워드2, 키워드3" />
💟author
웹 페이지의 저자를 작성한다.
1
<meta name="author" content="저자명" />
💟viewport
반응형 웹 디자인에서 브라우저에 페이지의 크기와 배율을 제어하는 방식에 대한 지침을 제공한다.
1
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
width=device-width 는 페이지의 너비가 기기의 화면 너비를 따르도록 설정한다. initial-scale=1.0은 브라우저에서 페이지를 처음 로드할 때 초기 확대/축소 수준을 설정한다.
✅오픈 그래프(Open Graph)
오픈 그래프는 페이스북과 같은 소셜 미디어 플랫폼에서 웹 페이지를 공유할 때 사용되는 메타 태그다. 웹 페이지의 제목, 설명, 이미지 등을 정의하여 보다 눈에 띄는 링크 프리뷰를 만들어줄 수 있다. (카카오톡으로 링크를 공유했을 때 표시 되는 썸네일을 생각해보자!)
➡️property
오픈 그래프의 기본적인 property는 다음과 같다. | property | 설명 | | ————– | ———————————————————————————————- | | og:title | 웹 페이지의 제목을 정의한다. | | og:description | 웹 페이지의 간단한 설명을 작성한다. | | og:image | 웹 페이지와 관련된 이미지를 지정하며, 이 이미지가 링크 공유시 프리뷰에 표시된다. | | og:url | 웹 페이지의 URL을 정의한다.| | og:type | 컨텐츠의 유형을 정의한다. 웹 페이지의 종류를 나타내는데 사용된다. |
1
2
3
4
5
<meta property="og:title" content="웹 페이지 제목" />
<meta property="og:description" content="웹 페이지 설명" />
<meta property="og:image" content="이미지_URL" />
<meta property="og:url" content="웹 페이지_URL" />
<meta property="og:type" content="페이지의 유형" />
➡️type 유형
1
<meta property="og:type" content="페이지의 유형" />
의 type을 지정해 해당 웹 페이지가 나타내는 콘텐츠 유형을 나타낼 수 있다. 대표적인 유형은 다음과 같다. | og:type | 설명 | |————-|—————————————————————————| | website | 웹 사이트나 웹 페이지| | article | 기사나 뉴스 기사 | | book | 책에 대한 정보 | | music | 음악에 대한 정보 | | video | 비디오에 대한 정보 | | profile | 개인 프로필에 대한 정보 | | product | 제품에 대한 정보 |
✅트위터 카드
트위터 카드(Twitter Card)는 트위터에서 링크를 공유할 때 보다 풍부한 프리뷰를 생성하기 위해 사용되는 메타 데이터다. 트위터 카드를 사용하면 링크를 공유할 때 해당 웹 페이지의 제목, 설명, 이미지 등이 트위터 피드에 더 잘 표시되고 사용자들이 링크를 클릭하기 전에 페이지의 내용을 미리 볼 수 있다.
➡️name
트위터 카드에 주로 사용 되는 name 속성은 다음과 같다. 카드 유형에 따라 작성되는 내용에 차이가 있으므로, 공식 문서를 참조하며 작성하는게 좋을 것 같다. | name | 설명 | | ——————- | ————————————————– | | twitter:card | 트위터 카드의 유형을 지정한다. | | twitter:title | 웹 페이지의 제목을 정의한다. | | twitter:site | 웹 페이지 저작자인 트위터 사용자(계정)를 나타낸다. | | twitter:description | 웹 페이지의 간단한 설명을 작성한다. | | twitter:image | 웹 페이지와 관련된 이미지의 URL을 작성한다. |
1
2
3
4
5
<meta name="twitter:card" content="summary" />
<meta name="twitter:title" content="웹 페이지 제목" />
<meta name="twitter:site" content="@웹 페이지를 저작자인 트위터 사용자" />
<meta name="twitter:description" content="웹 페이지 설명" />
<meta name="twitter:image" content="이미지_URL" />
➡️트위터 카드 유형
트위터 카드는 다양한 유형이 존재하며, 이를 통해 트위터의 웹 및 모바일 클라이언트들 각각의 더 나은 사용자 경험을 제공한다. | 카드 유형 | 설명 | |————————————|—————————————————————————-| | Summary Card | 제목, 설명, 이미지를 표시하는 기본 형태 | | Summary Card with Large Image | 대표 이미지가 크게 표시된다. | | App Card | 모바일 애플리케이션을 표현하고 설치를 유도한다.
이름, 설명, 아이콘, 평점 및 가격과 같은 속성을 강조할 수 있다. | | Player Card | 동영상이나 오디오 파일을 플레이할 수 있는 링크를 표시하는 카드 유형이다. |
✅캐노니컬 태그
<canonical>은 중복되거나 유사한 콘텐츠가 여러 개의 URL에서 접근 가능할 때, 검색 엔진이 어떤 페이지를 원본으로 인식해야 하는지 알려준다.
예를 들어, www.example.com과 www.example.com#anchor 두 링크가 있다고 생각해보자. 동일한 페이지지만, 크롤러는 URL에 포함된 anchor로 인해 다른 URL로 인식할 수 있기때문에, <canonical>을 이용해 페이지의 주요 URL을 명확히 지정해주게 된다.
1
<link rel="canonical" href="원본 페이지 URL" />
여기 href에 주요 URL을 작성해주면 된다. 이를 통해 검색엔진은 중복 컨텐츠 문제를 피하고, 주요한 페이지를 올바르게 색인할 수 있다.
🗂️참고 사이트
- https://www.w3schools.com/tags/tag_title.asp
- https://www.w3schools.com/tags/tag_meta.asp
- https://ogp.me/
- https://developer.twitter.com/en/docs/twitter-for-websites/cards/overview/abouts-cards
- https://developer.twitter.com/en/docs/twitter-for-websites/cards/overview/summary
- https://en.wikipedia.org/wiki/Canonical_link_element