티스토리 뷰
https://nicolebrugger.ch/Frauenstimmen
Frauenstimmen — Nicole Brugger
5. Frauenstimmen Plakat (2021) für 50 Jahre Frauenstimmrecht, HSLU Graphic Design Anlässlich des 50 Jahre «Jubiläums» des Frauenstimmrechtes in der...
nicolebrugger.ch
이 사이트의 코드를 뜯어보고 있다.
<a href="Drogeninformation" rel="history">
<span style="color: rgba(0, 0, 0, 1);">
<font style="vertical-align: inherit;">
<font style="vertical-align: inherit;">
drug information
</font>
</font>
</span>
</a>
링크가 걸린 부분에서는 이런 것 같은데.… Drug information 이라는 페이지로 이동하는 부분의 코드다. "Drogeninformation"을 누르면 바로 https://nicolebrugger.ch/Drogeninformation 로 이동한다.
코드를 좀 더 열심히 뜯어보니 이런 부분이 눈에 띄었다. Sources 에서 눈에 들어온 건데...
<meta property="og:locale" content="en_US">
<meta property="og:title" content="Frauenstimmen — Nicole Brugger">
<meta property="og:description" content="5. Frauenstimmen Plakat (2021) für 50 Jahre Frauenstimmrecht, HSLU Graphic Design Anlässlich des 50 Jahre «Jubiläums» des Frauenstimmrechtes in der...">
<meta property="og:url" content="https://nicolebrugger.ch/Frauenstimmen">
<meta property="og:image" content="https://freight.cargo.site/w/1200/i/c7c095408673dceb55235f543ff0deefbedb9c2b3a0ce5f964d03797885d24a6/DSC02523.JPG">
<meta property="og:type" content="website">og: url 부분. 다른 페이지로 이동할 때마다 통쨰로 바뀌었다.
그래서 og: url이 뭐지? 하고 검색해 봤다.
OG란 오픈 그래프Open Graph의 준말로 SNS 등에 게시될 때 뜨는 미리보기 화면을 만들어 주는 기능이었다.
Meta Tag , OG(오픈그래프) 사용하기
오픈그래프는 어떤 HTML 문서의 메타정보를 쉽게 표시하기 위해서 메타정보에 해당하는 제목, 설명, 문서의 타입, 대표 URL 등 다양한 요소들에 대해서 사람들이 통일해서 쓸 수 있도록 정의해놓
velog.io
그러면 이게... 링크 지정까지 해 주나? 리액트 등으로 컴포넌트를 갈아끼우면서 저 기능을 넣으면 페이지 링크까지 바꿔 줄까?
'STUDY > WEB' 카테고리의 다른 글
| 생활코딩 React 강의 복습 (0) | 2022.06.03 |
|---|---|
| React로 url이 다른 페이지를 만들려면 (0) | 2022.05.24 |
| React: 새 페이지 만들기 (0) | 2022.05.22 |