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

이상청

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

💙 meta tag?

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

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

1. meta 태그 내 og 속성 지정

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

2. meta 태그 내 twitter 속성 지정

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

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