SEO에 적절하게 사용되는 웹 요소

2019년 1월 16일 최종 업데이트

대부분의 웹 페이지는 HTML, CSS 및 JavaScript의 3가지 기본 요소로 구성됩니다. 이러한 빌딩 블록은 렌더링에 무엇을 사용하든 모든 웹 페이지를 구성합니다. 각 웹 요소에는 적절한 위치가 있습니다. 겹치는 부분이 있을 수 있지만 의도적으로 사용하면 SEO에 최적화된 페이지를 만드는 데 도움이 됩니다. 그렇다면 이러한 요소는 어떻게 사용되어야 하며 오용될 수 있는 몇 가지 방법은 무엇입니까?

기본 웹 요소 기능

웹 페이지를 집에 비유해 보겠습니다. 집에는 여러 부분이 있으며 각각은 제자리에 있고 목적에 부합합니다. 우리 웹 페이지 하우스에서 HTML은 구조적 웹 요소, 트러스, 벽, 기초와 유사합니다. HTML은 순서와 어떤 요소가 어디에 나타나는지 개략적으로 설명하는 중요한 페이지 콘텐츠 레이아웃을 제공합니다.

CSS는 스타일 지정에 사용해야 합니다. 우리가 집 그림을 고수한다면 이것은 벽의 색상, 캐비닛, 바닥의 유형 등이 될 것입니다. 페이지의 색상, 글꼴 크기, 페이지의 실제 레이아웃도 CSS에서 정의할 수 있습니다. 하지만 레이아웃이 HTML에 있어야 하지 않습니까? 좋은 질문. HTML은 페이지에 있을 요소의 레이아웃을 지정해야 하지만 CSS는 해당 요소가 해당 페이지에 표시되는 방식을 제어해야 합니다. CSS는 웹의 응답성의 많은 부분을 담당합니다.

이제 집을 지었으므로 전기 및 수도와 같은 일부 유틸리티를 사용할 차례입니다. 클릭 시 요소 변경, 데이터 표시 등과 같은 페이지의 대화형 요소에는 JavaScript를 사용해야 합니다. JavaScript는 특정 대상이나 사용 사례에 맞게 조정하는 경우 잘 작동하는 페이지의 전체 모양과 느낌을 변경하는 데 사용할 수 있습니다.

왜 그들을 분리합니까?

따라서 레이아웃에 HTML과 CSS를 모두 사용하고 스타일 지정에 JavaScript와 CSS를 사용할 수 있다면 왜 분리해야 할까요? Google은 페이지의 색인을 생성할 때 페이지의 내용과 기능에 대한 주요 지표를 찾습니다. 요소 중 하나를 부적절하게 사용하면 잘못된 신호를 보내 순위를 손상시킬 수 있습니다. 이는 요소에 대한 사전 설정을 사용하여 스타일을 지정하거나 CSS에서 수행할 수 있는 작업을 수행하기 위해 페이지 속도를 늦추는 불필요한 JavaScript를 실행하는 CMS 편집기로 작업할 때 자주 발생할 수 있습니다.

따라서 일반적인 오용에 대해 검토해 보겠습니다.

제목 태그 오용

가장 흔한 오용 중 하나는 제목 태그를 사용하여 웹 요소의 스타일을 지정하는 것입니다. 표제 태그는 가장 중요한 H1 태그(모든 페이지에 있어야 함)에서 H6까지 페이지의 주요 주제를 간략하게 설명합니다. 요소의 스타일을 지정하는 데 사용하면 해당 단어가 페이지의 내용임을 Google에 알리는 것입니다. 또는 잘못된 표제 태그를 사용하고 있을 수 있습니다(예: 글꼴 크기를 더 좋아하기 때문에 h2 대신 h3을 사용). 두 경우 모두 잘못된 메시지를 보내고 있습니다. 대신 CSS를 사용하여 원하는 적절한 크기나 글꼴로 요소의 스타일을 지정해야 합니다.

더블 H1 태그

또 다른 일반적인 문제는 페이지에 2개 이상의 H1 태그가 있다는 것입니다. H1 태그는 페이지의 주요 아이디어여야 합니다. 페이지를 방문하는 모든 사람(및 모든 크롤링 봇)에 대해 알려야 하므로 하나만 있어야 합니다. 두 개의 H1 태그를 갖는 것은 페이지에 두 개의 다른 신호를 보내는 것과 같습니다. 일부 사람들과 심지어 전문적인 주제조차도 H1 태그에 로고를 넣는 경향이 있습니다. 따라서 페이지당 하나만 있는지 확인하십시오.

