기초 HTML 속성 모음 9가지!
HTML은 대부분의 웹페이지를 구성하는 마크업 언어입니다. 즉 컴퓨터가 해석하는 개발 언어로 이해주시면 되겠는데요, 이는 테크니컬 SEO, 혹은 콘텐츠 SEO에서 가장 중요한 부분 중 하나라고 할 수 있습니다. 바로 검색 엔진 크롤링 봇에게 페이지에 대한 정보를 효과적으로 전달할 수 있기 때문입니다.
페이지 콘텐츠와 성격, 순서를 명확하게 설명하기 위한 언어로 또 HTML만한 것이 없는데요, 오늘은 SEO를 위한 기초 속성 중, 필수적인 속성에 대하 알아보도록 하겠습니다.
속성이란?
속성(Attribute)은 HTML 요소에 추가되는 부가 정보입니다.
속성은 요소 내부에 위치하며, 예를 들면 다음과 같은 형식으로 사용됩니다.
<link rel=”canonical” href=”https://www.example.com” />
이 속성들은 요소를 수정하는 값으로, 추가적인 정보들을 제공합니다. 위 HTML 태그의 경우, rel=”canonical” 이라는 속성은 해당 링크가 검색 엔진 크롤러에게 이 URL을 주요 URL로 간주하라고 알리는 역할을 합니다.
HTML 속성의 형식
속성은 이름과 값으로 구성됩니다. 예를 들어, 이미지를 정의할 때는 “src”라는 이름을 사용하고, 그 값은 이미지 파일 이름으로 설정할 수 있습니다. “alt” 속성은 이미지를 표시할 수 없을 때 대체 텍스트를 지정합니다. 코드 예시는 다음과 같습니다.
<img src=”ginger-cat.jpg” alt=”나무 위의 생강색 고양이”>
해당 코드는 나무 위에 올라간 생강색 고양이 이미지를 코드로 나타낸 것으로, 이미지 파일명은 ginger-cat jpg가 됩니다.
HTML 속성의 종류
앞서 설명한 속성들은 일반적으로 필수, 선택, 표준 또는 이벤트 속성으로 분류됩니다.
필수 속성
태그에 필수 속성이 없으면 해당 태그는 제대로 작동하지 않습니다. 즉 필수적으로 들어가야 하는 요소로, 앞선 예시들 중엔 이미지를 표한하는 “src”와 같은 속성이 있습니다.
선택 속성
선택 속성은 태그가 작동하는 데 필수는 아니지만, 태그의 추가 정보나 동작을 지정할 수 있습니다.
예를 들어 “style” 속성은 요소의 색상이나 글꼴 크기를 정의하는 데 사용할 수 있습니다. 이러한 속성은 “표준” 또는 “전역” 속성으로 알려져 있습니다.
SEO에서 자주 사용하는 속성 중 하나는 링크 태그를 수정하는 속성들입니다. 예를 들어 “rel” 및 “hreflang” 속성이 있습니다.
이벤트 속성
이벤트 속성은 특정 동작에 응답하는 방법을 정의하는 데 사용됩니다.
예를 들어, “onclick” 속성은 사용자가 버튼을 클릭할 때 JavaScript 함수가 수행할 작업을 정의합니다.
이 속성들은 태그를 사용하여 더 상호작용적인 페이지를 만들 수 있게 해줍니다.
HTML 속성이 중요한 이유
속성은 개발자가 웹사이트에 추가적인 컨텍스트와 기능을 추가할 수 있도록 해줍니다. SEO에서는 이러한 속성이 특히 중요한데, 태그에 필요한 맥락을 제공하고 검색 엔진 크롤러가 웹페이지를 크롤링하고 제공하는 방식을 안내하는 데 중요한 역할을 하기 때문입니다.
속성을 사용하면 특정 링크를 따르지 않도록 하거나, 여러 국가에서 사용되는 다른 언어를 사용하는 사용자에게 어떤 페이지를 제공할지를 쉽게 지정할 수 있습니다. 또한, 페이지가 인덱싱되지 않도록 쉽게 설정할 수도 있습니다. 많은 기술적 SEO 요소는 실제로 이와 같은 속성을 통해 제어됩니다.
SEO 기초 속성 11가지
Name 속성
Name 속성은 <meta> 태그와 함께 사용됩니다. 이 속성은 방문하는 크롤봇이 다음 정보가 자신에게 적용되는지 여부를 지정하는 방법입니다.
예를 들어, <meta name=”robots” content=”noindex” />는 모든 봇이 “noindex” 지시를 따르도록 지시합니다. 즉, 인덱싱 되지 않도록 명령하는 것인데요, 이 속성은 일반적으로 “메타 로봇 태그”로 불립니다.
Noindex 속성
위의 “noindex” 코드는 퍼블리셔가 검색 엔진의 인덱스에 포함될 수 있는 콘텐츠를 결정할 수 있도록 해줍니다. “noindex” 속성을 추가하면 검색 엔진이 이 페이지를 인덱스에 포함시키지 말라는 지시를 하게 됩니다.
Description 속성
Description 속성은 “메타 설명(meta description)”으로 더 잘 알려져 있으며, <meta> 태그와 함께 사용됩니다.
이 태그의 내용은 검색 결과 페이지(SERPs)에서 <title> 태그의 내용 아래에 표시됩니다.
Href 속성
Href 속성은 링크가 연결되는 대상을 지정합니다.
예를 들어, <a href=”www.example.com”>여기에 링크의 앵커 텍스트가 들어갑니다. </a> 형식으로 사용됩니다. 이는 링크 삽입 시 사용되는 속성입니다.
Rel=”nofollow”, Rel=”ugc”, Rel=”sponsored” 속성
rel=”nofollow” 속성은 봇에게 href 속성 내의 URL을 따라가지 말라고 지시합니다.
이는 링크 구축에서 중요한 역할을 하며, 특히 광고 또는 스폰서십과 같은 페이지 링크의 신뢰성을 결정하는 데 사용됩니다.
Hreflang 속성
Hreflang 속성은 여러 언어로 동일한 콘텐츠를 보여주는 웹사이트에서 검색 엔진에게 어떤 언어로 페이지를 보여줄지 지시합니다.
Canonical 속성
rel="canonical" 속성은 웹사이트 또는 도메인의 다른 페이지가 주요 페이지로 간주되어야 함을 검색 엔진에 알리는 역할을 합니다.
이 태그는 콘텐츠가 중복되거나 비슷한 페이지에서 매우 유용합니다.
Src 속성
src= 속성은 페이지에 표시되는 이미지의 위치를 참조하는 데 사용됩니다.
Alt 속성
alt= 속성은 이미지가 렌더링되지 못할 때 표시될 대체 텍스트를 지정합니다.
이 속성은 <img> 태그의 필수 요소이며, 비어 있을 수 있지만 대체 텍스트를 제공하는 것이 좋습니다.
이 가이드는 SEO에서 자주 언급되는 HTML 태그 속성에 대한 기초를 설명한 것인데요, 실제 SEO 콘텐츠 글에서의 페이지 정보와 함께 대조하여 보면 링크 셋팅 등에 더욱 도움이 될 것입니다. 해당 글을 참고해서 멋진 콘텐츠를 작성해보세요!
