imsmile2000 / MBTI-WEBSITE

MBTI 웹사이트 만들기

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

MBTI 웹사이트 링크: https://quiet-treacle-1ef786.netlify.app

오픈 그래프와 트위터 카드

The Open Graph protocol & Twitter Cards
웹페이지가 소셜 미디어(페이스북, 트위터 등)로 공유될 때 우선적으로 활용되는 정보를 지정합니다.

```html
<!-- Primary Meta Tags -->
<title>내 안에 숨어있는 MBTI 찾기! by.윤표</title>
<meta name="title" content="내 안에 숨어있는 MBTI 찾기! by.윤표">
<meta name="description" content="누구나 찰떡인 직업이 있어요! 내 안에 숨어있는 MBTI를 찾아보세요!">

<!-- Open Graph / Facebook -->
<meta property="og:type" content="website">
<meta property="og:url" content="https://gorgeous-ganache-644d9d.netlify.app">
<meta property="og:title" content="내 안에 숨어있는 MBTI 찾기! by.윤표">
<meta property="og:description" content="누구나 찰떡인 직업이 있어요! 내 안에 숨어있는 MBTI를 찾아보세요!">
<meta property="og:image" content="https://health.chosun.com/site/data/img_dir/2022/06/20/2022062001930_0.jpg" />

<!-- Twitter -->
<meta property="twitter:card" content="summary_large_image">
<meta property="twitter:url" content="https://gorgeous-ganache-644d9d.netlify.app">
<meta property="twitter:title" content="내 안에 숨어있는 MBTI 찾기! by.윤표">
<meta property="twitter:description" content="누구나 찰떡인 직업이 있어요! 내 안에 숨어있는 MBTI를 찾아보세요!">
<meta property="twitter:image" content="https://health.chosun.com/site/data/img_dir/2022/06/20/2022062001930_0.jpg" />

[더 많은 오픈 그래프 속성 보기](https://ogp.me/)

- `og:type`: 페이지의 유형(E.g, `website`, `video.movie`)
- `og:site_name`: 속한 사이트의 이름
- `og:title`: 페이지의 이름(제목)
- `og:description`: 페이지의 간단한 설명
- `og:image`: 페이지의 대표 이미지 주소(URL)
- `og:url`: 페이지 주소(URL)

[더 많은 트위터 카드 보기](https://developer.twitter.com/en/docs/twitter-for-websites/cards/guides/getting-started)

- `twitter:card`: 페이지(카드)의 유형(E.g. `summary`, `player`)
- `twitter:site`: 속한 사이트의 이름
- `twitter:title`: 페이지의 이름(제목)
- `twitter:description`: 페이지의 간단한 설명
- `twitter:image`: 페이지의 대표 이미지 주소(URL)
- `twitter:url`: 페이지 주소(URL)

예시

캡처

About

MBTI 웹사이트 만들기


Languages

Language:JavaScript 51.8%Language:HTML 25.2%Language:CSS 23.0%