HTML 메타데이터: 포함된 요소 및 모범 사례
게시 됨: 2021-01-08HTML 메타데이터의 요소 및 모범 사례
메타 태그는 웹 페이지에 대한 중요한 정보를 검색 엔진에 알리는 코드의 간단한 추출입니다. 또한 웹 브라우저가 방문자에게 표시되는 방식을 제어합니다. 메타 태그는 모든 웹 페이지에 있으며 HTML 코드에서만 볼 수 있습니다. 다음은 SEO에 대한 메타 태그 예 목록입니다.
- 메타 설명
- 메타 로봇
- 메타 제목
- 메타 문자 집합
- 메타 새로 고침 리디렉션
- 메타 뷰포트
메타 제목
Google 및 기타 검색 엔진이 검색 결과에 표시하는 페이지 제목이 메타 제목입니다. HTML 제목은 사용자에게 결과의 내용과 쿼리와의 관련성에 대한 빠른 통찰력을 제공합니다. 클릭할 결과를 결정하는 것은 일반적으로 정보의 기본 형식입니다. 웹 페이지에 고품질 제목을 사용하는 것은 SEO에 매우 중요합니다. 다음은 메타 제목의 예입니다.
모범 사례
- 페이지에 특수 제목 태그 사용
- 제목은 짧고 설명적이어야 합니다.
- 일반적이고 모호한 제목을 사용하지 마십시오.
- 제목 또는 대소문자 사용
- 클릭 미끼가 아닌 클릭 가치가 있는 것을 사용하십시오.
- 검색 의도 일치
- 60자 이하 사용
- 필요한 경우 타겟 키워드 포함
제목 태그 오류 찾기 및 수정
제목 태그가 너무 길거나 짧지 않은지 확인하십시오. 불필요하게 길거나 장황한 제목은 피하고 간결하고 설명적입니다. 모든 페이지에 제목 태그가 있는지 확인하십시오. 여러 웹 페이지가 있는 경우 검색 엔진에 관련 없는 제목 태그가 표시될 수 있으므로 페이지에 여러 HTML 제목 태그를 사용하지 마십시오. 여러 페이지에 걸쳐 제목을 복제합니다. 사이트의 각 페이지에는 고유하고 설명적인 제목이 있어야 합니다.
60초 안에 사이트의 SEO와 성능을 테스트하십시오!
훌륭한 웹사이트 디자인은 방문자 참여 및 전환에 매우 중요하지만 느린 웹사이트 또는 성능 오류로 인해 가장 잘 설계된 웹사이트라도 성능이 저하될 수 있습니다. Diib는 세계 최고의 웹사이트 성능 및 SEO 모니터링 도구 중 하나입니다. Diib은 빅 데이터의 힘을 사용하여 빠르고 쉽게 트래픽과 순위를 높일 수 있도록 도와줍니다. Entrepreneur에서 본 것처럼!
- 사용하기 쉬운 자동화된 SEO 도구
- 키워드 및 백링크 모니터링 + 아이디어
- 속도, 보안, + Core Vitals 추적 보장
- SEO 개선을 위한 아이디어를 지능적으로 제안
- 250,000k 이상의 글로벌 회원
- 내장된 벤치마킹 및 경쟁사 분석
250,000개 이상의 회사 및 조직에서 사용:
다음과 동기화 
메타 설명
메타 설명은 웹 페이지에 대한 간단한 설명을 제공합니다. 검색 엔진은 이를 사용하여 검색 결과에 웹 페이지를 표시합니다. 특정 페이지의 내용을 간단하고 정확하게 요약하여 사용자에게 알리고 관심을 얻습니다. 메타 설명은 사용자가 올바른 페이지에 있고 정확히 무엇을 찾고 있는지 확인시켜줍니다. 그러나 Google에서는 직접적인 순위 요소로 사용하지 않습니다. 아래 이미지는 메타 설명을 보여줍니다.
모범 사례
- 각 페이지에 대해 독특하고 이해하기 쉬운 설명을 작성하십시오.
- 정확한 요약 제공
- 일반적인 설명을 사용하지 마십시오.
- 의미 있는 문장에서 주요 키워드를 적절하게 사용
- 문장 케이스 사용
- 클릭 미끼를 사용하지 말고 클릭할 가치가 있는 것을 작성하십시오.
- 검색 목적 일치
- 160자 이하 사용
일반적인 메타 설명 실수
메타 설명을 작성할 때 가장 흔한 실수는 제목 태그의 실수와 거의 비슷합니다. 너무 길거나 너무 짧은 메타 설명. 일반적으로 메타 설명의 길이에는 제한이 없습니다. 장치의 너비에 맞추기 위해 일반적으로 추출된 검색 결과가 단축됩니다. 또 다른 실수는 웹 페이지에 메타 설명이 완전히 없는 경우입니다.
사이트에 작성했는지 확인하십시오. 하나 이상의 메타 설명이 있는 페이지를 가질 수도 있지만 이는 검색 엔진을 혼란스럽게 할 수 있습니다. 여러 페이지에 유사한 메타 설명이 있는 것도 일반적인 실수입니다. 각 페이지에 고유한 설명이 있는지 확인하십시오.
메타 로봇
메타 로봇을 사용하면 검색 엔진이 웹 페이지를 크롤링할 수 있고 방법에 대한 지침도 제공할 수 있습니다. 메타 로봇 태그에서 올바른 속성을 사용하지 않으면 검색 결과에 사이트가 표시되면 부정적인 영향을 미칠 수 있습니다. 이 태그를 이해하고 효과적으로 사용하면 SEO에 큰 영향을 미칩니다.
인덱스 값은 봇에게 페이지 인덱싱을 수행하도록 지시하고 noindex 값은 봇에게 페이지 인덱싱을 수행하지 않도록 지시합니다. 봇은 다음 값에 의해 페이지의 링크를 크롤링하여 보증하는 반면 nofollow 값은 승인을 피하기 위해 페이지의 링크를 크롤링하지 않도록 지시합니다.
모범 사례
페이지에서 Google 크롤링을 제한할 때 메타 로봇 태그만 사용하고 로봇에서 메타 로봇 태그가 있는 페이지를 차단하지 마십시오.
일반적인 메타 로봇의 실수
일반적인 메타 로봇 실수 중 일부는 색인 페이지를 차단하지 않는 로봇을 포함합니다. 이로 인해 Google에서 noindex 로봇 태그를 확인하기 어렵고 URL의 색인을 계속 생성할 수 있습니다. 악성 메타 noindex는 Google이 색인을 생성하지 못하도록 제한하여 페이지의 유기적 트래픽을 줄입니다. Rogue meta nofollow는 Google이 페이지 링크를 크롤링하는 것을 방지하고 중요한 콘텐츠를 발견하고 색인을 생성할 가능성을 줄입니다. 이것은 또한 중요한 페이지로의 PageRank의 흐름을 막을 수 있습니다.
메타 뷰포트
메타 뷰포트는 웹 페이지의 가시 영역을 설정하고 다양한 화면 크기에서 브라우저가 페이지를 표시하는 방법에 대한 지침을 제공합니다. 모바일 친화적 웹페이지가 Google의 모바일 검색 결과에서 더 높은 순위를 차지하기 때문에 이는 중요합니다.
모범 사례
모든 웹 페이지와 표준 태그에서 메타 뷰포트를 사용하는 것이 중요합니다.
메타 문자 집합
이 태그는 페이지의 문자 인코딩을 결정하거나 단순히 페이지에 문자와 텍스트를 표시하는 방법을 브라우저에 지시합니다. 유니코드 인코딩에 사용되는 UTF-8과 라틴 알파벳 인코딩에 사용되는 ISO-8859-1을 포함한 두 가지 공통 문자 집합이 있습니다. 잘못된 문자로 인코딩하면 브라우저가 잘못 표시됩니다.
당신은 관심을 가질 것입니다
비즈니스를 성공적으로 확장하는 방법
웹사이트 로드 속도: 최적화 도구
웹사이트 상태 확인: 도구 및 팁
UX는 무엇을 의미합니까?
(이미지 크레디트: 웹 튜토리얼 배우기)
문자 형식 문제는 부정적인 사용자 경험을 초래하고 페이지가 깨져 보일 수 있습니다. 이로 인해 발생할 수 있는 다른 문제로는 귀하의 페이지에 링크하는 사람의 수 감소, 낮은 체류 시간, 낮은 페이지 체류 시간, 높은 이탈률 및 검색 엔진이 귀하의 콘텐츠를 이해하지 못할 수 있습니다.
모범 사례
- 모든 웹 페이지에 항상 메타 문자 집합 태그를 사용하십시오.
- 가능한 경우 유니코드/UTF-8 사용
모든 웹 페이지가 UTF-8 인코딩을 사용하고 있는지 확인하는 것이 중요합니다.
메타 새로 고침 리디렉션
이 태그는 일정 시간이 지나면 사용자를 다른 URL로 리디렉션합니다. Google은 메타 새로 고침 리디렉션 태그를 이해하고 존중하지만 SEO에서는 사용하지 않는 것이 가장 좋습니다. 이는 대부분의 브라우저에서 지원하지 않아 사용자에게 혼란을 줄 수 있으며 보안 문제를 제기할 수 있기 때문입니다. 또한 도착 URL이 표시되기 전에 페이지를 파싱해야 하므로 시간이 걸립니다. 해당 태그는 다음과 같이 표시됩니다.
(이미지 크레디트: HostPapa)
모범 사례
- 필요한 경우에만 메타 새로 고침 리디렉션 태그 사용
메타 새로 고침 리디렉션은 나쁜 습관이므로 가능한 한 사용하지 않는 것이 가장 좋습니다. 웹 페이지에 있는 경우 가능한 경우 301 또는 302 리디렉션을 대신 사용할 수 있습니다.
메타 키워드
메타 키워드는 요즘 자주 사용되는 좋은 메타 태그 예입니다. Google이 순위에 키워드 사용을 중단했기 때문에 대상 키워드 목록과 함께 메타 키워드 태그를 추가하는 것은 권장하지 않습니다. 많은 사람들이 사용자가 해당 키워드를 보지 않고 관련 없는 키워드를 채워 넣었기 때문입니다. Google은 자주 남용되는 키워드 메타 태그를 무시했습니다.
Bing은 이제 키워드 메타 태그를 사용하여 스팸을 알리므로 이것이 귀하에게 불리할 수 있습니다. 사이트에서 태그를 제거하는 것이 가장 좋습니다.
메타데이터는 다른 데이터에 대한 정보를 제공하는 데이터입니다. HTML 메타 데이터는 특정 데이터를 쉽게 찾고 작업할 수 있도록 데이터에 대한 기본 정보를 요약합니다. 정확성을 높이기 위해 수동으로 생성하거나 더 기본적인 정보를 제공하기 위해 자동으로 생성할 수 있습니다. 마타 데이터는 문서 파일, 이미지, 비디오, 스프레드시트 및 웹 페이지에 사용됩니다.
메타 태그 생성기란 무엇입니까?
메타 태그 생성기를 사용하면 SEO에 필요한 가장 유용한 HTML 메타 태그를 개발할 수 있습니다.
HTML 메타데이터를 사용할 때의 모범 사례
항상 Doctype 선언
doctype 선언은 SEO에 대한 HTML 메타 태그의 첫 번째 항목이어야 합니다. 사용 중인 XHTML 표준에 대해 브라우저에 알립니다. XHTML 1.0 엄격한 doctype을 사용하는 것이 좋지만 일부 개발자는 이것이 어려운 선택으로 간주됩니다. 코드가 최신 표준을 엄격하게 준수하는지 확인합니다.
의미 있는 제목 태그 사용
제목 태그를 사용하면 웹 페이지를 보다 의미 있고 검색하기 쉽게 만들 수 있습니다.
메타 태그의 설명 목록 사용
메타 태그 목록은 검색 엔진 스파이더와 같은 사용자 에이전트를 위해 웹 페이지에 더 많은 의미를 추가합니다. 검색 엔진이 이를 감지하므로 설명에 반복되는 단어와 구문이 없는 것이 중요합니다. 웹 페이지의 목적을 설명할 때 간단하고 직접적인 설명을 사용하십시오.
div를 사용하여 레이아웃을 주요 섹션으로 나누기
웹 사이트 디자인을 구성할 때 첫 번째 단계에서 웹 페이지를 섹션으로 나누는 것을 고려하십시오. 이것은 복잡하고 긴 마크업을 작성할 때 혼란을 방지하고 div를 과도하게 사용하는 데 도움이 되는 동시에 깨끗하고 의도된 코드를 촉진합니다.
프레젠테이션에서 콘텐츠 혼합 방지
HTML 콘텐츠를 CSS에서 제공하는 콘텐츠 시각적 표현과 혼합하지 마십시오. HTML에서 인라인 스타일을 사용하는 대신 스타일에 대해 별도의 CSS 파일을 만드는 것이 매우 중요합니다. 이를 통해 귀하와 코드 작업을 하는 다른 개발자가 빠르게 변경하고 사용자 에이전트가 귀하의 콘텐츠를 더 잘 이해할 수 있도록 할 수 있습니다.
CSS 축소 및 통합
일반적인 웹 사이트에는 하나의 주요 CSS 파일과 브라우저별 수정 및 CSS 재설정과 같은 기타 항목이 있을 수 있습니다. 각 C 파일이 HTTP 요청을 할 때 웹사이트 로드 시간이 느려집니다. 줄 바꿈, 공백 및 탭과 같이 필요하지 않은 문자를 모든 코드에서 제거하고 함께 통합할 수 있는 파일을 통합합니다. 이것은 해당 문제를 해결하고 웹사이트의 로드 시간을 개선하는 데 도움이 될 수 있습니다.
JavaScript 축소, 통합 및 아래로 이동
인라인 JavaScript를 사용하지 말고 대신 JavaScript 라이브러리를 축소 및 통합하여 페이지 중 하나를 생성하는 데 필요한 HTTP 요청 수를 줄이십시오. 그러나 대부분의 브라우저에서는 병렬 다운로드가 불가능합니다. 즉, JavaScript를 다운로드하는 동안 브라우저가 다른 것을 다운로드하지 않아 페이지가 느리게 로드되는 것처럼 보입니다.
이를 방지하려면 CSS를 로드한 후 가능한 경우 body 태그를 닫기 전에 HTML 문서의 끝에 JavaScript를 배치하여 JavaScript를 로드할 수 있습니다.
제목 요소를 현명하게 사용
h1에서 h6 요소를 사용하여 HTML의 콘텐츠 순서를 나타내면 사용자 에이전트, 검색 엔진 및 화면 읽기 소프트웨어에서 콘텐츠를 보다 사용자 친화적으로 만들 수 있습니다. 블로그를 사용할 때 사이트 이름이 아닌 블로그 게시물 제목에 h1 요소를 사용하는 것이 검색 엔진에 이상적이기 때문에 가장 좋습니다.
올바른 위치에 올바른 HTML 태그 사용
혼란을 피하고 관련 콘텐츠 구조를 생성하려면 사용 가능한 HTML 태그와 태그를 정확하게 사용하는 방법을 아는 것이 중요합니다.
이 기사가 유용했기를 바랍니다.
사이트 상태에 대해 더 자세히 알고 싶거나 개인 권장 사항 및 알림을 받고 싶다면 Diib으로 웹 사이트를 스캔하십시오. 60초밖에 걸리지 않습니다.
div를 과도하게 사용하지 마십시오.
일부 개발자는 많은 div를 생성하는 더 많은 div 태그가 있는 다른 div 태그에 div 태그를 래핑합니다. div는 W3C HTML 사양에 따라 사용 가능한 다른 적절한 요소가 없을 때만 사용해야 하는 무의미한 요소로 간주됩니다. 필요한 경우에만 책임감 있게 사용하여 수많은 div를 사용하지 마십시오.
탐색에 정렬되지 않은 목록 사용
탐색 요소는 CSS와 결합할 때 웹사이트 디자인에서 매우 필수적인 요소입니다. 탐색 메뉴를 의미 있고 아름답게 만드는 데 도움이 됩니다. 이를 수행하는 두 가지 방법은 다음과 같습니다.
(이미지 크레디트: Studytonight)
태그 닫기
W3C 사양에서는 모든 태그를 닫아야 합니다. 태그를 닫지 못하는 것이 일반적인 표준에서는 유효하지 않더라도 다른 브라우저에서는 페이지를 올바르게 표시할 수 있습니다.
소문자 마크업 사용
마크업을 소문자로 유지하는 것은 업계의 표준 관행입니다. 마크업을 대문자로 바꾸면 코드 가독성에 영향을 주지만 웹 페이지의 표시는 변경되지 않습니다.
모듈식 IE 수정 사용
페이지에 문제가 있는 경우 조건부 주석을 사용하여 Internet Explorer에 집중할 수 있습니다. IE의 이전 버전에서 지원이 필요하지 않도록 수정 사항을 모듈식으로 만들어 작업이 미래에 대비할 수 있도록 하십시오.
코드 확인
검증을 나쁜 작업에 대한 좋은 작업의 최종 평가로 간주해서는 안 됩니다. 검증하는 작업이 반드시 좋은 코드는 아니며, 완전히 검증되지 않은 작업이 반드시 나쁜 코드도 아닙니다.
자동 유효성 검사 서비스를 유용한 디버거로 사용하여 렌더링 오류를 식별할 수 있습니다. 작업을 완료하면 식별하기 어려울 수 있는 문제를 피하기 위해 HTML을 작성할 때 작업을 자주 검증하십시오.
일관된 형식의 코드 작성
깨끗하고 의도가 분명한 코드 베이스를 작성하면 전문성이 부각되고 코드 작업을 할 수 있는 개발자가 더 쉽게 작업할 수 있습니다. 또한 처음부터 제대로 들여쓰기된 마크업을 작성할 때 작업의 가독성을 높일 수 있습니다. 예를 들어:
(이미지 제공: html.com)
과도한 댓글 피하기
코드를 문서화하는 목적은 코드를 이해하기 쉽게 만들고 코드에 주석을 추가하는 것이 Java, PHP 및 C#과 같은 프로그래밍 언어에 대해 합리적이고 논리적으로 만드는 것입니다. 그러나 마크업은 매우 자명하며 XHTML/HTML의 모든 줄에 주석을 달 필요가 없습니다. 의미론에 대한 작업을 검토하는 것은 프로세스를 설명하기 위해 HTML에서 많은 주석을 달고 있는 경우 도움이 될 것입니다.
Diib: 여기에서 HTML 메타데이터 통계를 얻으십시오!
이러한 요소를 사용하고 지침을 따르면 SEO 노력에 도움이 됩니다.
좋은 메타 설명과 같은 요소는 순위를 향상시키지 않더라도 검색에서 클릭률을 증가시킵니다. 메타 태그는 현재 Twitter 및 Facebook과 같은 소셜 미디어 플랫폼에서 사용되고 있습니다. 태그를 사용하여 Facebook에서 데이터가 공유되는 방식을 확인할 수 있습니다. Diib Digital과 파트너 관계를 맺으면 메타데이터와 관련된 중요한 메트릭을 얻을 수 있으므로 웹사이트 상태에 대해 효과적인 결정을 내릴 수 있습니다.
다음은 귀하가 좋아할 사용자 대시보드의 일부 기능입니다.
- 웹사이트 성능 향상을 위해 설계된 맞춤형 목표
- 도메인 기관의 기타 기술적 SEO 문제에 대해 알려주는 알림
- 백링크가 있는 깨진 페이지(404 검사기)
- 키워드, 백링크 및 인덱싱 모니터링 및 추적 도구
- 사용자 경험 및 모바일 속도 최적화
- 이미지 제목 최적화
무료 스캔을 받으려면 여기를 클릭하거나 800-303-3510으로 전화하여 성장 전문가에게 문의하십시오.