- href 링크는 웹페이지 간 연결을 제공하는 HTML 속성입니다.
- 다양한 href 속성으로 링크의 동작 방식을 조정할 수 있습니다.
- 안전하고 정확한 링크 설정을 위한 원칙들을 지켜야 합니다.
href 링크란?
href 링크는 <a> tag 안에 포함되는 HTML 속성으로,
사용자가 클릭할 수 있는 하이퍼링크를 만들고 그 링크의 페이지 URL을 지정하는 역할을 합니다.
쉽게 말해, 웹페이지 간 연결을 해주는 코드입니다.
사용자는 이를 클릭해서 다른 페이지로 이동할 수 있고,
검색엔진은 이 링크를 따라가며 더 많은 콘텐츠를 탐색해 검색 결과에 활용할 수 있습니다.
예를 들어, 아래 HTML 코드처럼 쓰면 “Marketing EXIT”라는 텍스트가 클릭 가능한 링크가 됩니다.
이 내용을 모르고 백링크 작업을 하신다면, 돈낭비만 할 수 있으니 꼭 확인해보세요!
Href 속성에는 다양한 유형의 값이 들어갈 수 있습니다:
- 상대 경로 (예: href=”/about”):
같은 사이트 내 다른 페이지로 연결할 때 사용합니다.
웹사이트 이전(migration)이나 리브랜딩의 이유로 도메인 변경을 해도 상대 경로로 [[내부 링크]]는 그대로 유지된다는 장점이 있습니다. - 절대 경로 (예: href=“https://example.com”):
외부 사이트로 연결할 때 반드시 전체 웹주소(프로토콜 포함)를 사용해야 합니다. - 앵커 링크 (예: href=“https://example.com/#section”):
한 페이지 안의 특정 위치로 이동할 때 사용합니다.
보통 목차를 클릭했을 때 해당 섹션으로 점프하는 기능이 이겁니다. - 메일 링크 (예: href=“mailto:[email protected]”):
클릭 시 사용자의 이메일 프로그램이 열리고, 새로운 이메일 작성 창이 자동으로 생성됩니다. - 전화 링크 (예: href=“tel:+1234567890”):
모바일에서 클릭하면 바로 전화 연결이 됩니다. 클릭 한 번으로 전화를 걸 수 있어 모바일 사용자에게 적합합니다.
WordPress 같은 콘텐츠 관리 시스템(CMS)을 쓰면 이런 링크들을 굳이 코드로 작성하지 않아도 쉽게 설정할 수 있습니다.
하지만 경우에 따라 수동으로 코드를 다뤄야 할 상황도 있기 때문에 기본 개념을 알고 있으면 큰 도움이 됩니다.
SEO에서 a tag에 자주 쓰이는 속성과 값
<a> 태그에서는 링크의 동작 방식을 정할 수 있습니다.
여러 속성(attribute)과 그에 대한 설정 값(value)들의 조합이 다양합니다.
이 조합이 사용자 경험과 검색엔진 최적화(SEO)에 중요한 영향을 미칩니다.
target=”_blank”
target=”blank” 속성은 링크를 클릭했을 때 새 탭에서 열리도록 설정합니다.
외부 사이트 또는 내부 페이지로 연결할 때 이 속성을 사용하면,
사용자가 원래 페이지를 떠나지 않게 할 수 있어 체류 시간을 늘리는 데 도움이 됩니다.
따라서 외부 링크나 대용량 문서, 파일에 연결할 때 target=”blank” 속성을 사용할 것을 권장합니다.
또한 사용자가 실수로 원래 페이지를 잃지 않도록 하기 위한 목적도 있습니다.
한편, 웹 접근성 표준을 제시하는 W3C(World Wide Web Consortium)에서는 새 탭에서 열리는 링크에는 안내 문구를 함께 표시할 것(새 탭에서 열립니다)을 권장합니다.
예: “(새 탭에서 열립니다)” 등의 문구를 덧붙이는 방식
이는 시각적 정보 인지가 어려운 사용자도 예기치 않은 동작에 당황하지 않도록 돕는 조치입니다.
<a href="https://example.com" target="_blank">사이트 방문하기 (새 탭에서 열립니다)</a>
rel=“nofollow”
rel=“nofollow” 속성은 검색엔진에 해당 링크를 따라가지 말라고 지시합니다.
즉, 링크가 연결된 페이지에 SEO 가치(link juice라고도 표현)를 전달하지 않게 합니다.
보통 게시판에서 달리는 백링크들의 99% nofollow 속성입니다.
또한 신뢰하기 어려운 콘텐츠에 링크를 걸어야 할 경우,
이를 지지하지 않겠다는 의미로 rel=‘nofollow’를 사용하는 것이 좋습니다.”
예시:
<a href="https://example.com" rel="nofollow">사이트 방문하기</a>
이 외에도 사용자 생성 콘텐츠에는 rel=”ugc”를,
광고나 협찬 콘텐츠에는 rel=”sponsored”를 사용하는 것이 구글 가이드 라인에 위배되지 않는 속성 사용법입니다.
rel=“noopener”
rel=“noopener” 속성은 보안 강화를 위한 속성입니다.
새 탭에서 열린 페이지가 원래 페이지와 상호작용하지 못하도록 막아 보안 위협을 예방합니다.
예를 들어, 로그인된 상태의 페이지에서 악성 사이트로 연결되는 링크를 잘못 삽입했는데,
해당 링크에 rel=“noopener”를 설정하지 않았다면 어떤 일이 벌어질 수 있을까요?
이런 경우 “rel=‘noopener’ 없이 새 탭으로 연결된다면,
악성 사이트가 사용자가 상호작용하는 과정에서 원래 페이지의 URL을 바꾸거나 스크립트를 실행할 수 있습니다.”
이로 인해 사용자가 다시 원래 페이지로 돌아왔을 때, 해당 페이지가 더 이상 안전하지 않을 수 있습니다.
이러한 공격은 오직 target=”blank”와 함께 새 탭으로 열릴 때만 발생할 수 있기 때문에,
target=”blank”를 사용할 땐 반드시 rel=“noopener”도 함께 설정해야 합니다.
예시:
<a href="https://example.com" target="_blank" rel="noopener">사이트 방문하기</a>
rel=“noreferrer”
rel=“noreferrer” 속성은 사용자와 웹사이트의 개인정보 보호를 위해 사용됩니다.
이 속성이 추가되면 링크를 클릭했을 때 방문한 사이트가
어느 URL에서 트래픽이 유입됐는지 알 수 없게 됩니다.
예를 들어, 특정 불안장애에 대한 내용을 담고 있는 페이지의 글을 읽던 사용자가
그 글에 포함된 링크를 클릭해 치료사의 웹사이트로 이동했다고 가정해 보겠습니다.
이때 rel=“noreferrer”가 없다면,
해당 치료사 웹사이트는 GA4 같은 분석 도구나 서버에서,
사용자가 어떤 글을 읽다가 왔는지(즉, 출처 URL 전체)를 확인할 수 있습니다.
그 URL에 직접적인 개인정보가 담겨 있지 않더라도,
건강 관련 혹은 성 관련 문제 등 민감한 정보가 노출될 수 있습니다.
또한 경쟁사에게 링크를 걸었지만 그 사실을 알리고 싶지 않은 경우에도 이 속성을 사용할 수 있습니다.
예시:
<a href="https://example.com" target="_blank" rel="noreferrer">사이트 방문하기</a>
href 링크를 제대로 설정하기 위한 4가지 원칙
다음은 href 링크를 안전하고 정확하게 설정하기 위한 핵심 원칙들입니다.
1. 올바른 문법을 사용하기
정확한 문법으로 링크를 설정해야 링크가 의도한 대로 작동하고,
검색엔진과 사용자 모두 필요한 정보를 제대로 찾을 수 있습니다.
다음은 href 링크를 올바르게 작성하는 단계입니다:
- <a>로 시작합니다.
- href 속성을 정확히 입력합니다.
예: href=”https://example.com” - 각 속성 사이에는 반드시 공백을 넣어야 합니다.
예: <a href=”~” target=”_blank”>는 올바른 형태지만,
<a href=”~”target=”_blank”>는 잘못된 문법입니다. - href 속성을 >로 닫습니다.
- 앵커 텍스트를 넣습니다.
예: <a href=”https://example.com”>Visit our site</a> - 마지막에는 항상 </a>로 태그를 닫아야 합니다.
2. 앵커 텍스트의 중요성
앵커 텍스트(Anchor Text)는 사용자가 실제로 클릭하는 텍스트로,
검색엔진과 사용자 모두에게 해당 링크가 어떤 페이지로 연결되는지 알려주는 중요한 역할을 합니다.
예를 들어,
여기서 “services”가 앵커 텍스트입니다.
“여기를 클릭하세요” 같은 일반적인 문구보다는,
링크 대상의 내용을 설명해주는 구체적인 문구를 사용하는 것이 좋습니다.
예:
❌ 여기를 클릭하세요
✅ 마케팅 컨설팅 서비스
이처럼 문맥에 맞는 키워드가 포함된 앵커 텍스트는 SEO 에도 긍정적인 영향을 줍니다.
이와 같이 특정 키워드에 과도하게 링크를 삽입하는 행위는 검색엔진에 부정적인 신호를 줄 수 있으니 주의가 필요합니다.
