본문 바로가기

SEO2

<a role="button"> 과 <button> 차이는 무엇일까? [접근성, SEO] 상황 설명텍스트 형식의 요소에 click 이벤트를 달아서 사용하려 할 때 다음과 같은 의문점이 들었다 "link 느낌의 요소라면 button 태그보다 a 태그를 쓰는 것이 더 적절하지 않나?"거기에 더해서 role="button 속성을 사용해서 접근성을 보완해서 사용하면 적절하겠다는 결론에 다다라서 최종적으로 ... 형태로 구성했다.그러던 와중 SEO 측면에서 과연 이런 방식이 유용한지에 대해 의문이 생겨 내용을 찾아보게 됐다.WAI-ARIA의 role 이해WAI-ARIA role 은 웹 페이지의 요소가 수행하는 기능을 명시적으로 정의하여 스크린 리더나 다른 보조 기술이 해당 요소를 이해하고 적절한 방식으로 상호작용할 수 있도록 도움을 줍니다. HTML 요소는 본래 기본 역할을 가지고 있지만, ARIA.. 2024. 11. 28.
Next.js 에 <Link /> 는 무엇인가 next/link Next.js 에서 제공하는 Routing 기능을 가진 태그 ※ Next.js 의 특별한 Routing 에 관한 내용을 참고하자 속성 href 필수 요소 탐색할 경로 또는 URL 객체 형태로 사용 할 수 있습니다. as 브라우저에서 클릭 시 이동할 링크를 미리 지정할 수 있는 기능을 제공,서버사이드 렌더링(Server-Side Rendering)과 같이 서버에서 렌더링하는 경우에 유용하게 사용하며 as prop은 href prop과 함께 사용하는 것이 일반적이다. 공식문서로는 이해가 힘들어 chatGPT 에게 많이 물어본 결과 href 의 값은 가변적일 수 있는데 SSR 상황에서 as 를 활용하면 미리 링크에대한 정보를 가지고 있는 셈이 된다. 추가적으로 성능상의 이점이 어는 정도 되는.. 2023. 4. 6.