히치키치

이상청 : OpenGraph Protocol 사용한 SEO 처리 (단순링크, 트위터 공유) 본문

이상청

이상청 : OpenGraph Protocol 사용한 SEO 처리 (단순링크, 트위터 공유)

히치키치 2022. 8. 8. 06:37

💙 meta tag?

index.html 파일의 <head></head> 부분에 있으며 문서의 내용, 키워드, 이미지 등을 알려주며 브라우저와 검색엔진에게 해당 페이지에 대한 정보 제공

 

💙 OpenGraph Protocol

Facebook에서 정의한 HTML문서의 메타 데이터 정보를 적는 방식에 대한 규약입니다. url공유시 표현되는 title, thumbnail등은 해당 사이트의 Bot이 og정보를 기반으로 파악하여 표현하는 것입니다.

 

 

1. meta 태그 내 og 속성 지정

단순한 링크 공유 시 다음과 같이 보임 (썸네일이 생겼다고 보면 편하다)

 

2. meta 태그 내 twitter 속성 지정

트위터 공유 시 입력창에 보여주는 방식을 조정함 

 

3. index.html 파일 내 favicon과 사이트 title 지정

 

Comments