SEO를위한 가장 중요한 HTML 태그 8 가지

SEO 프로세스에서 HTML 태그를 사용하고 있습니까?

HTML 태그는 모든 웹 페이지의 백엔드가있는 코드 요소이지만 검색 엔진에 SERP 표시를위한 주요 정보를 제공하는 특정 HTML 코드 유형도 있습니다. 기본적으로 이러한 요소는 검색과 관련된 콘텐츠 부분을 강조하고 검색 크롤러에 대한 요소를 설명합니다.

즉, 이러한 추가 코드 도구를 모두 사용할 필요는 없습니다. 검색 엔진이 점점 더 스마트 해지고 있으며, 요즘 HTML 태그 사용이 과거보다 훨씬 적습니다. 그러나 일부 태그는 여전히 유지되고 있으며 일부는 SEO 가치를 얻었습니다.

이 게시물에서는 2020 년에도 여전히 의미가있는 주요 SEO HTML 태그 중 일부를 살펴 보겠습니다.

1. 제목 태그

제목 태그는 SERP에 표시되는 클릭 가능한 헤드 라인을 설정하는 데 사용됩니다.

일반적으로 페이지의 SERP 헤드 라인을 만드는 것은 Google의 몫이며 페이지 내에서 섹션 제목을 사용할 수 있습니다. 또는 새 헤드 라인을 모두 만들 수도 있습니다.

그러나 Google이 헤드 라인 아이디어를 확인하는 첫 번째 위치는 제목 태그이며, 제목 태그가있는 경우 Google은 관련 목록의 주요 헤드 라인으로 만들 가능성이 높습니다. 따라서 제목 태그를 최적화하면 SERP에서 페이지가 표시되는 방식을 일부 제어 할 수 있습니다.

모범 사례

한편으로 제목에는 검색 결과에 표시되는 데 도움이되는 키워드가 포함되어야합니다. 다른 한편으로 제목은 사용자가 실제로 클릭 할 수있을만큼 매력적이어야하므로 검색 최적화와 사용자 경험간에 균형이 필요합니다.

• 길이 확인 -Google은 제목의 처음 50 ~ 60 자만 표시하고 나머지는 자릅니다. 컷오프 지점 이전에 중요한 정보를 맞추기 만하면 제목이 60 자보다 길어도 문제가되지 않습니다.
• 적절한 수의 키워드 포함- 키워드 채우기는 불이익을받을 수 있지만 하나 또는 두 개의 키워드는 괜찮습니다. 제목이 일관된 문장을 구성하는지 확인하십시오.
• 좋은 문구를 작성하십시오-판매 적이 지 말고 일반적이지 마십시오. 콘텐츠의 가치를 강조하는 설명적인 제목을 만들고 적절한 기대치를 설정하여 사용자가 페이지를 방문 할 때 실망하지 않도록합니다.
• 브랜드 이름 추가- 클릭률을 높일 가능성이있는 잘 알려진 브랜드가 있다면 제목에도 자유롭게 추가하세요.

HTML 코드

아래는 코로나 바이러스 통계에 관한 BBC 기사에서 가져온 코드입니다. 메타 설명 태그 바로 위에 올바르게 설정된 제목 태그를 볼 수 있습니다. 다음에서 논의 할 내용입니다.

2. 메타 설명 태그

메타 설명 태그는 검색 결과 스 니펫 내에서 설명을 설정하는 데 사용됩니다.

