SEO·웹 제작
메타태그 작성법과 검색·SNS 미리보기 확인 방법
페이지의 제목·설명·대표 URL·Open Graph를 작성하는 방법, 길이 기준과 미리보기를 읽는 법, robots와 이미지에서 흔한 실수를 설명합니다.
게시일:
각 태그의 역할
| 태그 | 쓰임 |
|---|---|
<title> |
브라우저 탭의 페이지 이름. 대개 검색 결과의 제목으로도 쓰임 |
meta description |
검색 엔진이 제목 아래에 보여 줄 수 있는 요약 |
link rel="canonical" |
같은 내용이 여러 URL에 있을 때 어느 것이 대표 URL인지 표시 |
meta robots |
검색 결과에 넣지 않도록(noindex), 링크를 따라가지 않도록(nofollow) 요청 |
Open Graph(og:*) |
메신저·SNS에 링크를 공유할 때 나오는 제목·설명·이미지 |
twitter:card |
X의 카드 형태. X 전용 태그가 없으면 Open Graph의 제목·설명·이미지를 씀 |
예시: 빵집 상품 페이지
- 메타태그 생성기를 엽니다.
- 기본에 다음과 같이 입력합니다.
- 제목(title):
천연 발효 식빵 | 언덕 위 베이커리 - 설명(meta description):
매일 아침 소량씩 굽는 천연 발효 식빵. 정오까지 주문하시면 당일 픽업할 수 있습니다. - 대표 URL(canonical):
https://bakery.example/sikppang/
- 제목(title):
- 검색 결과에 표시(index) 와 페이지 안의 링크를 따라감(follow) 은 둘 다 켠 채로 둡니다. 기본 동작이라 robots 태그는 출력되지 않습니다.
- Open Graph 항목에서 이미지 URL(og:image) 에
https://bakery.example/images/sikppang-1200x630.jpg, 사이트 이름에언덕 위 베이커리, 언어·지역에ko_KR을 입력합니다. OG 제목·설명·URL은 비워 두면 기본 항목을 씁니다. - 카드 종류는 X에서 큰 이미지를 보여 주려면
summary_large_image를 고릅니다. - 미리보기(대략) 와 길이 표시를 확인하고 HTML 복사를 눌러 페이지의
<head>안에 붙여 넣습니다.
생성되는 HTML:
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>천연 발효 식빵 | 언덕 위 베이커리</title>
<meta name="description" content="매일 아침 소량씩 굽는 천연 발효 식빵. 정오까지 주문하시면 당일 픽업할 수 있습니다.">
<link rel="canonical" href="https://bakery.example/sikppang/">
<!-- Open Graph -->
<meta property="og:type" content="website">
<meta property="og:title" content="천연 발효 식빵 | 언덕 위 베이커리">
<meta property="og:description" content="매일 아침 소량씩 굽는 천연 발효 식빵. 정오까지 주문하시면 당일 픽업할 수 있습니다.">
<meta property="og:url" content="https://bakery.example/sikppang/">
<meta property="og:image" content="https://bakery.example/images/sikppang-1200x630.jpg">
<meta property="og:site_name" content="언덕 위 베이커리">
<meta property="og:locale" content="ko_KR">
<!-- X (Twitter) card: title, description and image fall back to Open Graph -->
<meta name="twitter:card" content="summary_large_image">미리보기 읽는 법
검색 결과와 SNS 카드 미리보기는 대략적인 예입니다. 제목과 설명을 어디까지 보여 줄지는 검색 엔진이 정하며, 페이지 내용을 바탕으로 바꿔 쓰기도 합니다. SNS마다 이미지를 자르는 방식도 다릅니다. 미리보기와 길이 표시(짧은 편, 대략적인 한도 안, 중간에 잘릴 수 있음)는 확실히 너무 길거나 짧은 문장을 찾는 데 쓰고, 실제 표시를 약속하는 것으로 보지 마세요.
미리보기는 og:image URL의 이미지를 내려받지 않습니다. 카드에 그림을 넣어 확인하려면 내 기기의 이미지를 고르세요. 미리보기에만 쓰이고 코드에는 들어가지 않습니다.
문장 작성 요령
- 제목은 페이지 내용을 알 수 있는 말을 앞에 두고 구체적으로 씁니다(“홈”보다 “천연 발효 식빵 | 언덕 위 베이커리”).
- 설명은 읽는 사람을 위해, 페이지에서 무엇을 알 수 있고 할 수 있는지 씁니다. 검색 순위 평가에는 쓰이지 않지만, 분명하게 쓰면 클릭으로 이어지기 쉽습니다.
- 페이지마다 다른 제목과 설명을 붙입니다.
자주 생기는 문제
- SNS에 예전 제목이나 이미지가 나옴: 메신저와 SNS는 링크 미리보기를 캐시합니다. 다시 가져오는 도구를 제공하는 서비스도 있지만, 반영까지 시간이 걸릴 수 있습니다.
- 공유해도 이미지가 안 나옴: 로그인 없이 누구나 열 수 있는
https://로 시작하는 절대 URL을 쓰세요. 큰 카드에는 1200 × 630px 정도가 알맞습니다. - noindex를 넣고 robots.txt로도 막음: robots.txt로 크롤링을 막으면 검색 엔진이 noindex 태그를 읽을 수 없습니다. 검색 결과에서 빼려면 크롤링은 허용하고 noindex를 쓰세요. robots.txt로 할 수 있는 것과 없는 것은 robots.txt 생성기를 참고하세요.
- 대표 URL이 상대 경로이거나 실수로 다른 사이트를 가리킴: 이 페이지 대표 버전의 전체 URL을 씁니다.
- meta keywords: 주요 검색 엔진은 keywords 메타 태그를 쓰지 않으므로 이 도구는 출력하지 않습니다.