SEO(Search Engine Optimization)는 검색 엔진 작동 방식에 맞게 웹 페이지를 최적화해주는 작업이다. 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>
<!DOCTYPE html>
<html lang="en">
<head>
<meta property="og:title" content="콘텐츠 제목" />
<meta charset="UTF-8" />
</head>
<body>
<h1>👆 이 화면의 링크를 복사해서 공유해주세요!</h1>
</body>
</html>
<!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>
<!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>
<!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>