a 태그 완벽 이해하기
구성 요소, 속성, SEO에 미치는 영향
a 태그란 무엇인가? – 구성 요소와 속성, SEO에 미치는 영향a 태그란 무엇인지 알고 계시나요? 우리가 흔히 알고 있는 하이퍼링크는 HTML 상에서 a 태그를 활용하여 작성되는데요.
a 태그는 SEO (검색엔진최적화) 프로세스에서 중요한 부분 중 하나인 링크 빌딩에서 빼놓을 수 없는 요소입니다. 그렇다면 어떻게 해야 a 태그를 효과적으로 작성하여 검색엔진에 최적화된 콘텐츠를 작성할 수 있을까요?
오늘은 <a> 태그의 정의와 구성 요소, 속성, <a> 태그와 <link> 태그의 차이점, 마지막으로 <a> 태그가 SEO에 미치는 영향에 대해 알아보도록 하겠습니다.
[목차]
a 태그란 무엇인가?
a 태그의 구성 요소와 속성
a 태그가 SEO에 미치는 영향
a 태그란 무엇인가?
<a> 태그는 한 페이지에서 다른 페이지를 연결할 때 사용하는 하이퍼링크를 말할 때 사용하며, 앵커 태그라고 부르기도 합니다.
<a> 태그는 다음과 같은 형태로 사용되는데요.
<a href=https://seo.tbwakorea.com>TBWA DataLab 블로그</a>
<a> 태그 코드 내부에는 웹페이지, 이메일 주소, 이미지, 비디오 등이 포함될 수 있습니다.
만약, <a> 태그가 같은 웹사이트 내로 이동하도록 작성되어 있다면, 이를 내부 링크라고 부릅니다. 반면, <a> 태그가 다른 웹사이트로 이동하도록 작성되어 있다면, 이를 외부 링크라고 부릅니다.
a 태그의 구성 요소와 속성
그렇다면 <a> 태그는 어떤 요소들로 이루어져 있고, 어떤 속성을 가지고 있을까요?
a 태그 구성 요소
<a> 태그는 총 4가지 요소로 구성되어 있는데요. 오프닝 태그(Opening Tag), 태그 속성(Attribute)과 속성값(Attribute value), 앵커 텍스트(Anchor Text), 클로징 태그(Closing Tag)로 이루어져 있습니다.
오프닝 태그(Opening Tag): 태그의 시작을 나타냄
태그 속성(Attribute)과 속성값(Attribute value): 태그가 링크되는 페이지를 나타내고, 태그를 클릭할 때 태그가 작동하는 방식에 영향을 미침
앵커 텍스트(Anchor Text): 사용자가 링크를 방문하기 위해 클릭하는 텍스트
클로징 태그(Closing Tag): 태그의 마지막을 나타내며, 로 표기함
이 중, 앵커 텍스트는 우리가 화면에서 확인할 수 있는 텍스트이기 때문에, ‘링크’, ‘여기’와 같은 불확실한 문구보다는 이동하고자 하는 다른 페이지의 핵심 키워드를 포함해야 합니다.
그 이유는 다음과 같습니다. 검색 엔진이나 크롤링 봇의 경우, 앵커 텍스트에 기재된 내용이 페이지의 내용과 같다고 이해하기 때문에 이동하고자 하는 페이지에 대한 설명이 부족한 앵커 텍스트는 SEO적 측면에서 좋지 않습니다.
a 태그 속성
지금부터는 HTML <a> 태그의 속성 종류에 대해 설명 드리겠습니다.
1) href
href 속성은 링크된 페이지의 URL을 명시하고 가리킵니다.
<a href=https://seo.tbwakorea.com>TBWA DataLab 블로그</a>
위 코드에서 “href” 속성은 “https://seo.tbwakorea.com” 값을 가지고, 링크를 클릭한 사용자들이 페이지를 방문하도록 유도합니다.
다른 <a> 태그 속성과는 달리, href 속성은 필수적으로 사용해야 합니다. 만약, href 속성이 없다면, 연결하고자 하는 페이지에 대한 정보가 없어 링크가 동작할 수 없기 때문입니다.
2) hreflang
hreflang 속성은 링크된 페이지가 무슨 언어로 되어 있는지를 명시하고, 단순히 참고 용도로만 사용됩니다.
이 속성은 반드시 href 속성이 설정되어야만 사용할 수 있고 <a hreflang=”언어 코드”> 형태로 작성할 수 있습니다. 언어 코드는 알파벳 두 글자로 이루어져 있으며, ko(한국어), en(영어), zh(중국어), ja(일본어) 등이 있습니다.
3) rel
rel 속성은 현재 페이지와 링크된 페이지 사이의 연관 관계를 명시합니다. 링크에 대한 더 많은 정보를 검색 엔진에 제공하기 위해 이 속성을 사용하고, rel 속성은 href 속성이 설정되어 있어야만 사용할 수 있습니다.
rel 속성값에는 어떤 값을 작성할 수 있는지 몇 가지 간단히 소개하겠습니다.
nofollow: 유료 링크와 같이 검색 엔진이나 봇이 추적해서는 안 될 때 사용함
noreferrer: 링크된 페이지가 현재 페이지를 방문자 출처로 인식하는 것을 막을 때 사용함
noopener: 사용자가 링크를 클릭할 때 액세스 권한 없이 새 탭에서 링크가 열리도록 할 때 사용함
author: 해당 문서의 저자에 대한 링크를 나타낼 때 사용함
external: 링크된 문서가 현재 문서와 같은 사이트 내에 있지 않음을 나타낼 때 사용함
help: 도움말 문서에 대한 링크를 나타낼 때 사용함
4) target
target 속성은 대표적인 <a> 태그 속성 중 하나로, 링크된 페이지를 클릭했을 때 페이지가 열릴 위치를 명시합니다. 만약, <a> 태그가 target 속성을 포함하고 있지 않다면, 이는 디폴트로 “_self”를 target 속성값으로 가지게 됩니다.
가장 대표적인 target 속성값으로는 링크된 페이지를 새 브라우저에서 열게 하는 “_blank”가 있고, 다른 속성값에 대해서도 간단히 소개하겠습니다.
_blank: 링크된 페이지를 새로운 윈도우나 탭에서 오픈함
_self: 링크된 페이지를 현재 위치한 페이지에서 오픈함 (기본값)
_parent: 링크된 페이지를 현재 페이지의 부모 창에서 오픈함 (부모 창이 없다면 기본값으로 작동)
_top: 전체 브라우저 창에서 가장 상위의 창에서 오픈함 (다른 창이 없다면 기본값으로 작동)
5) type
type 속성은 링크된 페이지의 인터넷 미디어 타입(MIME 타입)을 명시합니다. 이 속성은 반드시 href 속성이 설정되어야만 사용할 수 있습니다.
여기서, MIME이란 Multipurpose Internet Mail Extensions의 약자로 웹을 통해 여러 형태의 파일을 전달하는 데 사용하고 있습니다. 종류로는 XML Media, Application, 오디오, TEXT 타입 등이 있습니다.
type 속성 작성 형태는 최상위 유형/하위 유형으로 <a type=”application/javascript”>와 같은 형식으로 작성합니다.
6) download
download 속성은 링크를 클릭할 때 대상 페이지로 연결되지 않고 해당 콘텐츠가 다운로드됨을 명시합니다.
작성 형태는 <a download=”파일 이름”>으로, 속성값에는 다운로드되는 파일의 이름이 들어가야 합니다. 만약 속성값을 생략한다면, 디폴트로 파일의 원래 이름이 사용됩니다.
a 태그와 link 태그의 차이점
HTML에서 <a> 태그와 <link> 태그는 URL을 명시하고 있다는 점에서 혼동하기 쉬운데, 어떤 차이점이 있을까요?
Image Inspired by Semrush
먼저, <a> 태그는 HTML에서 <body> 섹션에 있지만, <link> 태그는 <head> 섹션에 있습니다.
또한, <link> 태그는 다른 페이지로의 이동과는 관련 없이 <link> 태그에 포함된 css나 이미지 파일 등 현재 문서와 외부 문서의 관계를 정의하기 위한 태그입니다. 일반적으로, <link> 태그는 스타일 시트 연결, 사이트 아이콘 연결 등 관계 정의가 필요할 때 사용하고 있습니다.
마지막으로, <a> 태그는 클로징 태그가 필요하지만, <link> 태그에는 클로징 태그가 필요하지 않다는 차이점이 있습니다.
a 태그가 SEO에 미치는 영향
1) a 태그를 사용하여 사용자 경험(UX) 개선하기
<a> 태그를 사용해 웹사이트를 서로 연결하면, 사용자가 다른 콘텐츠를 발견하는 데에 도움을 줄 수 있습니다.
내부 링크가 탐색 메뉴 내에 있는 경우, 사용자가 웹사이트의 다양한 섹션을 탐색할 수 있도록 합니다. 앵커 링크의 경우, 사용자가 페이지 내 특정 부분은 편하게 넘겨서 보고 싶은 부분만 탐색할 수 있도록 합니다.
또한, 현재 페이지에서 간략하게 언급한 주제에 대해 구체적인 가이드로 사용자를 안내해, 콘텐츠 핵심을 구축하는 데 특히 도움이 됩니다.
그리고 사용자가 웹사이트를 더 오래 사용할 수 있도록, 현재 콘텐츠의 마지막 부분에서 다른 페이지를 사용자에게 추천해야 합니다.
2) a 태그를 사용하여 페이지 가치 및 권한 전달하기
<a> 태그를 사용하면 설정된 내부 링크를 통해 검색 엔진의 관점에서 해당 페이지의 가치가 높아집니다.
이는 특정 페이지에 대한 링크가 해당 페이지의 유용성에 대한 신뢰도를 보여주기 때문인데요. 페이지가 신뢰할 수 있는 웹사이트로부터 더 많은 링크를 받을수록 이러한 웹사이트가 해당 페이지에 더 많은 가치와 권한을 전달할 가능성이 높습니다.
따라서, 결과적으로 검색 엔진은 해당 페이지를 더 권위 있는 페이지로 간주하게 되고, 검색 결과에서 더 높은 순위를 차지할 수 있습니다.
지금까지 <a> 태그의 정의, <a> 태그의 구성 요소와 속성, <a> 태그와 <link> 태그의 차이점, <a> 태그가 SEO에 미치는 영향에 대해 알아보았습니다. <a> 태그의 구성 요소와 속성을 잘 고려하여 코드를 작성한다면 SEO에 최적화된 콘텐츠를 작성할 수 있을 것입니다.
SEO에 대해 더 궁금하신 사항들이 있다면, 아래 링크를 통해 SEO 컨설팅 서비스를 받아보세요!
>> TBWA KOREA SEO 컨설팅 서비스 바로가기
해당 글은 TBWA 데이터랩과 모비인사이드의 파트너쉽으로 제공되는 기사입니다.
모비인사이드의 뉴스레터를 구독해보세요
