SNS에서 사이트를 공유하면 클릭하고 싶은 이미지가 나옵니다.

2933 단어 트위터OGPTwitterCards

뭐야? ?



이거입니다.
사이트의 URL을 공유할 때 클릭하고 싶은 이미지가 붙어 있는 이것입니다.



(이 기사 읽기 보다는 실제로 코드 보는 것이 빠를지도 모른다..)

배경


  • 기사를 SNS에서 공유
  • 중복 URL 문자열 정보 만 나열되고 이미지가있는 것을 알았습니다.
  • 왜? 조사 => OGP라는 존재를 알았다
  • 당연히 SNS 생활에 녹아 있었기 때문에 의식조차하지 않았던 기술

    • OGP : 위의 이미지처럼 SNS 공유의 외관을 향상시키는 것

    할 일


  • 이미지 준비
  • meta 태그 삽입
  • 동작 확인 (이번에는 Twitter 전용)

    • 이미지 준비



    우선 무엇이든 좋다.
    사이즈 등은 아이 캐치 이미지가 표시되고 나서합시다.

    경로 지정에서는 화상을 표시할 수 없기 때문에, 넷상에 놓아 두지 않으면 안됩니다
    그것을 참조하여 표시합니다.
    이번에는 GitHub에 놓여있는 것을 참조합니다.

    이 사이트 을 사용해도 좋을지도

    meta 태그 삽입



    HTML head 태그에 아래 코드를 추가합니다.
    표시되는 정보를 작성합니다.
    <head>
   ...
  <meta name="twitter:card" content="summary_large_image" />  
  <meta name="twitter:title" content="Twitter Card Test" /> 
  <meta name="twitter:description" content="タイトルの下に出てくる文章" />
  <meta name="twitter:image" content="https://raw.githubusercontent.com/taiga248/TwitterCard/master/img/knowder.png" />
   ...
</head>

    첫 번째 meta 태그는 표시되는 이미지의 크기를 지정합니다.
  • summary
  • summary_large_image
  • app
  • player

    • 라고 말한 종류가 있다.

    동작 확인



    이 사이트 에서 URL을 입력하면 어떻게 표시되는지 확인할 수 있습니다.



    localhost에서는 확인할 수 없기 때문에 사이트가 공개되고 있는 필요 개미(아마)
    공개하지 않은 경우 ngrok로 터널링하여 확인할 수 있습니다.

    이번에는 GitHubPages에 게시된 사이트에 도입했습니다.

    끝



    코드 예
    [메모] VSCode 테마
    터미널에서 트윗 해 보았다!

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage