<a> vs <button> 뭘 써야할까? (SEO)

결론부터 말하자면,
url이 있다 : <a>
url이 없다 : <button>

HTML에서 <a> 요소는 하이퍼링크를 생성하고, <button> 요소는 클릭 가능한 버튼을 생성합니다.

<a> 요소는 일반적으로 다른 페이지, 동일한 페이지의 다른 부분, 파일, 이메일 주소, 전화 번호 등과 같은 다른 위치로 연결하는 링크를 생성하는 데 사용됩니다.
<button> 요소는 일반적으로 사용자 상호 작용을 처리하는 데 사용됩니다. 예를 들어, 폼 제출 버튼, 로그인 버튼, 취소 버튼 등을 만들 수 있습니다.

SEO 관점에서

<a> 요소는 링크의 대상 페이지와의 관련성을 강조하는 앵커 텍스트를 포함할 수 있어 검색 엔진 최적화에 유용합니다. 또한, 링크의 대상 페이지와 관련된 키워드를 사용할 수 있으며, 다른 사이트에서 링크를 받을 경우 페이지의 인기도와 순위에도 영향을 미칠 수 있습니다.
<button> 요소는 사용자 상호 작용을 처리하는 것이 목적이므로 검색 엔진 최적화에 큰 영향을 미치지 않습니다.

그러면 <a>태그와 <button> 태그의 차이를 조금 더 자세히 알아보겠습니다.

<a>

<a> 요소는 일반적으로 하이퍼링크를 만드는 데 사용됩니다. 클릭 시 새로운 페이지로 이동하거나 현재 페이지 내의 특정 섹션으로 스크롤됩니다. 고유한 url이 있을 때, 섹션 이동(hash값 있어야함), 모달 팝업 창(dialog id값 있어야함) 오픈 등의 경우에 사용되며, cursor 모양은 pointer 입니다. 보통 링크가 있을 때만 cursor : pointer를 쓸 수 있습니다.
요즘은 보안상의 이유로 rel="noopener noreferrer"를 필수로 추가해야 합니다.

<a> 요소의 예시:

<!-- 네비게이션 메뉴 항목을 클릭하여 다른 페이지로 이동할 수 있는 하이퍼링크 -->
<nav>
  <ul>
    <li><a href="about.html">About</a></li>
    <li><a href="services.html">Services</a></li>
    <li><a href="contact.html">Contact</a></li>
  </ul>
</nav>

<!-- 이미지에 링크를 추가하여 해당 이미지를 클릭하면 다른 페이지로 이동 -->
<a href="https://example.com">
  <img src="example.jpg" alt="Example Image">
</a>

<!-- 문서 내의 다른 부분으로 스크롤되는 링크 -->
<h2 id="section1">Section 1</h2>
<p>Some text...</p>
<a href="#section1">Go to Section 1</a>

<a>요소의 속성

href 속성:
이 속성은 링크 대상 URL을 정의합니다. 링크 대상 페이지의 URL은 검색 엔진이 색인화하는 데 중요한 역할을 합니다. href 속성의 값은 검색 엔진이 읽을 수 있는 형식이어야 합니다.
title 속성:
이 속성은 링크에 대한 추가 정보를 제공합니다. title 속성을 사용하면 검색 엔진이 링크에 대한 정보를 이해하고 검색 결과에 노출시키는 데 도움이 됩니다.
rel 속성:
이 속성은 현재 문서와 링크 대상 문서 간의 관계를 정의합니다. 예를 들어, rel="nofollow"를 사용하면 검색 엔진이 해당 링크를 따라가지 않도록 할 수 있습니다.
target 속성:
이 속성은 링크를 클릭했을 때 링크 대상 문서가 열리는 위치를 정의합니다. 예를 들어, target="_blank"를 사용하면 링크 대상 문서가 새 창에서 열립니다. 이 속성은 사용자 경험과 관련된 요소이므로 SEO에 직접적인 영향은 없습니다.

<a>요소의 'rel' 속성

rel 속성은 하이퍼링크가 가리키는 문서와의 관계를 명시하는 데 사용됩니다. 일반적으로 rel 속성은 검색 엔진에게 링크된 페이지의 내용을 더 잘 이해하도록 돕고, 사용자 에이전트에게 링크된 페이지의 정보를 제공하기 위해 사용됩니다.

