왜 내가 만든 홈페이지가 검색이 잘 안될까?
메타 태그는 웹브라우저 및 검색 엔진이 페이지를 검색할 수 있도록 도와주는 HTML 페이지 요약본입니다. 내가 만든 페이지가 검색엔진을 통해 제대로 노출 될 수 있도록 하는 기본 요소라고 할 수 있습니다. 페이지에 관한 중요한 정보들을 HTML 제작자가 검색이 용이하게끔 설정하여 적절한 검색어에 맞게 우리 사이트가 노출될수 있도록 할 수 있는 아주 중요한 태그입니다. <meta> 에 SEO와 관련된 속성에는 아래와 같은 요소들이 있습니다. 지금부터 하나하나씩 확인해 보도록하겠습니다.
네이버는 어떻게 되어있을까?
일단 설명을 돕기 위해 우리나라와 가장 친숙한 네이버를 구글에 검색해 보았습니다. 윈도우의 경우 F12 키를 눌러 개발자 도구를 활성화 시키면 <head></head>태그 사이에 들어가 있는 <meta>태그를 쉽게 확인해 볼수 있습니다. 보라색 네모안에 <title> 태그가 링크 타이틀로, <meta name="descripation">이 그 아래 설명글로 적혀져 있습니다.
| 기본 | |
| <meta name="description" content="A description of the page"> | ✔ 간단한 페이지 설명을 제공. ✔ 구글의 검색결과에 표시되는 스니펫에 사용되기도함. ✔ 문장형식으로 작성하지 않아도 되며, 페이지에 관한 정보의 중요한 정보들만 모아 하나의 데이터로 제공하는 것이 유용한 메타 설명이다. ✔ 우수한 메타 예시 <meta name="description" content="저자: AN 작가, 일러스트레이터: V.Gogh, 가격: 19.99달러, 페이지수: 784"> |
| <meta name="robots" content="..., ..."> | ✔ index, follow: 색인 허용, 링크 수집 허용 ✔ noindex, follow: 색인 비허용, 링크수집 허용 ✔ index, nofollow: 색인 허용, 링크 수집 비허용 ✔ noindex, nofollow: 색인 비허용, 링크 수집 비허용 |
| <meta name="keywords" content="이곳, 검색어, 나열" | 이제는 중요한 요소는 아니지만 검색될 단어를 반복되지 않게 작성해줍니다. |
| <meta name="title" content="안녕디자이너" | 사이트로 직접 연결되는 링크형태 공백을 포함하여 10~70글자를 작성 (구글은 최대 70글자 노출) |
| 소셜미디어용<오픈 그래프 태그> | |
| <meta property="og:type" content="website"> | |
| <meta property="og:title" content="페이지 제목"> | |
| <meta property="og:description" content="페이지 설명"> | |
| <meta property="og:image" content="http://......jpg"> | ✔ 가로 세로 비율은 1.91:1( 1200 X 630 px) ✔ 8MB 이하 |
| <meta property="og:url" content="https://hidesigner.tistory.com/" | |
| 소셜 미디어 부가 정보 | |
| <meta name="twitter:card" content="summary"> | |
| <meta name="twitter:title" content="페이지 제목"> | |
| <meta name="twitter:description" content="페이지 설명"> | |
| <meta name="twitter:image" content="https://hidesigner.tistory.com/"> | |
| <meta name="twitter:domain" content="안녕디자이너" | |
<meta>이제 그렇게 중요하지 않다고 하던데..
<meta> 에서 keyword속성은 스팸성으로 전락해버려 검색 엔진에서 순위를 결정할 만큼 중요한 요소는 아니게 되었다고합니다. 하지만 "안쓰면 허전해서", "안쓰는것 보단 나을 것 같아서" 의 이유들로 아직도 쓰이고있다고 해요. 그 밖에 요소들은 작성해야하는 필수요소에 가까운 것들이니 놓치지 말고 작성해보도록합시다.
출처 ::
https://developers.google.com/search/docs/appearance/snippet?hl=ko
'알아두면 좋은 디자인 상식' 카테고리의 다른 글
| 시각디자인산업기사 :: 디자인 자료화 > 프로젝트 결과보고서 정리 / 디자인 계약서 및 정산서(표준계약서 자료 첨부) (0) | 2023.02.10 |
|---|---|
| 디자이너가 알면 좋은 개발자 도구 사용 방법 :: 속도, 불필요한 소스, (0) | 2023.01.19 |
| [스터디] 그래픽 디자인 스타일 기법 명칭 알아보기- 01 :: 레트로 퓨처리즘 (0) | 2022.12.08 |
