HTML

[OG태그] 타임리프에서 OG태그 적용하기

공주워와 2022. 7. 5. 15:03

Meta태그/OG태그 

- 공유하기 기능을 통해 공유시 노출되는 메타정보

- <head> 태그안에 위치

 

og:url

og:title

og:description

og:image (썸네일 이미지 => https:// 부터 시작하는 절대 주소)

 

그 밖의 옵션들...

https://ogp.me/

 

ex) 
<meta property="og:url" content="https://gongjuwarwa.tistory.com">

<meta property="og:title" content="OG태그란"/>

<meta property="og:description" content="미리보기를 깔꼼하게 해주는 OG태그"/>

 

 

 

 

타임리프 환경에서의 메타태그 예시 ))

=> 설명에 서버에서 가져온 정보 넣기 

 

 layout.html 

<th:block layout:fragment="ogTag"></th:block>

 

 subPage.html 

<th:block layout:fragment="ogTag">
<meta property="og:image" content="https://example.com/image.jpg">
<meta property="og:title" content="서브페이지1 제목">
<meta property="og:description" content="#{사용자이름} 에 대해 알아보세요 " th:content="|${map['userName']}에 대해 알아보세요.|">
</th:block>