GitHub 리포지토리를 소셜 미디어에 붙일 때 멋지다는 것을 걱정했습니다.

GitHub 리포지토리를 소셜 미디어에 붙였을 때의 전개가 되는 방법이 신경이 쓰였으므로,
이 기사에서는 공유를위한 GitHub Pages를 만들어 문제를 해결하려고합니다.

배포되는 카드 비포 애프터

먼저 Twitter, Facebook, LinkedIn에서,
URL 공유 시 전개되는 요약 카드 개선 전후의 비교 이미지를 붙여 둡니다.
왼쪽이 리포지토리를 그대로 붙였을 때의 것, 오른쪽이 공유용 페이지를 붙였을 때의 것입니다.

리포지토리를 그대로 붙였을 때의 문제점

GitHub 리포지토리를 그대로 소셜 미디어에 붙여 넣으면 다음과 같은 문제가 발생합니다.

자신의 GitHub 계정 아이콘이 펼쳐져 빛나는

LinkedIn에 붙이면 아이콘이 굉장히 업되어 쓰레기를 느낀다

Twitter에서는 Contribute to <repository-name> development by creating an account on GitHub
해결책 없는 것일까 하고 찾아 보았더니, github의 요망 접수 리포지토리에 세워졌다 Support custom (per repository) og : image thumbnails. 라는 Issue를 발견.
2년 정도 전부터 「리포지토리마다 로고 이미지를 설정하고 싶다」라는 요망은 있었던 것 같습니다.
이 기능 있으면 편리하네요.

소셜 미디어에서 외형을 개선하는 방법

일단 이번은 자력 구제로 어떻게든 합니다.

GitHub 리포지토리의 메타태그는 아마도 제어할 수 없으므로,
그 밖에 소프트웨어를 소개하기 위한 공식 웹사이트를 만들 수밖에 없습니다.
이것은 GitHub Pages를 사용할 수 있으므로, 설정 방법을 알고 있으면 시간을 들이지 않고 구축할 수 있습니다.

절차:

GitHub Pages에 게시하기위한 문서 만들기 (README.md 사용 가능)

리포지토리 로고 이미지 만들기 (높이 630/너비 1200 참고 Qiita: OGP 이미지 크기 )

jekyll-seo-tags에 읽어주기위한 구성 (_config.yml)을 작성하십시오.

GitHub Pages에 게시

덧붙여서 컨피그( _config.yml )는 이런 느낌입니다.
로고 이미지와 트위터 유저명의 설정 밖에 하지 않네요.

theme: jekyll-theme-cayman
twitter:
  username: set0gut1
defaults:
  - scope:
      path: ""
    values:
      image:
        path: /img/logo.jpg
        height: 630
        width: 1200