Facebook과 같은 소셜 네트워크에서 게시물을 공유하면 공유중인 URL을 스캔하고 특정 정보를 반환하여 피드에 페이지를 표시합니다. Facebook은 페이지 제목, 페이지 설명 및 페이지 축소판 이미지를 받습니다. open graph meta tags를 사용하여 Facebook이 얻는 정보를 변경할 수 있습니다.
이들은 단순히 페이지의 헤드 태그에 추가 할 수 있는 메타 태그이며, Facebook에서 페이지를 스캔하여 제목, 설명 및 이미지를 검색 할 때 해당 태그를 검색 할 경우 태그의 내용을 대신 사용합니다. 페이지 제목 즉, Facebook에 대해서만 페이지 제목을 완전히 사용자 정의 할 수 있습니다.
Twitter에는 Twitter에서 메시지를 사용자 정의하는 데 사용할 수있는 메타 태그도 있습니다. 이것을 트위터 카드라고 하며, 웹 사이트 소유자는 트위터에서 공유 할 때 링크에 더 설명적인 텍스트를 추가 할 수 있습니다. 트위터에서 링크가 공유되면 모든 트윗에서 140 자로 제한되지만 모든 트윗에서 트윗을 확장하여 자세한 내용을 알 수 있습니다.
이 섹션에서는 얼마나 많은 사람들이 트윗에 답글을 달고 다시 트윗하고 즐겨 찾기에 추가했는지에 대한 정보를 찾을 수 있습니다. 그러나 트위터 메타 태그를 헤드 태그에 추가 한 경우 리트 윗 및 즐겨 찾기에 대한 정보를 보는 대신 제목, 설명 및 이미지를 표시하여 페이지의 스니펫을 볼 수 있습니다.
이미지 및 비디오와 같은 다양한 유형의 Twitter 링크를 게시 할 수 있기 때문에 다양한 유형의 Twitter 카드가 있을 수 있습니다. 하나는 페이지의 스니펫을 제공하고 다른 하나는 이미지를 표시하며 다른 하나는 이미지를 표시합니다. 음악 또는 비디오, 표시되는 카드 유형은 메타 태그로 정의 할 수도 있습니다.
<meta name="twitter:card" content="summary">
페이지의 스니펫을 표시하려면 content 속성 값을 요약해야 합니다. 이미지의 경우 값을 사진으로 변경해야합니다. 비디오 또는 음악의 미디어 플레이어를 표시하도록이를 변경하려면 값을 플레이어로 설정합니다.
Twitter Card Meta Tags
사용중인 Twitter 카드 유형에 따라 사용할 수있는 메타 태그가 다릅니다.
Summary Card
- twitter : card - 카드 유형으로 "summary", "photo" 또는 "player"중 하나.
- twitter : url - 카드 내용의 정식 URL.
- twitter : title - 카드에 표시 될 내용의 제목.
- twitter : description - 최대 200 자의 컨텐츠 설명.
- twitter : image - 내용을 나타내는 이미지의 URL.
<meta name="twitter:card" content="summary">
Photo Card
- twitter : card-이 값을 사진으로 설정
- twitter : url-카드 내용의 정식 URL.
- twitter : title-카드에 표시 될 내용의 제목입니다.
- twitter : description-최대 200 자의 컨텐츠 설명.
- twitter : image-콘텐츠를 나타내는 이미지의 URL입니다.
- twitter : image : width-이미지의 원래 너비를 정의합니다. 트위터가 이미지를 표시하는 데 사용하는 크기가 아닐 수도 있지만 이미지 크기를 조정해야하는 경우 트위터가 이미지의 가로 세로 비율을 유지하는 데 도움이됩니다.
- twitter : image : height-이미지의 원래 높이를 정의합니다.
<meta name="twitter:card" content="photo">
<meta name="twitter:site" content="@paulund_">
<meta name="twitter:creator" content="@paulund_">
<meta name="twitter:url" content="http://www.tistory.co.uk/example-image.jpg">
<meta name="twitter:title" content="Image Title">
<meta name="twitter:description" content="Image Description">
<meta name="twitter:image" content="http://www.tistory.co.uk/example-image.jpg">
<meta name="twitter:image:width" content="500">
<meta name="twitter:image:height" content="500">
Player Card
- twitter : card - 이 값을 사진으로 설정
- twitter : url - 카드 내용의 정식 URL.
- twitter : title - 카드에 표시 될 내용의 제목
- twitter : description - 최대 200 자의 컨텐츠 설명.
- twitter : image - 콘텐츠를 나타내는 이미지의 URL입니다.
- twitter : image : width - 이미지의 원래 너비를 정의합니다. 트위터가 이미지를 표시하는 데 사용하는 크기가 아닐 수도 있지만 이미지 크기를 조정해야하는 경우 트위터가 이미지의 가로 세로 비율을 유지하는 데 도움이됩니다.
- twitter : image : height - 이미지의 원래 높이를 정의
<meta name="twitter:card" content="player">
<meta name="twitter:site" content="@paulund_">
<meta name="twitter:url" content="http://www.tistory.co.uk/example-video.mp4">
<meta name="twitter:title" content="Title Of Video">
<meta name="twitter:description" content="Description of the video">
<meta name="twitter:image" content="http://example.com/example-video-thumbnail-image.jpg">
<meta name="twitter:player" content="https://www.tistory.co.uk/example-player">
<meta name="twitter:player:stream" content="http://www.tistory.co.uk/example-video.mp4">
<meta name="twitter:player:width" content="500">
<meta name="twitter:player:height" content="250">
Facebook Open Graph Tags
이미 Facebook 오픈 그래프 태그를 사용하고 있다면 HTML 헤드에 이와 같은 내용이 표시됩니다.
<meta property="og:url" content="http://www.tistory.co.uk/example-url">
<meta property="og:title" content="Example Title">
<meta property="og:description" content="Example Description">
<meta property="og:image" content="http://www.tistory.co.uk/example-image.jpg">
트위터 카드 메타 태그는 오픈 그래프 태그를 기반으로 했기 때문에 트위터는 이를 대체로 사용합니다. 먼저 트위터 카드 태그를 검색합니다.
트위터 카드 태그가 없으면 열린 그래프 태그를 검색하여 제목, 설명 및 이미지에 사용합니다. 따라서 오픈 그래프 태그와 동일한 정보로 태그를 복제할 필요가 없습니다. 웹 사이트의 헤더에 가질 수 있고 완벽하게 잘 작동한다는 것을 의미합니다.
<meta name="twitter:card" content="summary">
Twitter 카드에 대한 업데이트 된 정보를 보려면 Twitter Documentation에 방문해보시는 걸 추천드립니다.
'SW > HTML' 카테고리의 다른 글
| HTML : 검색 결과에 Breadcrumbs 얻는 방법 : 예제, 구현 (0) | 2020.08.04 |
|---|---|
| HTML : HTML5 Datalist 사용 방법 : 예제, 구현 (0) | 2020.08.02 |
| HTML : 체크박스 값을 항상 $_POST 값으로 받기 : 예제, 구현 (0) | 2020.07.31 |
| HTML : Viewport Meta Tag 이해하기 : 예제, 방법 (2) | 2020.07.29 |
| HTML : 새로운 HTML5 속성 사용 방법 : 예제, 구현 (0) | 2020.07.28 |