Google은 이러한 스 니펫을 만들기 위해 항상 메타 설명 태그를 사용하지는 않지만 메타 태그가있는 경우 메타 설명이 SERP에 포함될 가능성이 큽니다. ㅇㅇ ㅇㅇㅇ ㅇㅇㅇ ㅇㅇㅇ ㅇㅇㅇ ㅇㅇㅇ ㅇㅇㅇ ㅇㅇㅇ ㅇㅇㅇ ㅇㅇㅇ ㅇㅇㅇ ㅇㅇㅇ ㅇㅇㅇ ㅇㅇㅇ ㅇㅇㅇ ㅇㅇㅇ ㅇㅇㅇ ㅇㅇㅇ ㅇㅇㅇ ㅇㅇㅇ ㅇㅇㅇ ㅇㅇㅇ ㅇㅇㅇ ㅇㅇㅇ ㅇㅇㅇ ㅇㅇㅇ ㅇㅇㅇ ㅇㅇㅇ ㅇㅇㅇ ㅇㅇㅇ ㅇㅇㅇ ㅇㅇㅇ ㅇㅇㅇ ㅇㅇㅇ ㅇㅇㅇ ㅇㅇㅇ ㅇㅇㅇ ㅇㅇㅇ ㅇㅇㅇ ㅇㅇㅇ ㅇㅇㅇ ㅇㅇㅇ ㅇㅇㅇ ㅇㅇㅇ ㅇㅇㅇ ㅇㅇㅇ ㅇㅇㅇ ㅇㅇㅇ ㅇㅇㅇ ㅇㅇㅇ ㅇㅇㅇ ㅇㅇㅇ ㅇㅇㅇ ㅇㅇㅇ ㅇㅇㅇ ㅇㅇㅇ ㅇㅇㅇ ㅇㅇㅇ ㅇㅇㅇ ㅇㅇㅇ ㅇㅇㅇ ㅇㅇㅇ ㅇㅇㅇ ㅇㅇㅇ ㅇㅇㅇ

그러나 때때로 Google은 메타 설명 태그를 무시하고 대신 페이지에서 약간의 사본을 인용합니다. 이는 일반적으로 따옴표가 메타 설명보다 특정 쿼리와 더 잘 일치 할 때 발생합니다.

기본적으로 Google은 클릭률을 높이기 위해 최상의 옵션을 선택합니다.

모범 사례

메타 설명에 대한 규칙은 지나치게 엄격하지 않습니다. 결국 좋은 글을 쓰지 않으면, 아예 쓰지 못하더라도 Google이 대신 쓰게됩니다.

• 길이 확인- 헤드 라인과 동일하게 Google은 메타 설명의 처음 150-160자를 유지하고 나머지는 자릅니다. 검색 자의 관심을 극대화하기 위해 중요한 측면이 초기에 포함되었는지 확인합니다.
• 좋은 문구 작성- 메타 설명은 순위에 사용되지 않지만 검색 의도에 맞게 최적화하는 것이 여전히 중요합니다. 각 검색어를 기반으로 한 설명이 관련성이 높을수록 사용자가 페이지를 방문 할 가능성이 높아집니다.
• 메타 설명 건너 뛰기 고려- 특히 긴 꼬리가 긴 키워드 또는 다양한 키워드를 타겟팅하는 페이지에 대해 좋은 문구를 작성하기 어려울 수 있습니다. 이 경우 메타 설명을 제외하는 것이 좋습니다. Google에서 페이지를 긁어 내고 몇 가지 관련 인용문으로 스 니펫을 채 웁니다.

HTML 코드

아래는 코로나 바이러스 통계에 대한 동일한 BBC 기사에서 검색 한 약간의 코드이며, 제목 태그 뒤에는 기사 내용에 대한 간략한 요약을 제공하는 메타 설명 태그가 있음을 알 수 있습니다.

3. 제목 (H1-H6) 태그

제목 태그는 독자와 검색 엔진 모두에 대해 페이지를 구성하는 데 사용됩니다.

더 이상 기사를 거의 읽는 사람이 거의 없다는 것은 비밀이 아닙니다. 대신 우리가 일반적으로하는 일은 우리가 좋아하는 섹션을 찾을 때까지 기사를 스캔하고 한 섹션을 읽은 다음 반송하는 것입니다. 그리고 기사가 섹션으로 나뉘 지 않으면 너무 많기 때문에 많은 사람들이 즉시 반송됩니다. 따라서 사용자 관점에서 제목은 편리한 읽기 도구입니다.

