og 태그를 이용해
링크의 미리 보기 이미지, 설명, 제목을 넣어보겠습니다.
1. og 태그
og 태그를 이용한 미리 보기 화면
og 태그가 무엇이냐면
위의 이미지처럼 카톡이든 어디서 링크를 보낼 때
미리보기로 나오는 이미지, 제목, 설명을 설정해주는 태그입니다.
html에 메타태그로 추가해주시면 됩니다.
-
<head>
<meta property="og:title" content="페이지 제목"/>
<meta property="og:description" content="페이지 설명"/>
<meta property="og:image" content="{{ url_for('이미지 폴더', filename='이미지파일명.jpg') }}"/>
</head>og 태그 사용
이 메타태그 3줄을 복사해서
<head> 태그 안쪽에 붙여 넣어주시면 됩니다.
-
2. og 태그 사용 예시
원페이지 쇼핑몰
양초를 팔아요
neowool.shop
스파르타 코딩 클럽 5주 차 과제
과제로 제작한 사이트입니다.
og 태그가 어떻게 사용되는지 조금은 감이 오시나요?
저렇게 이미지와
제목, 설명이 미리보기로 나온답니다.
이런 결과물을 얻을 수 있는
스파르타 코딩 클럽 강의
5만 원 할인받으시려면 위의 버튼을 눌러서 시작해보세요~
-
SSIMPLAY
SSIMPLAY 웹디자이너 포트폴리오
ssimplay.com
포트폴리오 사이트
하나 더 올려보자면
제 포트폴리오 사이트에도
이번에 새로 넣어주었습니다.
예전에 만든 것이라 조금 부끄럽네요.
3. 주의점
<head>
<meta property="og:title" content="페이지 제목"/>
<meta property="og:description" content="페이지 설명"/>
<meta property="og:image" content="이미지주소"/>
</head>og 이미지 넣기
위의 코드처럼 넣었는데
이미지가 뜨지 않으신다면
flask 설치가 안되어있어서 그럴 수도 있습니다.
flask를 설치해주시거나
간단하게 위의 예시처럼
이미지 주소를 그냥 적어주세요.
이상으로 og 태그를 이용해 미리 보기 이미지를 넣는 방법을 알아보았습니다.
도움이 되셨다면 공감과 댓글, 구독을 부탁드립니다.
[같이 보면 좋은 포스팅]
인스턴스 원격 접속
인스턴스 원격 접속 코드를 알아봅시다. 1. Git Bash Git Bash 열기 먼저 git bash를 열어주세요. 없다면 설치해줍니다. - 코드 입력 인스턴스 원격 접속 코드를 입력합니다. ssh -i /d/work/web/006-sparta/sp..
ssimplay.tistory.com
[coding/Python] - 파이썬 flask 설치 (파이참)
파이썬 flask 설치 (파이참)
파이썬 flask 설치를 진행해보겠습니다. 파이썬 flask는 파이썬 프레임워크 중 하나로 파이참에서 진행합니다. 1. 세팅 Settings 파이참에서 파이썬 프로젝트를 만들었다면 [File > Settings] 메뉴를 클릭
ssimplay.tistory.com
그럼 이만.
총총.
'coding > html + css' 카테고리의 다른 글
| text-indent CSS 들여쓰기 내어쓰기 (20) | 2022.04.27 |
|---|---|
| css 테두리 둥글게 (40) | 2022.04.13 |
| css 변수 사용 방법 (10) | 2022.01.07 |
| html 특수기호 코드 -엔티티코드(entity code) (7) | 2021.12.02 |
| css flexbox 게임으로 배워보자 (0) | 2021.11.15 |
냐울님의
글이 좋았다면 응원을 보내주세요!
이 글이 도움이 됐다면, 응원 댓글을 써보세요. 블로거에게 지급되는 응원금은 새로운 창작의 큰 힘이 됩니다.
응원 댓글은 만 14세 이상 카카오계정 이용자라면 누구나 편하게 작성, 결제할 수 있습니다.
글 본문, 댓글 목록 등을 통해 응원한 팬과 응원 댓글, 응원금을 강조해 보여줍니다.
응원금은 앱에서는 인앱결제, 웹에서는 카카오페이 및 신용카드로 결제할 수 있습니다.