# ogTags

2개의 포스트
post-thumbnail

NEXT.js app router에서 url을 통해 Open Graph 정보 가져오기

사내에서 새롭게 웹 페이지를 리뉴얼 하면서 경험하게 된 내용들을 하나씩 기록하려 한다. > 현재 프로젝트는 Next.js 13.4.1 버전의 app router를 활용하고 있다. 이번 글에서는 사용자가 게시글에다가 URL을 적었을 때, 그 URL이 가리키는 페이지의 Open Graph 정보를 가져 온 방법에 대해 적어보려고 한다. Open Graph 우선 Open Graph란, URL을 소셜 미디어에서 공유하게 됐을 때 보여지는 모습을 정의해주는 프로토콜이다. Open Graph 태그들은 웹페이지의 `` 섹션에 위치하며, meta 태그를 사용하여 해당 웹 페이지의 title, description, image, url등을 정의 해둘 수 있다. 예를들어, 네이버 URL(www.naver.com)을 카카오톡에 공유하게 된다면 아래처럼 자동으로 생성된 미리보기 화면을 만나게 된다. ![](https://

2023년 6월 4일
·
0개의 댓글
·
post-thumbnail

HTML & CSS 실무(2): OG Meta Tags : OpenGraph Protocol

2-1. OG Meta Tags : OpenGraph Protocol Notion의 Remark & Technique : HTML5 & CSS3 페이지 바로가기 0. References 링크 붙여넣을 때 보이는 이미지는 어디서 오는 것일까? - branch FB OpenGraph og:image not pulling images (possibly https?) -stackoverflow 1. Introduction ![](https:

2020년 12월 23일
·
0개의 댓글
·