favicon 과 open graph

favicon 이란?

파비콘이란 웹페이지에 접속했을 때, 상단 탭에서 보여지는 아이콘이다.
파비콘은 즐겨찾기에 웹페이지를 등록할 때도 사용되며, 웹 브라우저 주소창에도 보여지게 된다.

주소창에 웹파이트를 소개하는 글자를 읽지 않아도 모양이나 색깔등으로 어떤 웹사이트인지 인식할 수 있도록 하는 것이 파비콘이다.

크기는 1616 / 3232 /4848 / 64664 픽섹 처럼 정사각형을 유지한다.
파일 형식은 ico, png, svg 파일 형식을 지원한다.

Open graph

오픈 그래프란 웹사이트의 링크를 소셜미디어와 같은 다른 플랫폼에 공유할 때 웹사이트에 대한 정보가 정확하고 효율적으로 해당 플랫폼에서 보여질 수 있도록 하기 위해 웹사이트의 제목, 설명, 이미지, 대표 url 주소에 대한 메타정보를 사전에 웹사이트 안에 구성해 놓은 프로토콜을 의미한다.

오픈그래프 종류
기본

• og:title : 웹사이트 제목
• og:type : 웹사이트 종류
• og:image : 대표이미지
• og:url : 웹사이트 정식 url

nextjs 에 적용하기

nextjs 폴더에서 src/app/layout.tsx 파일을 열고

파비콘

icons를 추가 하고, public 폴더에 추가한 favicon 이미지를 경로에 맞게 추가한다.
그후 favicon.ico 를 삭제한다.

export const metadata: Metadata = {
  title: "Frontend-developer",
  description: "프론트엔드 개발자 포트폴리오 입니다.",
  icons: {
    icon: "/young_favicon.svg",
  },
};

og tag (오픈 그래프)

파비콘 추가한 동일한 layout.tsx 파일에 추가한다.

export const metadata: Metadata = {
  title: "Frontend-developer",
  description: "프론트엔드 개발자 포트폴리오 입니다.",
  icons: {
    icon: "/young_favicon.svg",
  },
  openGraph: {
    siteName: "frontend-developer portfolio",
    title: "youg's portfolio",
    description: "프론트엔드자 000의 포트폴리오 입니다.",
    images: "/opengraph-image.jpg",
    url: "https://young02-portfolio.vercel.app/",
  },
};

이렇게만 추가 하면 아래와 같은 에러가 뜨는데

메타데이터에 기본 url을 설정해 주면 해결이 된다.
metadataBase: new URL("https://young02-portfolio.vercel.app/"),

export const metadata: Metadata = {
  title: "Frontend-developer",
  description: "프론트엔드 개발자 포트폴리오 입니다.",
  metadataBase: new URL("https://young02-portfolio.vercel.app/"),
  icons: {
    icon: "/young_favicon.svg",
  },
  openGraph: {
    siteName: "frontend-developer portfolio",
    title: "youg's portfolio",
    description: "프론트엔드자 성태영의 포트폴리오 입니다.",
    images: "/opengraph-image.jpg",
    url: "https://young02-portfolio.vercel.app/",
  },
};

확인

변경된 것을 확인 할 수 있다!

출처:
파비콘
og-tag