인프런 커뮤니티 질문&답변

예진안

작성한 질문수

한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지

12.19) 배포하기

meta 태그로 적용한 썸네일 이미지가 보이지 않습니다.

해결된 질문

작성

222

index.html에서 다룬 코드입니다.

경로를 바꿀때마다 vercel --prod로 프로젝트 갱신해서 배포했습니다.

meta 태그에서 썸네일 이미지를 표현하는 og:image 프로퍼티와 컨텐츠에 썸네일을 하고 싶은 이미지를 src / assets 파일에 todayfeeling.png 로 저장해놨습니다.

탭 아이콘 표현은 절대 경로로 표현했을 때 비로소 적용이 되었습니다. (강의에서는 href="/favicon.ico"로 표현했지만 저는 강의랑 똑같이 했을 경우에 아이콘이 나타나지않아서 아래 코드와 같이 경로를 추가해서 아이콘을 띄웠습니다.)

썸네일 이미지 때문에

content ="/todayfeeling.png"

content ="src/assets/todayfeeling.png"

content ="/src/assets/todayfeeling.png"

(블로그에 올린 이미지 주소)
content ="https://velog.velcdn.com/images/foreveryejin/post/65845dd4-a999-4344-9fb4-3710b07f5a3d/image.png"

content ="./src/assets/todayfeeling.png"

여러 경로를 바꿔가면서 해봤는데 안되더라구요.

그래서 다른 포털사이트에서 실제로 사용하는 meta 태그를 긁어와서 사용해봤는데 안되네요...

다른 기능들은 잘 작동하는데 이것만 말썽입니다..!

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="src/assets/icon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>오늘 하루 감정</title>
    <meta property="og:title" content="오늘의 감정" />
    <meta property="og:image" content="/todayfeeling.png" />
    
    <meta property="og:description" content="예진이의 오늘의 감정 일기장" />
  </head>

  <body>
    <div id="root"></div>
    <script type="module" src="/src/main.jsx"></script>
  </body>
</html>

pc :