인프런 커뮤니티 질문&답변
작성한 질문수
카톡에서 썸네일이 안뜹니다
해결된 질문
작성
·
109
0
import SearchableLayout from "@/components/searchable-layout";
import style from "./index.module.css";
import { ReactNode } from "react";
import BookItem from "@/components/book-item";
import { InferGetStaticPropsType } from "next";
import fetchBooks from "@/lib/fetch-books";
import fetchRandomBooks from "@/lib/fetch-random-books";
import Head from "next/head";
// next에서는 이렇게 작성하면 서버사이드렌더링으로 페이지를 생성할 수 있다.
export const getStaticProps = async () => {
// 컴포넌트보다 먼저 실행 되어서, 컴포넌트에 필요한 데이터 불러오는 함수
// Promise.all을 사용하여 병력적으로 두 개의 비동기 작업을 병렬로 실행
const [allBooks, recoBooks] = await Promise.all([
fetchBooks(),
fetchRandomBooks(),
]);
return {
props: {
allBooks,
recoBooks,
},
};
};
export default function Home({
allBooks,
recoBooks,
}: InferGetStaticPropsType<typeof getStaticProps>) {
return (
<>
<Head>
<title>한입북스</title>
<meta
property="og:image"
content="/thumbnail.png"
/>
<meta
property="og:title"
content="한입북스"
/>
<meta
property="og:description"
content="한입북스에 등록된 도서들을 만나보세요"
/>
</Head>
<div className={style.container}>
<section>
<h3>지금 추천하는 도서</h3>
{recoBooks.map((book) => (
<BookItem
key={book.id}
{...book}
/>
))}
</section>
<section>
<h3>등록된 모든 도서</h3>
{allBooks.map((book) => (
<BookItem
key={book.id}
{...book}
/>
))}
</section>
</div>
</>
);
}
Home.getLayout = (page: ReactNode) => {
return <SearchableLayout>{page}</SearchableLayout>;
};
영상과 같이 public 폴더에 파비콘과 썸네일 파일을 올렸는데 파비콘은 되는데 썸네일과 디스크립션과 타이틀이 안나오고 그저 링크만 보이네요
답변 2
0
안녕하세요 이정환입니다. 여기에는 2가지 문제가 있을 수 있습니다.
1) 배포용 URL을 사용하고 있지 않으실 수 있습니다.
혹시 배포 완료된 서비스의 주소가 Vercel Dashboard > Project > Domains 탭에 표시된 주소와 동일한지 확인해 보시겠어요? 간혹 배포용 주소가 아닌, 내부 테스트용 주소로 잘못 사용하시는 경우가 많습니다. 내부 테스트용 주소를 사용하시면 메타태그가 모두 적용되지 않게 됩니다.
2) 카카오 캐시 문제 때문일 수 있습니다.
카카오톡 서버는 잦은 메타 태그 수집으로 인한 서버의 부하 발생을 방지하기 위해서 한번 수집한 웹 서비스의 메타 태그 정보를 캐시 해 둡니다. 이 캐시 데이터로 인해 정상적으로 설정된 메타 태그가 잘 작동하지 않을 수 있습니다.
이를 해결하시려면 AI 인턴이 알려준대로 카카오 디버거 도구를 이용하여 캐시를 초기화할 수 있습니다.
0
안녕하세요, 인프런 AI 인턴입니다. hinpuo님께서 카카오톡 등에서 공유할 때 나타나는 썸네일 및 메타데이터가 제대로 표시되지 않는 문제를 겪고 계신 것 같습니다. 이러한 현상은 주로 메타 태그 설정, 파일 경로, 캐시 문제 때문일 수 있습니다. 이를 해결하기 위한 몇 가지 방법을 제공해 드리겠습니다.
1. 파일 경로 확인
- 메타 태그에서 참조하고 있는
/thumbnail.png가 실제로public폴더에 바로 위치하며 해당 위치에서 접근 가능한지 확인하세요.
public폴더에 있는 파일들은/파일명형식으로 경로를 사용합니다. 파일 경로가 올바르게 설정되어 있는지 확인해야 합니다.
2. 브라우저 캐시 문제
- 브라우저와 카카오톡 캐시 때문에 이전의 이미지나 메타 정보가 남아 있을 수 있습니다. 브라우저 캐시를 삭제하고 다시 시도하거나, 강력 새로고침 ([Cmd + Shift + R]이나 [Ctrl + Shift + R])을 해보세요.
- 카카오톡의 경우 카카오 디버거 도구를 이용하여 캐시를 초기화할 수 있습니다.
3. 배포 환경 확인
- 로컬에서 잘 되더라도 배포 환경에서 설정이 제대로 되었는지 확인해야 합니다. 환경 변수나 서버 설정, 배포 시의 빌드 문제를 한 번 더 확인해 보세요.
4. 기존 유사 문제 참고
- 유사한 문제에 대한 기존의 해결 사례를 참고하시는 것도 좋습니다:
이러한 방법들이 문제를 해결하는 데 도움이 되었길 바랍니다. 문제가 계속된다면 메타 태그 설정이나 파일 경로를 다시 검토해 보시는 것을 추천드립니다.
저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다. 현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.
배포용 URL이 아니였네요 감사합니다!