Skip to content
toylee blog
toylee blog

컴퓨터·IT 문제 해결과 최신 기술 정보

  • 홈
  • 컴퓨터 활용
  • 프로그래밍
    • 파이썬
    • 자바(Java)
    • Flutter
    • HTML
    • Linux
    • 워드프레스
  • 맥북
  • IT 일반
  • 블로그 소개
  • 문의하기
toylee blog

컴퓨터·IT 문제 해결과 최신 기술 정보

HTML 메타 태그 최적화: title·description·canonical

toylee, 2026년 02월 17일2026년 08월 27일

메타 태그는 검색 순위를 올리는 비밀 키워드 목록이 아니라 브라우저와 검색엔진, 공유 서비스에 문서 정보를 전달하는 장치입니다. 각 페이지의 실제 내용과 일치하는 제목과 설명을 작성하고, 중복 URL은 canonical로 정리하는 것이 핵심입니다.

[목차]

  • 기본 head 예제
  • title은 페이지마다 고유하게
  • meta description은 짧은 내용 요약
  • robots와 canonical의 역할
  • 소셜 공유 정보
  • 피해야 할 오해
  • 공식 참고자료
  • 관련 글

기본 head 예제

<!doctype html>
<html lang="ko">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>SQLite 온라인 백업과 복구 검증 방법</title>
  <meta name="description"
        content="실행 중인 SQLite 데이터베이스를 안전하게 백업하고 무결성과 복구 가능성을 검증하는 절차를 설명합니다.">
  <link rel="canonical" href="https://example.com/sqlite-backup/">
</head>
</html>

title은 페이지마다 고유하게

<title>은 검색 결과 제목의 중요한 입력이지만 Google이 항상 그대로 표시하는 것은 아닙니다. 제목은 페이지의 주제를 정확히 설명하고, 같은 문구를 여러 페이지에 반복하지 않습니다. 사이트 이름은 CMS가 자동으로 붙이는지 확인해 중복을 피하세요.

meta description은 짧은 내용 요약

고정된 글자 수를 맞추기보다 검색자가 페이지에서 무엇을 얻는지 한두 문장으로 설명합니다. Google은 검색어에 따라 본문에서 다른 스니펫을 만들 수 있습니다. 모든 페이지에 같은 설명을 넣거나 키워드만 나열하면 유용하지 않습니다.

robots와 canonical의 역할

<meta name="robots" content="noindex, follow">
<link rel="canonical" href="https://example.com/preferred-url/">
  • noindex는 페이지를 검색 색인에서 제외하라는 지시입니다. robots.txt로 크롤링까지 막으면 검색엔진이 noindex를 읽지 못할 수 있습니다.
  • canonical은 유사·중복 URL 중 선호 URL을 알려주는 신호입니다. 존재하지 않거나 다른 내용의 페이지를 지정하지 않습니다.
  • 색인할 페이지에 실수로 noindex가 들어가지 않았는지 배포 후 원본 HTML을 확인합니다.

소셜 공유 정보

<meta property="og:title" content="SQLite 온라인 백업 방법">
<meta property="og:description" content="백업과 복구 검증 절차를 예제로 설명합니다.">
<meta property="og:image" content="https://example.com/images/sqlite-backup.png">

Open Graph 이미지는 실제 콘텐츠를 대표하는 고해상도 이미지를 사용하고 접근 가능한 절대 URL을 지정합니다. 이것이 HTML의 alt 텍스트를 대신하지는 않습니다.

피해야 할 오해

  • meta keywords를 많이 넣는다고 Google 순위가 오르지 않습니다.
  • description 길이만 맞춘다고 노출이나 클릭이 보장되지 않습니다.
  • JavaScript로 뒤늦게 넣기보다 가능한 한 서버가 반환하는 HTML에 핵심 메타 정보를 포함합니다.
  • 검색엔진별로 다른 내용을 보여주지 않습니다.

공식 참고자료

  • Google: 검색결과 스니펫 관리
  • Google: 제목 링크 권장사항
  • Google: canonical URL 지정

관련 글

  • HTML에서 배너 이미지 삽입하기
  • 워드프레스 테마 선택 체크리스트: 성능·업데이트·호환성

내용 검토 및 업데이트: 2026년 8월 27일

HTML HTMLHTML5SEOSEO 최적화검색엔진 최적화메타 태그메타 태그 최적화웹사이트 최적화

글 탐색

Previous post
Next post

Related Posts

기본 HTML 문서 구조 이해하기: 웹사이트 뼈대 만드는 방법

2026년 08월 29일

웹 개발의 첫걸음인 HTML 문서의 기본 구조를 이해하고, 브라우저가 코드를 해석하는 원리와 필수 태그 구성 방법을 살펴봅니다.

Read More
HTML

CSS와 XML의 호환성 및 차이점

2024년 05월 11일

CSS와 XML은 웹 개발에서 중요한 역할을 하는데, 두 기술의 호환성과 차이점을 알아보는 것은 중요하다. CSS는 Cascading Style Sheets의 약자로, 웹 문서의 디자인을 담당하는 스타일 시트 언어이다. 반면에 XML은 Extensible Markup Language의 약자로, 데이터를 저장하고 전송하는 데 사용되는 마크업 언어이다. 두 기술은 각자의 역할과 특징이 있으며, 이를 이해하고 활용하는 것은 웹 개발자에게 중요하다. 이제 CSS와 XML의 호환성과 차이점에 대해 자세히 살펴보겠다.

Read More
HTML

HTML Form 태그 사용법

2023년 06월 07일

HTML Form은 다양한 유형의 입력 필드를 제공하며, 이를 통해 사용자로부터 정보를 수집할 수 있습니다. 이 글에서는 HTML Form 태그 사용법 및 기본적인 구조와 속성, 사용 방법에 대해 알아보겠습니다.

Read More

최신 글

  • 브라우저 캐시 삭제가 필요한 경우와 안전하게 정리하는 방법 정리
  • 맥북 발열 줄이는 기본 설정: 성능과 배터리를 지키는 실천 방법
  • 에러 로그 읽는 습관 만들기: 개발 속도를 높이는 실전 분석 요령
  • HTML 링크 태그 접근성 체크리스트: 누구나 이용하기 쉬운 웹사이트 만드는 방법
  • 워드프레스 글 발행 체크리스트: 놓치기 쉬운 7가지 필수 점검 항목

최신 댓글

보여줄 댓글이 없습니다.

보관함

  • 2026년 9월
  • 2026년 8월
  • 2026년 2월
  • 2025년 7월
  • 2025년 6월
  • 2025년 5월
  • 2025년 4월
  • 2025년 3월
  • 2025년 2월
  • 2025년 1월
  • 2024년 12월
  • 2024년 11월
  • 2024년 8월
  • 2024년 6월
  • 2024년 5월
  • 2024년 3월
  • 2024년 2월
  • 2023년 11월
  • 2023년 9월
  • 2023년 8월
  • 2023년 7월
  • 2023년 6월
  • 2023년 5월
  • 2023년 4월
  • 2023년 3월
  • 2023년 2월

카테고리

  • Flutter
  • HTML
  • IT 일반
  • Linux
  • 맥북
  • 워드프레스
  • 자바(Java)
  • 컴퓨터 활용
  • 파이썬
  • 프로그래밍

사이트 안내

  • 블로그 소개
  • 문의하기
  • 개인정보 처리방침
©2026 toylee blog | WordPress Theme by SuperbThemes