[사용자 친화 웹] SEO

코드스테이즈 41기 교육 내용을 정리하고 있습니다.
틀린 부분이 있으면 댓글로 알려주시면 감사하겠습니다

SEO

Search Engine Optimization읋 검색엔진의 작동 방식에 맞게 웹 페이지를 최적화 해주는 작업입니다.

SEO를 통해 검색엔진에서 웹 페이지를 보다 더 상위에 노출될 수 있게씀 만들 수 있습니다

On-Page-SEO
- 말 그대로 페이지 내부에서 진행할 수 있는 SEO로 제목과 콘텐츠, 핵심 키워드의 배치, 효율적인 HTML요소 사용법 등을 이용한느 방식이다.
Off-Page SEO
- 웹 사이트 외부에서 이루어지는 SEO, 웹 페이지 내용이나 구조와는 관계가 없다
- 광고비를 지불하는 것은 On-Page SEO의 예시다.

SEO에 영향을 미치는 요소

On-Page에서 통제할 수 있는 요소에 대해 알아보겠습니다.

<title>

title요소는 검색 결과창에서 제목에 해당하는 요소로 head요소의 자식 요소로 작성합니다

제목만 보고 페이지에 들어갈지 말지 결정하는 경우가 많기 때문에 제목은 검색결과에서 중요합니다

<title> 요소에 어떤 내용을 작성하는가에 따라서 검색 후 유입까지 유도할 수 있습니다.
- 제목이 너무 길거나 짧아서 사용자가 제목으로 사이트를 파악하기 어려워지면 유입률이 떨어집니다.
<title> 요소에 핵심 키워드가 포함되면 상위에 노출될 확률이 높아집니다.
- 그렇다고 같은 키워드를 반복하면 검색시 불이익을 받을 수 있습니다. 제목에 핵심 키워드는 한 번만 포함시켜 주세요.

<meta>

meta요소는 메타데이터를 담는 요소입니다. 이미지처럼 검색 결과창에서 제목 밑에 따라오는 설명글이 <meta> 요소안에 들어있는 내용입니다. 해당 웹 페이지가 어떤 데이터를 다루고 있는지를 설명하는 메타 데이터가 들어있음을 알 수 있습니다.

meta요소는 각각의 목적에 따라 name속성을 사용하는 경우와 property를 사용하는 경우가 나뉜다. 특히 property 속성을 사용하는 경우는 오픈 그래프(Open Graph) 라고 하며, 페이스북(현 Meta)에서 게시물을 공유하기 위한 목적으로 만들었으며, 각 속성값 앞에는 오픈 그래프를 뜻하는 “og”가 붙습니다.

SEO를 위한 meta 요소

<meta name="속성값" content="내용" />

주요 속성값은 다음과 같습니다.

description	콘텐츠에 대한 간략한 설명입니다. 검색 결과에서 제목 밑에 뜨는 내용을 생각하시면 됩니다.
keywords	웹 페이지의 관련 키워드들을 나열할 때 사용합니다.
author	콘텐츠의 제작자를표시합니다.

오픈 그래프 (open graph)

<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입니다.

실습 (카카오톡으로 링크 공유하며 META의 사용 이해)

링크는 수정이 있을때마다 카카오톡의 공유 디버거에서 캐쉬를 삭제하며 사용했습니다.

https://developers.kakao.com/tool/debugger/sharing

카카오계정 로그인

여기를 눌러 링크를 확인하세요.

accounts.kakao.com

초기상태

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
  </head>
  <body>
    <h1>👆 이 화면의 링크를 복사해서 공유해주세요!</h1>
  </body>
</html>

초기 상태입니다.

title추가

head 태그에 title을 넣어 굥유가 어떤식으로 보이는 지 확인하겠습니다

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Hello</title>
  </head>
  <body>
    <h1>👆 이 화면의 링크를 복사해서 공유해주세요!</h1>
  </body>
</html>

공유 링크에 title생겼습니다.

property title과 description

property를 이용하여 title을 생성하겠습니다

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Hello</title>
    <meta property="og:title" content="마포대교 한강뷰" />
        <meta
      property="og:description"
      content="카페 채그로 식당 바브로"
    />
  </head>
  <body>
    <h1>👆 이 화면의 링크를 복사해서 공유해주세요!</h1>
  </body>
</html>

기존 타이틀은 무시하고 meta의 property가 og:title인 title이 보이게 되며 desdription은 그 아래 옅은 색으로 보입니다.

