웹사이트에 LinkedIn 및 Twitter 카드 미리보기를 설정하는 방법
링크드인
LinkedIn은 페이지 미리보기에 OpenGraph 구문을 사용하므로 일부 og: 유형 메타태그를 페이지에 추가해야 합니다. index.html 또는 공유해야 하는 다른 페이지를 열고 <head> 섹션 내부에 이러한 태그를 추가합니다.
<meta name="title" property="og:title" content="[Your page title]">
<meta property="og:type" content="website">
<meta name="image" property="og:image" content="[Image URL]">
<meta name="description" property="og:description" content="[Page description]">
<meta name="author" content="[Your name]">
<meta name="title" property="og:title" content="[Your page title]">
<meta property="og:type" content="website">
<meta name="image" property="og:image" content="[Image URL]">
<meta name="description" property="og:description" content="[Page description]">
<meta name="author" content="[Your name]">
og:type은 콘텐츠의 유형이어야 합니다. 일반적으로 "웹 사이트"이지만 음악, 비디오, 기사 등이 될 수도 있습니다. 유형에 대한 추가 정보at OGP website .
og:image는 미리보기 이미지에 대한 경로("/image.png") 또는 URL("https://website/image.png" )일 수 있습니다. LinkedIn의 권장 크기는 1280x720픽셀입니다.
og:description은 페이지를 설명하는 1~2개의 문장이어야 합니다.
저자는 og: 필드가 아니며 귀하와 귀하의 이메일이 될 수 있습니다. 모든 필드의 따옴표를 잊지 마십시오.
완료하면 링크를 에 붙여넣어 LinkedIn 피드 또는 추천 콘텐츠에서 페이지가 어떻게 보이는지 확인할 수 있습니다.
트위터
Twitter는 카드에 자체 구문을 사용합니다. 자세한 내용은 . Twitter 속성은 twitter: 필드를 찾을 수 없는 경우 지원되는 OpenGraph 속성으로 대체되어야 하지만 이 플랫폼에 특별히 모든 필드를 추가해도 문제가 되지 않습니다.
<meta name="twitter:card" content="[Preview Type]" />
<meta name="twitter:creator" content="[@Your-twitter-handle] (optional)" />
<meta name="twitter:site" content="[@Your-twitter-site-handle (optional)]" />
<meta name="twitter:image" content="[Image URL]" />
<meta name="twitter:description" content=[Page description] />
<meta name="twitter:card" content="[Preview Type]" />
<meta name="twitter:creator" content="[@Your-twitter-handle] (optional)" />
<meta name="twitter:site" content="[@Your-twitter-site-handle (optional)]" />
<meta name="twitter:image" content="[Image URL]" />
<meta name="twitter:description" content=[Page description] />
twitter:card는 "summary", "summary_large_image", "app"또는 "player"일 수 있습니다. 최상의 미리보기를 위해 "summary_large_image"를 선택하십시오.
웹사이트에 대한 별도의 계정이 있는 경우 브랜딩에 사용되는 twitter:site.
twitter:image는 상대 경로가 아니라 이미지의 URL(https://포함)이어야 합니다.
에서 카드 미리보기를 확인할 수 있습니다.
이것으로 커뮤니티 간에 훌륭한 콘텐츠를 공유할 수 있습니다. 게시물이 도움이 되었기를 바랍니다. 읽어 주셔서 감사합니다. Twitter( )에서 저를 찾을 수 있습니다.
Vojtech Bruzek의 Unsplash이 콜라주에 사용한 휴대폰 사진
모든 고양이 사진 © Andrey Kudryavtsev(CatLogic)
Reference
이 문제에 관하여(웹사이트에 LinkedIn 및 Twitter 카드 미리보기를 설정하는 방법), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/catlogic/how-to-set-up-linkedin-twitter-card-previews-for-your-website-3npf텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