rel 속성은 다양한 값을 가질 수 있습니다. 그 중에서도 rel="nofollow"는 검색 엔진이 해당 링크를 따라가지 않도록 막아주는 역할을 합니다. 이 속성은 웹 페이지 주인이 사용자가 클릭한 링크에 대해 어떤 식으로든 연관되지 않도록 방지하기 위해 사용될 수 있습니다. 예를 들어, 댓글이나 게시판에서 자동으로 생성되는 링크에 대해 rel="nofollow" 속성을 추가함으로써 스팸 댓글 등의 문제를 예방할 수 있습니다.

또한 rel="noopener" 속성은 새 탭에서 링크를 열 때 보안 이슈를 예방하기 위해 사용됩니다. 이 속성은 하이퍼링크를 통해 새 창을 열 때, 새 창에서 원래 페이지를 제어하는 것을 방지하여 보안상의 문제를 예방합니다. 예를 들어, 악성 스크립트가 새 창을 통해 부모 창을 제어하고 쿠키를 훔쳐갈 수 있는 경우를 막을 수 있습니다.

스크린 리더 사용자를 위한 rel 속성의 중요성은 다소 논란이 됩니다. 일부 스크린 리더에서는 rel 속성을 읽지 않는 경우가 있습니다. 그러나 보다 많은 수의 스크린 리더는 이 속성을 읽고, 링크가 가리키는 페이지와의 관계를 이해하는 데 도움을 줍니다. 따라서 SEO 관점에서 rel 속성은 검색 엔진이 링크된 페이지의 내용을 더 잘 이해하도록 돕는 역할을 할 수 있습니다.
몇 가지 일반적인 rel 속성은 다음과 같습니다.

rel="noopener":
링크된 페이지가 현재 페이지를 열어둔 탭을 덮어쓰지 않도록 보호합니다. 보안 취약점으로 인해 중요한 속성입니다.
rel="noreferrer":
링크된 페이지로 HTTP Referer 헤더를 전송하지 않도록 합니다. 이 속성은 개인 정보 보호를 위한 것입니다.
rel="nofollow":
링크된 페이지에 대한 검색 엔진 크롤러의 추적을 방지합니다. 이 속성은 스팸 댓글 등으로부터 웹사이트를 보호하기 위한 것입니다.
rel="nofollow sponsored":
링크가 스폰서링 된 링크임을 나타냅니다. 구글에서 추가된 속성으로 광고와 같은 sponsored와 함께 사용됩니다.
rel="nofollow ugc":
사용자가 작성한 글에서 추가된 링크이며, nofollow 와 함께 사용되어 ugc(User Generated Content)를 나타냅니다.

rel 속성은 여러 개 사용할 수 있습니다. 다음은 rel 속성에 여러 값을 지정하는 예시입니다.

<a href="https://abc.com" title="abc 링크" rel="nofollow noopener noreferrer" target="_blank">ABC</a>

위 코드에서는 rel 속성에 "nofollow", "noopener", "noreferrer" 속성을 모두 지정하고 있습니다. 이를 통해 검색 엔진은 해당 링크를 따라가지 않도록 하고, 보안상의 이유로 참조하는 페이지와 새 창 사이의 연결을 차단합니다.

"noopener", "noreferrer" 이 두 속성은 필수로 추가하는 것이 좋습니다.

rel 속성은 검색 엔진이 링크된 페이지를 해석하는 데 도움이 되며, 검색 결과에 영향을 미칩니다. 이러한 이유로, rel 속성은 SEO 관련 작업에서 중요한 역할을 합니다.

<button>

<button> 요소는 단일 기능을 수행하는 버튼을 만드는 데 사용됩니다. 이 버튼은 주로 양식 제출, 대화 상자 열기 등과 같은 작업을 수행합니다.

<button> 요소의 예시:

<!-- 폼 제출 버튼 -->
<form>
  <input type="text" name="username" placeholder="Enter username">
  <input type="password" name="password" placeholder="Enter password">
  <button type="submit">Submit</button>
</form>

<!-- 모달 대화상자의 닫기 버튼 -->
<div class="modal">
  <p>Modal content</p>
  <button class="close-modal" aria-label="Close modal window">Close</button>
</div>

<!-- 숫자 증가/감소 버튼 -->
<div>
  <button id="increase">+</button>
  <span id="number">0</span>
  <button id="decrease">-</button>
</div>

<button>요소의 속성

