뇌 채우기 공간

[깃허브 예제] head 부분/ og, twitter:card/ 외부에 정보를 전달하기 본문

무작정 따라하기/패스트캠프(프론트)

[깃허브 예제] head 부분/ og, twitter:card/ 외부에 정보를 전달하기

자바칩 프라푸치노 2021. 4. 21. 07:53 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>GitHub</title>

    <meta name="author" content="javachip">
    <meta name="description" content="GitHub is where people build software. More than 31 million people use GitHub to discover, fork, and contribute to over 100 million projects.">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, maximum-scale=1, minimum-scale=1">
    
    <!-- og:Open Graph 다른 사이트에 여기에 대한 정보를 제공한다. -->
    <meta property="og:type" content="website">
    <meta property="og:site_name" content="GitHub">
    <meta property="og:title" content="Build software better, together">
    <meta property="og:description" content="GitHub clone coding / GitHub is where people build software. More than 31 million people use GitHub to discover, fork, and contribute to over 100 million projects.">
    <meta property="og:image" content="img/logo__github.png">
    <meta property="og:url" content="https://github.com">

    <!-- twitter card  -->
    <meta property="twitter:card" content="summary">
    <meta property="twitter:site" content="GitHub">
    <meta property="twitter:title" content="Build software better, together">
    <meta property="twitter:description" content="GitHub clone coding / GitHub is where people build software. More than 31 million people use GitHub to discover, fork, and contribute to over 100 million projects.">
    <meta property="twitter:image" content="img/logo__github.png">
    <meta property="twitter:url" content="https://github.com">
</head>
<body>
    
</body>
</html>

오픈그래프와 트위터카드는 다른 사이트에서 공유가 될때 어떤 사이트인지 알려주는 역할을 한다.

 

http://ogp.me/

 

 

Open Graph protocol

The Open Graph protocol enables any web page to become a rich object in a social graph.

ogp.me

https://developer.twitter.com/en/docs/tweets/optimize-with-cards/guides/getting-started.html

 

Getting started with Cards

By using Twitter’s services you agree to our Cookies Use. We use cookies for purposes including analytics, personalisation, and ads.

developer.twitter.com

 

728x90
저작자표시 비영리 변경금지 (새창열림)

'무작정 따라하기 > 패스트캠프(프론트)' 카테고리의 다른 글

[깃허브 예제] input text Vendor Prefix / webkit/ ms / moz / textbox에 미리써져있는 글씨  (0) 2021.04.21
[깃허브 예제] BEM 작명 규칙/ body 태그처럼 사용할 코드  (0) 2021.04.21
[깃허브 예제] reset.css / css 초기화 하기t.css / css 초기화 하기  (0) 2021.04.21
[깃허브 예제] 폰트 설정하기 / 구글 폰트  (0) 2021.04.21
[깃허브 예제] 파비콘 설정하기 / 스마트폰에 사용되는 파비콘  (0) 2021.04.21
'무작정 따라하기/패스트캠프(프론트)' Related Articles more