HTML <meta> 사용 방법 알아보기 요소.
<meta> 요소는 HTML 문서에 대한 여러 유형의 메타데이터를 정의하는 데 사용됩니다. 메타데이터는 정보를 의미합니다. 또는 더 구체적으로 메타데이터는 다른 데이터에 대한 정보를 설명하고 제공하는 데이터입니다.
<meta> 요소에는 여러 속성과 값이 있습니다.
name 속성은 가장 중요한 속성 중 하나입니다.
name 여러 값을 취합니다. 예를 들어 description , content와 함께 사용 페이지를 설명하는 속성:
<head>
<meta name="description" content="Learn about the HTML meta element" />
</head>
<meta> 요소는 <head> 내부에만 존재합니다. 요소.
메타데이터는 웹페이지에 표시되지 않지만 서버, 브라우저 및 검색 엔진과 같은 시스템에서 구문 분석(읽기) 및 처리됩니다.
이렇게 하면 <meta> 요소는 Google과 같은 검색 엔진에 귀하의 웹사이트가 무엇인지, 사람들이 검색하는 것과 얼마나 관련성이 있는지 알려주는 추가 데이터(웹사이트 콘텐츠 외에)를 제공하기 때문에 SEO에서 가장 중요한 HTML 요소 중 하나입니다.
메타 description 가끔 검색 엔진이 귀하의 웹사이트에 대한 페이지 설명을 생성하기 위해 SERP(검색 엔진 결과 페이지)가 귀하의 페이지 콘텐츠보다 낫다고 판단되는 경우 사용합니다.
표시 영역 태그
viewport 메타 태그는 모바일 친화적이지 않은 웹사이트를 작은 화면에서 더 잘 보이게 하는 데 도움이 됩니다. 다음 뷰포트 태그 구성은 모바일에 최적화되어 있으며 다음과 같은 합당한 이유가 없는 한 기본적으로 사용해야 합니다.
<meta name="viewport" content="width=device-width, initial-scale=1" />width=device-width사용자의 기기 너비에 따라 페이지 너비를 설정하도록 브라우저에 지시합니다.initial-scale초기 페이지 로드 시 확대/축소 수준을 제어합니다.initial-scale-1확대/축소 수준이 100%임을 의미합니다.initial-scale-2로 설정하면 , 페이지는 첫 페이지 로드 시 200% 확대됩니다.
viewport 고급 <meta> 중 하나입니다. 요소 태그, 기본값 사용자 정의를 시작하기 전에 주의 깊게 연구해야 합니다.
Mozilla에는 뷰포트 태그에 대한 확실한 문서가 있습니다.
로봇 메타 태그
robots 메타 태그("로봇 메타 지시문"이라고도 함)는 속성 값 index를 사용하여 검색 엔진에 페이지 색인을 생성할지 여부를 알려줍니다. 또는 noindex .
기본적으로 index로 설정됩니다. , 따라서 웹사이트의 색인을 생성하지 않으려면 content로 지정합니다. 값 noindex
<meta name="robots" content="noindex" />
robots follow를 사용하여 웹사이트의 링크를 따라가야 하는지 여부를 검색 엔진에 알리는 데 사용할 수도 있습니다. 또는 nofollow 가치.
<meta name="robots" content="nofollow" />
noindex를 결합할 수도 있습니다. 및 nofollow 단일 요소에서:
<meta name="robots" content="noindex, nofollow" />
조심스럽게 밟으세요. 귀하의 <meta>로 robots 구성.
실제로 noindex, nofollow로 설정했다면 위의 코드와 마찬가지로 검색 엔진이 콘텐츠와 링크를 모두 색인화하지 않도록 하십시오. 전 세계적으로(전체 웹사이트에서) SEO에 피해를 줄 수 있으므로 거의 하고 싶지 않습니다.
noindex의 일반적인 사용 사례 웹사이트가 아직 개발 중이고 공개할 준비가 되지 않은 경우입니다. WordPress에는 페이지 인덱싱을 일시적으로 비활성화하는 옵션이 있습니다(nofollow ) 그 목적을 위해.
링크의 경우 nofollow를 적용하는 대신 전 세계적으로(모든 링크에 대해) 보다 실용적인 사용 사례는 nofollow를 사용하는 것입니다. 특정 아웃바운드(외부) 링크에서 검색 엔진이 뒤따를 이유가 없는 유료 링크의 경우. 앵커 요소에서 직접 수행합니다.
<a href="#" rel="nofollow">Click to see our sponsor</a>
기본적으로 하이퍼링크는 follow로 설정됩니다. .