SEO

Taehye.on·2023년 4월 26일
0

코드스테이츠 44기

목록 보기
63/89
post-thumbnail

D-49

🔍 SEO란?

SEO(Search Engine Optimization)는 검색 엔진 작동 방식에 맞게 웹 페이지를 최적화해주는 작업이다. SEO를 통해 검색 엔진에서 웹 페이지를 상위에 노출될 수 있게 만들 수 있다.
SEO는 두가지로 나뉜다.

  • On-Page SEO : 페이지 내부에서 진행할 수 있는 SEO로, 제목과 콘텐츠, 핵심 키워드 배치, 효율적인 HTML 요소 사용법 등을 이용하는 방법이다.

  • Off-Page SEO : 웹 사이트 외부에서 이루어지는 SEO로, 소셜 미디어 홍보, 백링크(외부 사이트에서 연결되는 링크) 등을 이용하는 방법으로, 웹 페이지 내용이나 구조와는 관계가 없다.

🔍 SEO 실습

SEO에 영향을 미치는 요소 <title>, <meta> 요소 중 오픈 그래프 요소를 작성해보고 카카오톡으로 링크 공유 시 미리보기 화면을 확인해보면서 요소가 어떻게 작동하는지 알아보자.


📌 기본 코드

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


📌 <title> 요소 작성

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


📌 오픈 그래프 og:title 추가(10글자 이내)

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta property="og:title" content="콘텐츠 제목" />
    <meta charset="UTF-8" />
  </head>
  <body>
    <h1>👆 이 화면의 링크를 복사해서 공유해주세요!</h1>
  </body>
</html>


📌 오픈 그래프 og:description 추가(10글자 이내)

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>타이틀</title>
    <meta property="og:title" content="콘텐츠 제목" />
    <meta property="og:description" content="콘텐츠 설명" />
    <meta charset="UTF-8" />
  </head>
  <body>
    <h1>👆 이 화면의 링크를 복사해서 공유해주세요!</h1>
  </body>
</html>


📌 오픈 그래프 og:description 변경(30글자 이상)

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>타이틀</title>
    <meta property="og:title" content="콘텐츠 제목" />
    <meta property="og:description" content=""미리보기 제목 밑에 위치하는 설명글, 적절한 길이로 작성해야 접근성을 향상시킬  있다." />
    <meta charset="UTF-8" />
  </head>
  <body>
    <h1>👆 이 화면의 링크를 복사해서 공유해주세요!</h1>
  </body>
</html>


📌 오픈 그래프 og:image 추가

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>타이틀</title>
    <meta property="og:title" content="콘텐츠 제목" />
    <meta property="og:description" content=""미리보기 제목 밑에 위치하는 설명글, 적절한 길이로 작성해야 접근성을 향상시킬  있다." />
     <meta property="og:image" content="https://t1.daumcdn.net/cfile/tistory/99C18C335A1CD69125"
    />
    <meta charset="UTF-8" />
  </head>
  <body>
    <h1>👆 이 화면의 링크를 복사해서 공유해주세요!</h1>
  </body>
</html>

0개의 댓글