Link 태그와 SEO

🌈 들어가기

next.js를 기반으로 동작하고 있는 중고나라 웹사이트에서 seo를 개선하기 위한 첫 작업으로 rel 속성에 대한 작업을 진행하게 되었다.

---

🤔 문제 상황

현재 중고나라 웹사이트에서 상품검색을 진행하면 상품리스팅에 광고가 포함되는 경우가 있다.

하지만, 아래의 화면처럼 광고에 대한 rel 속성이 정의되어있지 않아 검색엔진이 인지하지 못하는 문제가 발생하였다.

 

---

✨ 링크 태그와 검색엔진 SEO

검색엔진이 문서 내에 a 태그 ( 👉 next.js 에서의 Link) 를 만나게 되면, 그 속성에 연결된 url의 html을 읽으려는 시도가 시작될 것이다.

그렇기 때문에 a 태그의 rel 속성을 정의하여 검색엔진이 이를 읽을 수 있게 할 것인지, 현재 페이지와 관련이 없음을 알려줄 것인지를 지정할 수 있다.

 

📍 4가지 rel 속성과 관계

 

1. nofollow

<a href="" target="_blank" rel="nofollow"/>

• 검색엔진이 링크에 연결된 웹페이지를 무시하도록 지정 👉 즉, 해당 링크를 검색엔진 순위산정에 사용하지 않는 것..!
• 광고 또는 유료 웹페이지 링크등에 사용 가능

2. sponsored

<a href="" target="_blank" rel="sponsored"/>

• 광고 생성 또는 자동화된 웹페이지임을 검색엔진에게 알림
• nofollow와 동일하게 검색엔진에 링크로 연결된 웹페이지를 무시
• 상품성이 있는 광고 같은 웹페이지의 경우 sponsored 권장

3. noreferrer

<a href="" target="_blank" rel="noreferrer"/>

• 현재 웹페이지의 헤더 내용을 연결된 다른 웹페이지로 전달하지 않음

4. noopener

<a href="" target="_blank" rel="noopener"/>

• target=”_blank” 속성을 사용하여 연결된 웹페이지의 경우 window.opener로 웹페이지의 내용에 접근이 가능하다 → 하지만, 해당 속성을 적용하면 위의 접근이 거절된다.

 

---

✨결론

구글에서도 발신 링크의 관계 알리기에 대해 언급하고 있는만큼, SEO 작업이 중요한 페이지라면 해당 속성들을 고려하며 개발을 진행하는 것이 중요할 것이다.

검색엔진 최적화를 위한 발신 링크의 관계 알리기 | Google 검색 센터  |  문서  |  Google for Developers