그러나 검색 엔진의 관점에서 볼 때 제목 태그는 콘텐츠의 핵심을 형성하며 검색 크롤러 봇이 페이지의 내용을 이해하는 데 도움이됩니다.

모범 사례

제목에 대한 규칙은 일반적인 카피 라이팅 관행에서 파생됩니다. 카피를 한 입 크기로 나누고 일관된 서식을 유지합니다.

• 둘 이상의 H1- H1 제목은 검색 엔진에서 페이지 제목으로 처리하므로 다른 제목과 구별됩니다. 제목 태그와 혼동하지 마십시오. 제목 태그는 검색 결과에 표시되고 H1 태그는 웹 사이트에 표시됩니다.
• 얕은 구조 유지 -H3 이하로 내려갈 필요가 거의 없습니다. 제목에는 H1을, 섹션 제목에는 H2를, 하위 섹션에는 H3을 사용합니다. 그 이상은 혼란스러워지는 경향이 있습니다.
• 쿼리와 유사한 제목 작성- 각 제목을 검색 순위를 매길 수있는 추가 기회로 취급합니다. 이를 위해 각 제목은 검색어 또는 검색어에 대한 답변 (키워드 포함)처럼 들려야합니다.
• 모든 제목과 일치 해야합니다. 모든 제목은 모든 텍스트를 제거하고 제목 만 유지하면 목록처럼 읽히는 방식으로 작성되어야합니다.

HTML 코드

다음은 코로나 바이러스 통계에 대한 동일한 BBC 기사에서 검색 한 코드 스 니펫이며, 올바르게 설정된 H2 제목과 그 뒤에 두 개의 단락이 있음을 알 수 있습니다.

4. 이미지 대체 텍스트

대체 텍스트의 주요 목표는 웹 접근성이지만 alt 속성의 SEO 목표는 이미지 인덱싱입니다.

이미지 대체 텍스트의 핵심 목표는 시각 장애가있는 방문자가 이미지를 볼 수 없을 때 사용자가 이미지를 이해할 수 있도록 돕는 것입니다. 이 경우 문제가 있고 이미지가로드되지 않는 경우와 함께 대체 텍스트를 사용하여 이미지를 보는 대신 이미지에있는 내용을 설명 할 수 있습니다.

SEO 관점에서 대체 텍스트는 Google 검색에서 이미지가 색인되는 방식의 큰 부분입니다. 따라서 제품의 이미지, 작업, 스톡 이미지, 예술 등의 작업에 시각적 요소가 있다면 이미지 대체 텍스트 사용을 확실히 고려해야합니다.

모범 사례

대체 텍스트 태그를 추가하기위한 전제 조건은 태그가없는 모든 이미지를 찾는 것입니다.

WebSite Auditor와 같은 도구를 사용하여 웹 사이트를 크롤링하고 대체 텍스트가 누락 된 이미지 목록을 컴파일 할 수 있습니다.

목록을 만든 후 다음 지침을 적용하십시오.

• 간결하지만 설명 적- 좋은 대체 텍스트는 시각 장애인이 그림에 나오는 내용을 이해하는 데 도움이되는 한두 줄의 텍스트에 관한 것입니다.
• 너무 간결하지 마십시오. 한 단어 또는 몇 단어만으로는 잘리지 않을 것입니다. 이미지를 다른 이미지와 구별 할 방법이 없습니다. 표시되는 모든 속성 (객체 유형, 색상, 재질, 모양, 마감, 조명 등)을 생각해보십시오.
• 키워드 스터핑 금지- 키워드 스터핑이 여전히 작동하는 곳이 남아 있지 않으며 대체 텍스트도 예외는 아닙니다.

HTML 코드

다음은 질병 세포 이미지에서 가져온 대체 텍스트 스 니펫의 예입니다.

