2. Front-end/2-1. HTML

HTML - [ 오픈 그래프 / Favicon]

yunyj99 2022. 4. 21. 11:44

1. 오픈 그래프

오픈그래프란 웹페이지가 소셜 미디어(페이스북 등)로 공유될 때 우선적으로 활용되는 정보를 의미한다. 대표적으로 카톡에 웹 사이트의 주소를 전송하면 아래에 웹 페이지가 카드 형식으로 나타나는 것을 의미한다.

스타벅스 주소 전송하면 카드형식으로 정보가 나타남

 

아래와 같이 코드 작성하면됨!

아래쪽은 트위터 카드

property에 작성한 og란 오픈 그래퍼의 약어이고, 타입, 사이트 이름, 타이틀, 설명, 이미지, 사이트 주소 등을 명시할 수 있다.

  • og:type = 페이지의 유형(E.g, website, video.movie)
  • og:site_name = 속한 사이트의 이름
  • og:title = 페이지의 이름(제목)
  • og:description = 페이지의 간단한 설명
  • og:image = 페이지의 대표 이미지 주소(URL)
  • og:url = 페이지 주소(URL)

 

 

 

트위터 카드(Twitter Cards)로 웹페이지가 소셜 미디어(트위터)로 공유될 때 우선적으로 활용되는 정보를 지정할 수 있다. 오픈 그래프와 비슷하다!

참고로 이미지 파일에 보면 SEO가 붙어있다. SEO(검색 엔진 최적화, Search Engine Optimization)란 구글이나 네이버 등에 자신의 웹 사이트/페이지를 노출할 수 있도록 정보를 최적화하는 작업을 말한다.

 

2. Favicon

favicon 으로 웹페이지를 나타내는 아이콘, 웹페이지의 로고를 설정할 수 있다. 프로젝트 루트 경로에 favicon.ico 파일 있으면 자동으로 탭의 아이콘으로 사용한다. 혹은 link 태그로 png파일을 아이콘으로 설정 가능하다.

<link rel="icon" href="파일 경로" />

 

그러면 탭 이름 옆에 아이콘이 표시된다!