"문서에 메타 설명이 없습니다" 해결

[Jeongjin Oh]

프로젝트가 정말 재미있네요 ^^ 잘보고 가용 ~~ 블로그보다가 아래 이슈 겪는거 같아 이슈 만들어봤어요

"문서에 메타 설명이 없습니다"를 해결하려면 아래 태그가 head에 들어가야 해요!
lighthouse docs 참고

<meta name="description" content="Put your description here.">

지금 배포 된거 보니까 name='desctiption' 인 meta 태그가 없어서 lighthouse에서 description이 없다고 하는 것 같습니다. 코드 보니 metadata에 description 필드가 없네요. og:description 이랑은 달라요

snowy-window/src/app/layout.tsx

Lines 8 to 31 in 1efd493

 export const metadata: Metadata = { 
 	metadataBase: new URL('https://snowy-winter-wonderland.vercel.app/'), 
 	title: 'Interactive Winter Wonderland: Three.js Snowscape Project', 
 	openGraph: { 
 		url: 'https://snowy-winter-wonderland.vercel.app/', 
 		title: 'Interactive Winter Wonderland: Three.js Snowscape Project', 
 		description: `Winter Wonderland by Ahhyun Kim :\n  
 		Immerse yourself in a mesmerizing winter landscape with our Three.js-based project.\n 
 		Experience the serene beauty of falling snowflakes as you engage in the interactive challenge to clear accumulated snow.\n 
 		Unleash the magic of the season and join us in the virtual realm where the snowy scenery comes to life.\n 
 		Bundle up and embark on a unique journey of 'Clear the Snow' interaction amid a picturesque winter wonderland.`, 
 		siteName: 'Interactive Winter Wonderland', 
 		images: [ 
 			{ 
 				url: '/opengraph-image.png', 
 				width: 285, 
 				height: 167, 
 				alt: 'Interactive Winter Wonderland', 
 			}, 
 		], 
 		type: 'website', 
 	}, 
 }; 
  

이렇게 수정하면 description meta 태그 들어갈거에요~ Nextjs docs 참고

export const metadata: Metadata = {
  ...
  description: '설명 설명 설명',
  ...
}

그나저나 프로젝트 퀄리티 엄청나네요.. 👍 👍

[naro_Kim]

https://webmasters.stackexchange.com/questions/118056/whats-the-difference-between-og-description-and-meta-description

---

오.. og는 social media bot들을 위한 태그고 meta는 search engine을 위한 태그라 이런 차이가 났군요.. 분명하게 이해됐습니다~! 이슈에 솔루션까지 달아주셔서 감사해요 ! 덕분에 SEO 처리까지 완료! 고마워요 상어맨~~