og 태그 미리보기 이미지 넣기

coding/html + css 냐울 · 2022. 3. 22. 09:30

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 태그 사용 예시

http://neowool.shop/

원페이지 쇼핑몰

양초를 팔아요

neowool.shop

스파르타 코딩 클럽 5주 차 과제

과제로 제작한 사이트입니다.

og 태그가 어떻게 사용되는지 조금은 감이 오시나요?

저렇게 이미지와

제목, 설명이 미리보기로 나온답니다.

5만 원 할인받고 시작하기

이런 결과물을 얻을 수 있는

스파르타 코딩 클럽 강의

5만 원 할인받으시려면 위의 버튼을 눌러서 시작해보세요~

http://ssimplay.com/

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 태그를 이용해 미리 보기 이미지를 넣는 방법을 알아보았습니다.

도움이 되셨다면 공감과 댓글, 구독을 부탁드립니다.

[같이 보면 좋은 포스팅]

[coding/개발 팁] - 인스턴스 원격 접속

인스턴스 원격 접속

인스턴스 원격 접속 코드를 알아봅시다. 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] 메뉴를 클릭