Skip to main content

메타 태그 설정

메타 태그 설정

본 페이지는 퍼블리싱 작업중 HTML의 표준화를 위해 작성되었습니다.

 <title> 태그

검색 결과에서 웹페이지의 제목으로 표시되며, 사용자에게 페이지 내용을 요약해 알려주는 중요한 요소입니다. 브라우저 탭에도 제목으로 표시됩니다

  • 50~60자 이내로 간결하게 작성하며, 페이지의 핵심 내용을 포함합니다.
  • 페이지마다 고유한 제목을 설정해 중복을 피하고, 중요한 키워드를 자연스럽게 포함합니다.

 <meta name="description"> 태그

페이지에 대한 요약 정보를 제공합니다. 검색 결과에 표시되며, 사용자에게 페이지 내용을 미리 알려주는 역할을 합니다.

  • 150~160자 이내로 작성해 검색 엔진에 잘 표시되도록 합니다.
  • 매력적이고 클릭을 유도할 수 있는 문구를 포함합니다.
  • 페이지의 주요 키워드를 포함하되, 내용과 부합해야 합니다.

 <meta name="robots"> 태그

검색 엔진이 페이지를 크롤링하고 인덱싱할 때의 지침을 제공합니다.

  • index/noindex: 페이지를 검색 엔진 인덱스에 포함할지 여부를 지정.
  • follow/nofollow: 페이지 내 링크를 따라갈지 여부를 설정.
  • 예를 들어, 인덱싱을 원하지 않는 페이지에 noindex, nofollow로 설정합니다.

 <meta name="keywords"> 태그

페이지와 관련된 키워드를 명시합니다. 현재는 대부분의 검색 엔진에서 무시되지만, 여전히 일부 SEO 도구에서 분석 요소로 사용됩니다.

  • 5~10개의 키워드를 쉼표로 구분하여 간략하게 작성합니다.
  • 페이지의 핵심 주제와 관련된 키워드를 포함하되, 중복 키워드나 스팸성 키워드는 피합니다.

 <meta charset="UTF-8"> 태그

웹페이지의 문자 인코딩 방식을 지정합니다. UTF-8은 대부분의 언어와 특수 문자를 지원하기 때문에 널리 사용됩니다.

 <meta name="viewport"> 태그

모바일 기기에서 화면의 초기 크기를 설정합니다. 반응형 웹 디자인을 구현할 때 필수적입니다.

  • width=device-width: 디바이스의 가로 폭에 맞게 화면 너비를 설정.
  • initial-scale=1.0: 기본 확대 비율을 설정하여 페이지가 사용자 디바이스에 맞게 표시되도록 설정.

 <meta property="og:title"> 태그

페이지가 소셜 미디어에서 공유될 때 표시될 정보를 설정합니다. Facebook, Twitter와 같은 플랫폼에서 미리보기 정보로 활용됩니다.

  • og: 소셜 미디어에서 표시될 제목.
  • og: 짧고 간결한 설명.
  • og: 고해상도 이미지를 사용하여 시각적 매력을 높임.
  • og: 해당 페이지의 정확한 URL을 사용.

동일한 콘텐츠가 여러 URL로 접근 가능한 경우, 검색 엔진에 대표 URL을 명시하여 중복 콘텐츠 문제를 방지합니다.

  • 대표 콘텐츠로 인식되길 원하는 URL을 지정해 중복 페이지가 생성되는 것을 방지합니다.
  • 특히 필터 또는 정렬 옵션을 통해 동일한 페이지가 여러 URL로 접근 가능한 경우 유용합니다.

 <meta http-equiv="X-UA-Compatible"> 태그

페이지가 Internet Explorer에서 특정 모드로 렌더링되도록 지시합니다.

최신 렌더링 엔진을 사용하도록 IE=edge로 설정하여 페이지가 최신 브라우저 표준에 맞게 표시되도록 합니다.

No Comments
Back to top