accesskey: 단축키 지정
autofocus: 페이지 로딩 시 자동 포커스
disabled: 비활성화 상태 지정. 클릭이 불가능합니다.
form: 해당 버튼이 속한 폼의 ID 지정. 폼(form) 요소와 버튼 요소가 다른 위치에 있어도 서버로 데이터를 전송할 수 있습니다.
formaction: 폼 제출 시 이동할 URL 지정
formenctype: 폼 전송 시 인코딩 타입 설정
formmethod: 폼 전송 시 사용할 HTTP 메서드 설정
formnovalidate: 폼 전송 전 유효성 검사 생략 여부 설정
formtarget: 폼 제출 후 이동할 위치 지정
name: 버튼의 이름 설정. 폼 데이터를 전송할 때 버튼의 이름과 함께 값을 전송합니다.
type: 버튼의 유형 설정
value: 버튼의 값 설정. 폼 데이터를 전송할 때 버튼의 값과 함께 값을 전송합니다.

<button>요소의 type

type="button": 일반적인 버튼을 의미합니다. 클릭하면 아무런 행동도 일어나지 않습니다.
type="submit": 폼(form)을 제출하는 버튼을 의미합니다. 클릭하면 폼 데이터를 제출하게 됩니다.
type="reset": 폼(form)을 초기화하는 버튼을 의미합니다. 클릭하면 폼에 입력한 데이터를 초기화하게 됩니다.
type="menu": 브라우저의 메뉴를 열어주는 버튼을 의미합니다. 클릭하면 브라우저의 메뉴가 열리게 됩니다.

SEO와 스크린 리더 관점에서 <button> 태그는 일반적으로 사용자가 클릭하여 어떤 동작을 수행하는 버튼으로 인식됩니다. 따라서, 버튼이 수행하는 작업과 관련된 명확한 텍스트나 레이블이 제공되어야 합니다. 또한, 버튼에 관련된 텍스트나 레이블은 CSS로 숨기지 않고, 스크린 리더 사용자도 읽을 수 있도록 해야 합니다. 이를 위해, <button> 태그의 내부에 텍스트나 이미지를 추가할 수 있습니다. 또한, 버튼의 기능에 대한 설명을 추가하는 aria-label 또는 aria-labelledby 속성을 사용할 수 있습니다.

검색 버튼 예시

<button type="submit" aria-label="검색">
  <i class="fa fa-search"></i>
</button>

type="submit" 속성을 사용하여 검색 버튼이 양식을 제출할 수 있도록 합니다.
aria-label 속성을 사용하여 스크린 리더 사용자에게 검색 버튼이 어떤 역할을 하는지 명확하게 알려줍니다.
아이콘을 제공하여 버튼의 시각적인 의미를 강조합니다.

페이지 상단 이동 버튼 예시

<button type="button" onclick="scrollToTop()" aria-label="상단으로 이동">
  <i class="fas fa-arrow-up"></i>
</button>

onclick 속성을 사용하여 버튼이 클릭되었을 때 페이지 상단으로 스크롤되는 함수를 정의합니다.
aria-label 속성을 사용하여 스크린 리더 사용자에게 버튼이 어떤 역할을 하는지 명확하게 알려줍니다.
화살표 아이콘을 제공하여 버튼의 시각적인 의미를 강조합니다.

정리하자면, <button>과 <a> 태그의 주요 차이점은 다음과 같습니다.

역할
<a> 태그는 링크를 표시하며, 클릭하면 다른 페이지로 이동합니다.
<button> 태그는 클릭 가능한 버튼을 표시하며, 클릭 시 다른 작업을 수행합니다.
URL 연결
<a> 태그는 href 속성을 사용하여 다른 페이지로 이동할 URL을 지정합니다.
<button> 태그는 href 속성이 없으며, form 요소 내에서 사용될 때 type 속성을 사용하여 양식을 전송하거나 자바스크립트 함수를 호출합니다.
브라우저 동작
<a> 태그를 클릭하면 브라우저는 새 페이지를 로드하거나 같은 페이지에서 새 위치를 표시합니다.
<button> 태그를 클릭하면 일반적으로 페이지 이동 없이 자바스크립트 함수를 호출하거나, form 요소 내에서 사용될 경우 양식이 전송됩니다.
기능 및 스타일링
<a> 태그는 CSS로 스타일링 할 수 있습니다. 또한, target 속성을 사용하여 새 창 또는 탭에서 링크를 열 수 있습니다.
<button> 태그는 HTML 및 CSS로 스타일링 할 수 있으며, disabled 속성을 사용하여 버튼을 비활성화 할 수 있습니다.
따라서, 링크를 표시하거나 페이지 간 이동을 위해서는 <a> 태그를 사용하고, 버튼 기능을 수행하거나 양식을 제출하기 위해서는 <button> 태그를 사용하는 것이 좋습니다.

저작자표시 (새창열림)

iroiro