---

---

모든 이미지는 배경 이미지입니다.

이미지 배경이 있는 것에는 아무런 문제가 없습니다. 이미지는 시선을 사로잡으며 사이트에 많은 가치를 더하고 사용자가 제품이나 서비스를 구매하도록 할 수 있습니다. 그러나 모든 이미지가 배경 이미지가 아니어야 합니다. 최근 사이트에서 작업하면서 CMS가 모든 이미지를 배경 이미지로 바꾸는 것을 발견했습니다. 여기서 의도는 스타일을 지정하고 크기를 더 쉽게 조정하는 것입니다. 보기 좋게 만들 수는 있지만 페이지에 있는 이미지의 중요한 이점인 대체 텍스트를 놓치게 됩니다. 대체 텍스트는 이미지의 내용을 설명하고 화면 판독기에서 그림의 내용을 식별하는 데 사용됩니다. 모든 이미지를 배경 이미지로 만들면 페이지의 액세스 가능성이 줄어들어 장애가 있는 사람들이 더 어려워지고 순위에서 Google의 타격을 받을 수 있습니다.

JavaScript로 CSS 렌더링

JavaScript를 통해 CSS를 불필요하게 제공하면 페이지의 로드 시간이 늘어납니다. 추가 단계를 거치지 않고 헤더에 CSS 파일을 연결하는 것이 훨씬 좋습니다. 또한 간단한 애니메이션이나 호버 효과에 JavaScript를 사용하면 CSS를 통해 훨씬 더 빠르게 수행할 수 있는 로드 시간이 추가됩니다. 필요하지 않을 때 JavaScript 프레임워크를 추가해도 로드 시간이 늘어날 수 있습니다. 버튼에 애니메이션을 적용하기 위해 jQuery를 로드하는 것과 같습니다. 바닐라 JavaScript를 작성하는 대신 CSS 또는 CSS 애니메이션 스타일 시트의 애니메이션 요소를 사용하면 훨씬 빠르게 로드됩니다.

HTML의 웹 요소 스타일 지정

HTML 파일에서 직접 요소의 스타일을 지정하는 것은 논란의 여지가 있는 주제입니다. WordPress 및 기타 CMS의 많은 테마 및 플러그인은 계속해서 스타일 시트 및 기타 플러그인 덮어쓰기에 의존합니다. 이것은 일반적으로 나쁜 습관으로 간주됩니다. 일부 콘텐츠 제작자는 테마 스타일을 변경하기 위해 콘텐츠에 직접 스타일을 씁니다. 이게 무슨 문제야? HTML 요소에 직접 작성된 스타일이 CSS 파일의 스타일을 덮어쓸 때 종종 CSS 문제가 발생합니다. 이를 방지하려면 HTML에 직접 작성하는 대신 웹 요소에 클래스를 할당하고 스타일을 추가할 새 스타일 시트를 추가하십시오. 이렇게 하면 사이트를 손상시키거나 스타일을 잘못 지정할 수 있는 충돌하는 시트 문제를 피할 수 있습니다.

레이아웃 스타일 지정에 HTML 사용

테마는 종종 CSS 선택기와 HTML 구조를 결합하기 때문에 이것은 약간 까다롭습니다. 이것은 페이지를 읽기 쉽고 기능적으로 만드는 중요한 스타일을 깨지 않고 HTML 구조를 변경하는 것을 사람이 더 어렵게 만듭니다. 예를 들어:

예에서 전자의 HTML 구조를 변경하면 해당 요소가 구조에 종속되어 있기 때문에 해당 요소에 대한 모든 스타일을 잃게 됩니다. 대신 나중에 클래스를 통해처럼 스타일을 구조에서 분리하면 HTML 구조를 변경하더라도 CSS를 재사용할 수 있습니다.

올바른 형식의 페이지는 최적화된 페이지입니다.

페이지의 콘텐츠는 순위에 큰 영향을 미칩니다. 웹 페이지 요소를 적절히 활용하는 것도 마찬가지입니다. 특히 HTML, CSS 및 JavaScript는 페이지 SEO를 최적화하는 데 똑같이 큰 역할을 합니다. 각 웹 요소의 역할을 알고 적절하게 사용하면 순위를 높일 수 있습니다. 기능적이고 매력적인 페이지를 만들기만 하면 됩니다. CMS의 테마를 전환하거나 페이지에 사용자 정의 CSS 또는 JavaScript를 추가하려는 경우 다시 한 번 살펴보고 웹 요소를 올바르게 사용하고 있는지 확인하십시오.