Large Rainbow Pointer
[Next.js] 메타태그, 오픈그래프 컴포넌트 SEO 향상 (feat. Page Router)
💜 리액트/Next.js2024. 7. 12. 16:23[Next.js] 메타태그, 오픈그래프 컴포넌트 SEO 향상 (feat. Page Router)

시작하며...메타태그와 오픈그래프를 적절하게 사용하면, 웹사이트에서 검색 엔진 최적화(SEO)를 향상시킬 수 있다. 그래서 검색 엔진에서의 노출도를 올릴 수 있다. 그래서 Next.js 에서 메타태그와, 오픈그래프를 컴포넌트로 만들어서 각각 페이지별로 다르게 설정하여 SEO 를 높이는 방법에 대해 알아볼 것이다.(참고로 Next.js Page Router) 메타태그 작성하기_document.tsx일단 공통으로 적용할 메타태그들은 _document.tsx 에서 Next.js 에서 기본적으로 제공해 주는 컴포넌트 안에 작성한다.파비콘 설정인코딩 UTF-8viewport - 브라우저 뷰포트author - 문서 작성자 정보keywords - 문서 키워드 (SEO 에 사용됨)import { Html, Head,..

image
loading