favicon & og 설정하기

■ favicon

- 브라우저 탭에서 보이는 작은 로고

- 북마크할 때 옆에 표시되는 사이트 대표 이미지

- 보통 16x16 또는 32x32 픽셀 크기의 작은 이미지

 

 

favicon 등록시의 장점

- 사용자가 여러 탭 사이에서 원하는 페이지를 쉽게 찾을 수 있다.

- 모바일 기기에서 홈 스크린 바로가기 아이콘으로 활용할 수 있다.

- 사이트의 첫인상을 결정하는 요소이며 완성도를 높일 수 있다.

 

 

favicon 설정하기

① 프로젝트 안의 public 폴더에 변경할 로고이미지 추가 및 기본 favicon 삭제

요롷게 생긴 기본 favicon 을 삭제하고 변경할 로고이미지를 추가해주었다.

 

② Metadata 설정 변경하기

layout.tsx 컴포넌트안의 Metadata 설정에서 icon - 이미지 경로를 넣어주어 설정완료!

export const metadata: Metadata = {
  title: "Smit",
  description: "Our Study Meet Smit",
  icons: {
    icon: "/icons/SmitFavicon.png",
  },
};

 

③ 적용한 모습

before (next.js 기본파비콘)	after (smit 로고이미지)

 

---

 

■ og(Open Graph)

 

- og 는 페이스북에서 만든 프로토콜로, 웹페이지가 소셜 미디어에서 공유될 때 어떻게 표시될지 정의하는 메타데이터이다.

- 보통 카카오톡으로 링크를 보낼때 이미지와 설명이 함께 조회되는 아래와 같은 형태라고 할 수 있다!

 

 

og 태그의 장점

- 사용자에게 더 풍부한 정보를 제공할 수 있어 SEO 에 도움이 된다.

- 공유된 콘텐츠의 클릭률을 향상시킬 수 있다.

(주의사항)

- 이미지 URL 은 절대경로로 지정해야 한다.

- 이미지는 적절한 크기로 제공되어야 한다. (최소 1200x630 픽셀 권장)

- 설명은 간단명료하게 작성하고 정기적으로 태그 정보 업데이트하는 것이 좋다.

 

 

기본 og 태그 종류

// 제목
<meta property="og:title" content="페이지 제목">

// 설명
<meta property="og:description" content="페이지 설명">

// 대표 이미지
<meta property="og:image" content="이미지 URL">

// 웹사이트 UR
<meta property="og:url" content="페이지 URL">

// 사이트 이름
<meta property="og:site_name" content="사이트 이름">

// 타입(website, article 등)
<meta property="og:type" content="website">

 

 

og 적용하기

<meta property="og:title" content="Smit" />
<meta property="og:type" content="website" />
<meta property="og:description" content="나만의 스터디 그룹을 온라인에서 만들어보세요!" />
<meta property="og:url" content="https://smit-8y5a.vercel.app" />
<meta property="og:image" content="https://smit-8y5a.vercel.app/images/og.png" />

 

before	after

 

 

 

참고

https://ogp.me/

Open Graph protocol

 

 

 

🧐 느낀점

처음에는 단순히 브라우저 탭의 작은 아이콘과 링크 공유 시 보이는 미리보기 정도로만 생각했는데, 오늘 실제로 적용해보니 사용자 경험과 프로젝트의 전문성에 큰 영향을 미치는 요소라는 것을 알게 되었다. 앞으로 이런 작은 디테일까지 빼놓지 말고 신경써야지..!