<title>
요소<title>
요소는 검색 결과창에서 제목에 해당하는 요소로, <head>
요소의 자식 요소로 작성한다. 검색 엔진에서 검색 후 이 제목만 살펴보면서 어떤 페이지에 들어가 볼지 결정하는 경우가 많다. 이처럼 제목은 검색 결과에서 상당히 중요한 역할을 한다.<title>
요소에 어떤 내용을 작성하는가에 따라서 검색 후 유입까지 유도할 수 있다.<title>
요소에 핵심 키워드가 포함되면 상위에 노출될 확률이 높아진다.<meta>
요소<meta>
요소는 메타 데이터를 담는 요소이다. 메타 데이터란 해당 웹 사이트에서 다루고 있는 데이터가 무엇인지에 대한 데이터이다. <meta>
요소도 <head>
요소의 자식 요소로 작성해 주는 것이 일반적이다.<meta>
요소 안에 들어있는 내용이다. 해당 웹 페이지가 어떤 데이터를 다루고 있는지를 설명하는 메타 데이터가 들어있음을 알 수 있다.<meta>
요소에 들어가는 내용은 검색 결과창에서만 확인할 수 있는 것이 아니다. 소셜 미디어나 채팅 애플리케이션에서 링크를 공유했을 때 뜨는 링크 미리보기와 관련 정보도 이 <meta>
요소에 들어가 있는 내용이다.<meta>
요소를 사용하지만, 각각의 목적은 엄연히 다르다.name
속성을 사용하며, SEO를 위해서 사용하는 것이 목적이다.property
속성을 사용하며, 다른 사람에게 공유하기 위한 것이 목적이다. 특히 property
속성을 사용하는 경우는 오픈 그래프(Open Graph)라고 하며, 페이스북(현 Meta)에서 게시물을 공유하기 위한 목적으로 만들었으며, 각 속성값 앞에는 오픈 그래프를 뜻하는 “og”가 붙는다.<meta name="속성값" content="내용" />
주요 속성값은 다음과 같다.
name 속성값 | 설명 |
---|---|
description | 콘텐츠에 대한 간략한 설명입니다. 검색 결과에서 제목 밑에 뜨는 내용을 생각하시면 됩니다. |
keywords | 웹 페이지의 관련 키워드들을 나열할 때 사용합니다. |
author | 콘텐츠의 제작자를 표시합니다. |
<meta property="속성값" content="내용" />
주요 속성값은 다음과 같다.
property 속성값 | 설명 |
---|---|
og:url | 페이지의 표준 URL입니다. |
og:site_name | 사이트의 이름입니다. |
og:title | 콘텐츠의 제목입니다. |
og:description | 콘텐츠에 대한 간략할 설명입니다. 검색 결과에서 제목 밑에 뜨는 내용을 생각하시면 됩니다. |
og:image | 미리보기로 표시될 이미지입니다. |
og:type | 콘텐츠 미디어의 유형입니다. 기본 값은 website로, video, music 등의 유형을 표시할 수 있습니다. |
og:locale | 리소스의 언어로, 기본값은 en_US입니다. 한국은 ko_KR입니다. |
name
속성을 사용하는 <meta>
요소에 더 중점을 두되, 오픈 그래프도 잘 작성해 주는 것이 좋다.<hgroup>
요소<hgroup>
요소는 콘텐츠의 제목을 표시하는 용도인만큼 핵심 키워드를 포함하고 있을 가능성이 높다. 따라서 검색 엔진도 <hgroup>
요소의 내용을 중요하게 취급한다. 그렇기 때문에 콘텐츠를 작성할 때 핵심 키워드를 의식해서 <hgroup>
요소에 넣어주는 것도 SEO에 도움이 된다.alt
속성을 사용하여 해당 이미지에 대한 설명을 텍스트로 작성하는 것이 좋다. 하지만 이 역시 너무 길게 작성하면 스팸 요소로 인식할 수 있으니 꼭 필요한 설명만 작성하는 것이 좋다.(O) <img src="코드스테이츠_로고.png" alt="코드스테이츠 로고" />
(X) <img src="코드스테이츠_로고.png" alt="프론트엔드 백엔드 블록체인 프로덕트매니지먼트 인공지능 데브옵스 등 다양한 커리어 전환 부트캠프를 진행하는 코드스테이츠 로고" />
이 외에도 SEO에 영향을 주는 요소는 굉장히 많다. 궁금하다면 다음 레퍼런스에서 확인해보자.