5. 스키마 마크 업

스키마 마크 업은 리치 스 니펫 기능으로 일반 SERP 스 니펫을 향상시키는 데 사용됩니다.

Schema.org는 Google, Bing, Yahoo! 및 Yandex가 공동으로 개발 한 태그 모음을 호스팅하며 웹 마스터는이 태그를 사용하여 검색 엔진에 다양한 유형의 페이지에 대한 추가 정보를 제공합니다. 결과적으로 검색 엔진은이 정보를 사용하여 다양한 풍부한 기능으로 SERP 스 니펫을 향상시킵니다.

스키마 마크 업을 사용하여 순위를 높일 수 있는지 여부는 확실하지 않습니다. 그러나 결과 코드 조각이 일반 코드 조각보다 훨씬 더 매력적으로 보이기 때문에 검색 순위가 향상된다는 것은 의심 할 여지가 없습니다.

모범 사례

유일한 모범 사례는 schema.org를 방문하여 페이지 유형에 적용 할 수있는 태그가 있는지 확인하는 것입니다. 수천 개는 아니더라도 수백 개의 태그가 있으므로 적용되는 옵션이있을 수 있으며 웹 사이트 목록을 개선하는 데 도움이 될 수 있습니다.

HTML 코드

다음은 레시피에 대한 영양 정보를 지정하는 코드의 샘플 스 니펫입니다. 마크 업에 사용할 수있는 전체 항목 목록을 보려면 schema.org를 방문하세요.

6. HTML5 의미 태그

HTML5 요소는 다양한 페이지 구성 요소를 더 잘 설명하는 데 사용됩니다.

HTML5 요소를 도입하기 전에는 주로 div 태그를 사용하여 HTML 코드를 별도의 구성 요소로 분할 한 다음 클래스 와 ID 를 사용하여 해당 구성 요소를 추가로 지정했습니다. 각 웹 마스터는 고유 한 사용자 지정 방식으로 구성 요소를 지정했기 때문에 결과적으로 약간 엉망이되었고 검색 엔진이 각 페이지의 내용을 이해하는 데 어려움을 겪었습니다.

시맨틱 HTML5 요소가 도입됨에 따라 각각 별도의 페이지 구성 요소를 설명하는 직관적 인 태그 세트가 생겼습니다. 따라서 혼란스러운 div로 콘텐츠에 태그를 지정하는 대신 이해하기 쉽고 표준화 된 방식으로 구성 요소를 설명하는 방법이 생겼습니다.

상상할 수 있듯이 검색 엔진은 시맨틱 HTML5에 매우 열광합니다.

HTML 코드

다음은 가장 편리한 시맨틱 HTML5 요소 중 일부입니다.이를 사용하여 검색 엔진과의 커뮤니케이션을 개선하세요.

• 기사 -나머지 코드에서 게시물을 분리하여 이식 가능하게 만듭니다.
• 섹션 -블로그 내의 게시물 그룹 또는 게시물 내의 제목 그룹을 분리합니다.
• aside- 기본 콘텐츠의 일부가 아닌 추가 콘텐츠를 분리합니다.
• 헤더 -문서, 기사, 섹션의 상단 부분을 분리하고 탐색을 포함 할 수 있습니다.
• 바닥 글 -문서, 기사, 섹션의 하단을 분리하고 메타 정보를 포함합니다.
• nav- 탐색 메뉴, 탐색 요소 그룹을 분리합니다.

7. 메타 로봇 ​​태그

로봇 메타 태그는 웹 사이트와 검색 엔진 간의 참여 규칙에 관한 것입니다.

여기에서 웹 사이트 소유자는 페이지를 크롤링하고 색인을 생성하기위한 일련의 규칙을 설명합니다. 이러한 규칙 중 일부는 의무적이지만 다른 규칙은 제안과 비슷합니다. 모든 크롤러가 로봇 메타 태그를 존중하지는 않지만 주류 검색 엔진은 종종 그렇습니다. 메타 로봇 ​​태그가 없으면 크롤러가 원하는대로 수행합니다.

