[NextJS] SEO for SVG image file

nextjs에서 SEO와 관련해서 svg파일을 어떤식으로 보여줘야할지 고민하게 되었다.

svg SEO를 구글링해본 결과
|https://vecta.io/blog/best-practices-for-svg-seo-in-google-image

Best practices for SVG SEO in Google Image

위와 같은 글을 발견하였고 정리해보고자 한다.

가장 빠르고 좋은 방법은 바로 이미지 태그를 이용하거나 nextJS에서는 Image 컴포넌트를 이용해서 props의 alt와 title 속성을 사용해서 처리하는게 가장 좋다고 한다.

<img src="https://cloud-spanner.svg" alt="Cloud Spanner icon in PNG, SVG, JPG formats" title="Cloud Spanner" />

images sitemaps를 이용하는 방법도 있다고한다.

내가 지식이 얕아서 그런지 svg파일에서 Image컴포넌트안에서 사용하기 위해서는 svg파일을 url-loader을 이용해서 data URL로 Import해서 src안에 사용할수 있다. 하지만 위 방식은 좋은 방식은 아니라고 생각되어서 svg파일 자체로 처리할려고한다.

SVG 태그 안에서 aria-label이 있고 title 태그도 사용할 수 있다.
다음과 같이 사용한다고 한다.

<svg role="img" aria-label="Google Fonts Vecta" xmlns="http://www.w3.org/2000/svg"><title>Google Fonts Vecta</title><desc>Embed fonts using Vecta</desc></svg>

구글에 위의 이미지가 보여지는데는 조금 오래걸린다고 한다.
구글에서 위 의미지를 인덱싱을 처리하는데에 더 오래걸린다고 이해하고 있다.

* vercel 공식 사이트에서도 svg에서 aria-label 속성을 이용해서 SEO를 위해서 사용하는듯한다.(내 생각)