비개발자를 위한 SEO 가이드입니다.
SEO는 "Search Engine Optimization"의 약자로, 한국어로는 **"검색엔진 최적화"**라고 합니다.
구글이나 네이버에서 검색했을 때, 우리 웹사이트가 위쪽에 잘 보이게 만드는 작업입니다.
가게를 열었다고 생각해보세요.
아무리 좋은 서비스를 만들어도, 사람들이 찾을 수 없으면 의미가 없겠죠?
메타데이터는 웹페이지의 "명함" 또는 "소개서" 같은 것입니다.
웹페이지를 열면 우리가 보는 건 글, 이미지, 버튼 같은 것들이죠. 하지만 그 뒤에 숨겨진 정보가 있어요. 이게 바로 메타데이터입니다.
| 항목 | 설명 | 비유 |
|---|---|---|
| 제목 (title) | 페이지의 이름 | 책 제목 |
| 설명 (description) | 페이지가 뭔지 한 줄 요약 | 책 뒷표지 소개글 |
| 키워드 (keywords) | 관련 검색어들 | 책의 태그/분류 |
| 이미지 | 대표 이미지 | 책 표지 |
구글에서 검색하면 이런 식으로 보이죠:
┌─────────────────────────────────────────────────┐ │ 맛있는 김치찌개 레시피 - 요리왕 │ ← 제목 (title) │ www.example.com/kimchi-jjigae │ ← 주소 (URL) │ 집에서 쉽게 만드는 김치찌개 레시피입니다. │ ← 설명 (description) │ 돼지고기와 묵은지로 깊은 맛을 내는 방법을... │ └─────────────────────────────────────────────────┘
이 제목과 설명이 바로 메타데이터로 설정한 것들입니다!
OpenGraph는 SNS에서 링크를 공유할 때 어떻게 보일지 정하는 설정입니다.
링크를 보내면 이렇게 미리보기 카드가 뜨잖아요:
┌─────────────────────────────────────┐ │ ┌───────────────────────────────┐ │ │ │ │ │ │ │ [대표 이미지 영역] │ │ ← og:image │ │ │ │ │ └───────────────────────────────┘ │ │ │ │ 맛있는 김치찌개 레시피 │ ← og:title │ 집에서 쉽게 만드는 김치찌개... │ ← og:description │ example.com │ ← 사이트 이름 └─────────────────────────────────────┘
이 미리보기가 OpenGraph 설정으로 만들어지는 겁니다!
페이스북이 만들었는데, 누구나 쓸 수 있게 **공개(Open)**했어요. 그래서 카카오톡, 트위터, 슬랙, 디스코드 등 대부분의 서비스가 이 방식을 사용합니다.
| 항목 | 설명 | 예시 |
|---|---|---|
og:title | 공유될 때 보이는 제목 | "맛있는 김치찌개 레시피" |
og:description | 공유될 때 보이는 설명 | "집에서 쉽게 만드는..." |
og:image | 공유될 때 보이는 이미지 | 김치찌개 사진 |
og:url | 페이지 주소 | https://example.com/recipe |
og:type | 콘텐츠 종류 | website, article 등 |
og:site_name | 사이트 이름 | "요리왕" |
┌──────────────────────────────────────┐ │ │ │ 1200px (가로) │ │ ┌────────────────────────┐ │ │ │ │ 630px │ │ │ 16:9 비율 권장 │ (세로) │ │ │ │ │ │ └────────────────────────┘ │ │ │ └──────────────────────────────────────┘
트위터(현 X)는 OpenGraph와 비슷하지만 별도 설정을 사용합니다.
| 종류 | 설명 | 용도 |
|---|---|---|
| summary | 작은 이미지 + 텍스트 | 일반 글, 기사 |
| summary_large_image | 큰 이미지 + 텍스트 | 블로그, 뉴스 |
| player | 동영상 재생 가능 | 유튜브 같은 영상 |
| app | 앱 다운로드 유도 | 모바일 앱 홍보 |
| 항목 | 설명 |
|---|---|
twitter:card | 카드 종류 |
twitter:title | 제목 |
twitter:description | 설명 |
twitter:image | 이미지 |
twitter:site | 사이트 트위터 계정 |
개발자가 웹페이지의 HTML 코드에 이런 정보를 넣습니다:
웹페이지 코드 안에 숨겨진 정보들: "이 페이지 제목은 '맛있는 김치찌개 레시피'야" "설명은 '집에서 쉽게 만드는 김치찌개'야" "대표 이미지는 이 사진이야" "카카오톡에 공유되면 이렇게 보여줘" "트위터에 공유되면 저렇게 보여줘"
웹페이지를 만들 때 확인할 것들:
A: 아니요. SEO는 "검색될 수 있게 준비하는 것"입니다. 실제 순위는 콘텐츠 품질, 방문자 수, 다른 사이트의 링크 등 여러 요소로 결정됩니다. 하지만 SEO 설정이 안 되어 있으면 아예 검색이 안 될 수도 있어요.
A: 저작권 주의하세요. 인터넷에서 아무 이미지나 가져다 쓰면 법적 문제가 생길 수 있어요. 직접 만들거나, 무료 이미지 사이트(Unsplash, Pexels 등)를 이용하세요.
A: 페이지마다 다르게 설정해야 합니다.
A: 검증 도구를 사용하세요.
| 용어 | 한 줄 설명 |
|---|---|
| SEO | 검색에 잘 걸리게 하는 작업 |
| 메타데이터 | 페이지의 숨겨진 소개 정보 |
| OpenGraph | SNS 공유 시 미리보기 설정 |
| Twitter Card | 트위터 전용 공유 미리보기 설정 |
이것만 기억하시면 됩니다!
댓글을 작성하려면 로그인이 필요합니다.
비개발자를 위한 SEO 가이드입니다.
SEO는 "Search Engine Optimization"의 약자로, 한국어로는 **"검색엔진 최적화"**라고 합니다.
구글이나 네이버에서 검색했을 때, 우리 웹사이트가 위쪽에 잘 보이게 만드는 작업입니다.
가게를 열었다고 생각해보세요.
아무리 좋은 서비스를 만들어도, 사람들이 찾을 수 없으면 의미가 없겠죠?
메타데이터는 웹페이지의 "명함" 또는 "소개서" 같은 것입니다.
웹페이지를 열면 우리가 보는 건 글, 이미지, 버튼 같은 것들이죠. 하지만 그 뒤에 숨겨진 정보가 있어요. 이게 바로 메타데이터입니다.
| 항목 | 설명 | 비유 |
|---|---|---|
| 제목 (title) | 페이지의 이름 | 책 제목 |
| 설명 (description) | 페이지가 뭔지 한 줄 요약 | 책 뒷표지 소개글 |
| 키워드 (keywords) | 관련 검색어들 | 책의 태그/분류 |
| 이미지 | 대표 이미지 | 책 표지 |
구글에서 검색하면 이런 식으로 보이죠:
┌─────────────────────────────────────────────────┐ │ 맛있는 김치찌개 레시피 - 요리왕 │ ← 제목 (title) │ www.example.com/kimchi-jjigae │ ← 주소 (URL) │ 집에서 쉽게 만드는 김치찌개 레시피입니다. │ ← 설명 (description) │ 돼지고기와 묵은지로 깊은 맛을 내는 방법을... │ └─────────────────────────────────────────────────┘
이 제목과 설명이 바로 메타데이터로 설정한 것들입니다!
OpenGraph는 SNS에서 링크를 공유할 때 어떻게 보일지 정하는 설정입니다.
링크를 보내면 이렇게 미리보기 카드가 뜨잖아요:
┌─────────────────────────────────────┐ │ ┌───────────────────────────────┐ │ │ │ │ │ │ │ [대표 이미지 영역] │ │ ← og:image │ │ │ │ │ └───────────────────────────────┘ │ │ │ │ 맛있는 김치찌개 레시피 │ ← og:title │ 집에서 쉽게 만드는 김치찌개... │ ← og:description │ example.com │ ← 사이트 이름 └─────────────────────────────────────┘
이 미리보기가 OpenGraph 설정으로 만들어지는 겁니다!
페이스북이 만들었는데, 누구나 쓸 수 있게 **공개(Open)**했어요. 그래서 카카오톡, 트위터, 슬랙, 디스코드 등 대부분의 서비스가 이 방식을 사용합니다.
| 항목 | 설명 | 예시 |
|---|---|---|
og:title | 공유될 때 보이는 제목 | "맛있는 김치찌개 레시피" |
og:description | 공유될 때 보이는 설명 | "집에서 쉽게 만드는..." |
og:image | 공유될 때 보이는 이미지 | 김치찌개 사진 |
og:url | 페이지 주소 | https://example.com/recipe |
og:type | 콘텐츠 종류 | website, article 등 |
og:site_name | 사이트 이름 | "요리왕" |
┌──────────────────────────────────────┐ │ │ │ 1200px (가로) │ │ ┌────────────────────────┐ │ │ │ │ 630px │ │ │ 16:9 비율 권장 │ (세로) │ │ │ │ │ │ └────────────────────────┘ │ │ │ └──────────────────────────────────────┘
트위터(현 X)는 OpenGraph와 비슷하지만 별도 설정을 사용합니다.
| 종류 | 설명 | 용도 |
|---|---|---|
| summary | 작은 이미지 + 텍스트 | 일반 글, 기사 |
| summary_large_image | 큰 이미지 + 텍스트 | 블로그, 뉴스 |
| player | 동영상 재생 가능 | 유튜브 같은 영상 |
| app | 앱 다운로드 유도 | 모바일 앱 홍보 |
| 항목 | 설명 |
|---|---|
twitter:card | 카드 종류 |
twitter:title | 제목 |
twitter:description | 설명 |
twitter:image | 이미지 |
twitter:site | 사이트 트위터 계정 |
개발자가 웹페이지의 HTML 코드에 이런 정보를 넣습니다:
웹페이지 코드 안에 숨겨진 정보들: "이 페이지 제목은 '맛있는 김치찌개 레시피'야" "설명은 '집에서 쉽게 만드는 김치찌개'야" "대표 이미지는 이 사진이야" "카카오톡에 공유되면 이렇게 보여줘" "트위터에 공유되면 저렇게 보여줘"
웹페이지를 만들 때 확인할 것들:
A: 아니요. SEO는 "검색될 수 있게 준비하는 것"입니다. 실제 순위는 콘텐츠 품질, 방문자 수, 다른 사이트의 링크 등 여러 요소로 결정됩니다. 하지만 SEO 설정이 안 되어 있으면 아예 검색이 안 될 수도 있어요.
A: 저작권 주의하세요. 인터넷에서 아무 이미지나 가져다 쓰면 법적 문제가 생길 수 있어요. 직접 만들거나, 무료 이미지 사이트(Unsplash, Pexels 등)를 이용하세요.
A: 페이지마다 다르게 설정해야 합니다.
A: 검증 도구를 사용하세요.
| 용어 | 한 줄 설명 |
|---|---|
| SEO | 검색에 잘 걸리게 하는 작업 |
| 메타데이터 | 페이지의 숨겨진 소개 정보 |
| OpenGraph | SNS 공유 시 미리보기 설정 |
| Twitter Card | 트위터 전용 공유 미리보기 설정 |
이것만 기억하시면 됩니다!
댓글을 작성하려면 로그인이 필요합니다.