description의 길이를 길게 해보겠습니다

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Hello</title>
    <meta property="og:title" content="마포대교 한강뷰" />
    <meta
      property="og:description"
      content="카페 채그로 식당 바브로카페 채그로 식당 바브로카페 채그로 식당 바브로카페 채그로 식당 바브로카페 채그로 식당 바브로카페 채그로 식당 바브로카페 채그로 식당 바브로카페 채그로 식당 바브로카페 채그로 식당 바브로"
    />
  </head>
  <body>
    <h1>👆 이 화면의 링크를 복사해서 공유해주세요!</h1>
  </body>
</html>

길이가 수용 범위를 넘어가면 ...으로 처리합니다.

img처리 위치

body에 img src로 이미지를 추가합니다.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Hello</title>
    <meta property="og:title" content="마포대교 한강뷰" />
    <meta
      property="og:description"
      content="카페 채그로 식당 바브로카페 채그로 식당 바브로카페 채그로 식당 바브로카페 채그로 식당 바브로카페 채그로 식당 바브로카페 채그로 식당 바브로카페 채그로 식당 바브로카페 채그로 식당 바브로카페 채그로 식당 바브로"
    />
  </head>
  <body>
    <h1>👆 이 화면의 링크를 복사해서 공유해주세요!</h1>
    <img
      src="https://codestates-photo.s3.ap-northeast-2.amazonaws.com/codestates_logo_thumbnail.jpg"
    />
  </body>
</html>

페이지에 보이는 이미지가 공유할때도 보이는 것을 확인할수 있습니다.

body에 기존 img태그의 이미지는 지우고 meta property og:img로 이미지를 추가하겠습니다

추가한 이미지는 코드스테이츠 이미지 입니다.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Hello</title>
    <meta property="og:title" content="마포대교 한강뷰" />
    <meta
      property="og:description"
      content="카페 채그로 식당 바브로카페 채그로 식당 바브로카페 채그로 식당 바브로카페 채그로 식당 바브로카페 채그로 식당 바브로카페 채그로 식당 바브로카페 채그로 식당 바브로카페 채그로 식당 바브로카페 채그로 식당 바브로"
    />
  </head>
  <body>
    <h1>👆 이 화면의 링크를 복사해서 공유해주세요!</h1>
    <meta
      property="og:image"
      content="https://codestates-photo.s3.ap-northeast-2.amazonaws.com/codestates_logo_thumbnail.jpg"
    />
  </body>
</html>

페이지에는 이미지가 보이지 않지만 공유 링크에는 기존과 동일한 사진이 공유 되고 있습니다

head에 다음과 같은 작업을 하겠습니다.

head에 넣은 이미지는 네이버 이미지 입니다.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Hello</title>
    <meta property="og:title" content="마포대교 한강뷰" />
    <meta
      property="og:description"
      content="카페 채그로 식당 바브로카페 채그로 식당 바브로카페 채그로 식당 바브로카페 채그로 식당 바브로카페 채그로 식당 바브로카페 채그로 식당 바브로카페 채그로 식당 바브로카페 채그로 식당 바브로카페 채그로 식당 바브로"
    />
    <meta
      property="og:image"
      content="https://s.pstatic.net/static/www/mobile/edit/2016/0705/mobile_212852414260.png"
    />
  </head>
  <body>
    <h1>👆 이 화면의 링크를 복사해서 공유해주세요!</h1>
    <meta
      property="og:image"
      content="https://codestates-photo.s3.ap-northeast-2.amazonaws.com/codestates_logo_thumbnail.jpg"
    />
  </body>
</html>

기존 body의 이미지는 무시되고 head에 추가한 이미지가 보이게 됩니다.

추가 내용

핵심 키워드를 너무 많이 반복해서 사용하면 최악의 경우 스팸 요소가 있는 사이트로 분류될 가능성이 있어 SEO에 악영향을 줍니다.

오픈 그래프의 목적이 SEO가 아닐 뿐이지, 간접적으로 연관이 있다고 볼 수 있습니다. 해당 페이지에 방문자 수가 많다면 검색시 상위에 노출될 확률이 높아지기 때문입니다.

저작자표시 (새창열림)

'프론트엔드 > Codestates' 카테고리의 다른 글

[HTML/CSS] 브라우저 (0)	2022.11.21
[자료구조/알고리즘] 자료구조Ⅰ Stack & Queue (0)	2022.11.17
[사용자 친화 웹] Semantic HTML (0)	2022.11.07
[사용자 친화 웹] 웹 표준 개념 (0)	2022.11.07
[React] Redux (0)	2022.11.02

SEO