모범 사례

메타 로봇 ​​태그는 페이지 코드의 헤드 섹션에 배치되어야하며 어떤 크롤러를 처리하고 어떤 지침을 적용해야하는지 지정해야합니다.

• 이름으로 로봇 주소 지정- 지침이 모든 크롤러에 해당 하는 경우 로봇을 사용하지만 개별 크롤러를 주소 지정하려면 특정 이름을 사용하십시오. 예를 들어 Google의 표준 웹 크롤러를 Googlebot 이라고 합니다 . 개별 로봇을 다루는 것은 일반적으로 페이지에서 악의적 인 크롤러를 차단하는 동시에 의도 된 크롤러가 계속 진행할 수 있도록하기 위해 수행됩니다.
• 목표에 대한 지침 일치- 일반적으로 로봇 메타 태그를 사용하여 검색 엔진이 문서, 내부 검색 결과, 중복 페이지, 스테이징 영역 및 검색에 표시하지 않으려는 기타 항목을 색인화하지 못하도록합니다.

HTML 코드

다음은 로봇 메타 태그에서 가장 일반적으로 사용되는 몇 가지 매개 변수입니다. 하나의 메타 로봇 ​​태그에서 쉼표로 구분하여 원하는만큼 사용할 수 있습니다.

• noindex — 페이지의 색인을 생성해서는 안됩니다.
• nofollow — 페이지의 링크를 따라 가면 안됩니다.
• 따라 가기 — 페이지의 색인이 생성되지 않더라도 페이지의 링크를 따라 가야합니다.
• noimageindex — 페이지의 이미지는 색인이 생성되지 않아야합니다.
• noarchive — 검색 결과에 페이지의 캐시 된 버전이 표시되지 않아야합니다.
• available_after — 특정 날짜 이후에는 페이지를 색인화해서는 안됩니다.

8. 표준 태그

정식 태그를 사용하면 콘텐츠가 중복 될 위험에서 벗어날 수 있습니다.

요점은 자신의 잘못이 아닌 특정 페이지가 여러 주소를 가질 수 있다는 것입니다. 때로는 http / https 및 다양한 추적 태그와 같은 다양한 아티팩트에서 발생하고 다른 경우에는 제품 카탈로그에서 사용할 수있는 다양한 정렬 및 사용자 정의 옵션으로 인해 발생합니다.

솔직히 말해서 모든 주소가 크롤링 예산과 페이지 권한에 부담을 줄 수 있고 성능 추적을 망칠 수도 있다는 점을 제외하면 큰 문제는 아닙니다. 대안은 표준 태그를 사용하여 검색 엔진에 주요 페이지 주소를 알려주는 것입니다.

모범 사례

잠재적 인 SEO 문제를 방지하려면 다음 페이지에 표준 태그를 적용하세요.

• 다른 URL을 통해 사용 가능한 페이지
• 콘텐츠가 매우 유사한 페이지
• 자체 URL 매개 변수를 생성하는 동적 페이지

마지막 생각들

이것들은 2020 년에도 여전히 걱정해야 할 최고의 HTML 태그이지만, 일부는 확실히 나가고 있다고 생각합니다. 앞서 언급했듯이 검색 엔진이 점점 더 똑똑 해짐에 따라 HTML 태그 최적화에 대한 필요성이 점점 줄어들고 있습니다. 이제 대부분의 항목을 알고리즘 방식으로 추론 할 수 있기 때문입니다. 또한 대부분의 최신 CMS 시스템은 이러한 요소를 최소한 어느 정도는 자동으로 추가합니다.

그래도 내 콘텐츠를 해석하기 위해 전적으로 Google에 맡기지는 않을 것입니다. 가능한 한 중간에 만나는 것이 가장 좋습니다.