url공유시 썸네일 이미지

깃헙 블로그(Github blog)로 차별화 된 나만의 홈페이지 만들기!

LaTeX 수식 문법을 지원하는 mathjax를 블로그에 적용하기

해결된 질문

작성

418

수정됨

url공유시 썸네일 이미지를 지정하고 싶은데 자꾸 하얀 화면만 나옵니다. 제가 시도해본 내용은

/_inclues/open-graph.html 추가

<meta property="og:url" content="{{ site.url }}{{ page.url }}" />
<meta property="og:title" content="{{ page.og_title }}" />
<meta property="og:description" content="{{ page.og_description }}" />
<meta property="og:image" content="{{ site.url }}{{ page.og_image }}" />
<meta property="og:type"  content="{{ page.og_type }}" />
<meta property="og:locale"  content="en_US" />

/_layouts/default.html 에 아래 내용 추가

  <head>
    {% include head.html %}
    {% include head/custom.html %}
    {% include open-graph.html %}
  </head>

/_posts/ 마크다운 파일에 아래 내용 추가
header:

teaser: /assets/images/file.png

og_image: /assets/images/file.png

블로그 github

답변 2

인프런 AI 인턴

안녕하세요, 인프런 AI 인턴입니다.
이혜진님, 깃헙 블로그에서 사용할 썸네일 이미지 설정에 어려움을 겪고 계시군요.
썸네일 이미지가 제대로 나오지 않는 문제는 여러 가지 원인이 있을 수 있습니다만, 공유해주신 코드를 기반으로 체크해볼 몇 가지 사항을 안내드리겠습니다.

og:image 속성 경로 확인
- og:image의 content 값이 정확한 경로를 가리키고 있는지 확인해주세요.
- {{ site.url }}이 올바른 주소를 반환하고 있는지, 그리고 {{ page.og_image }}에 설정된 이미지 파일 경로가 정확한지 확인이 필요합니다.
- 이미지 파일이 실제로 해당 경로에 존재하는지도 확인해주세요.
이미지 파일 크기 및 형식
- 일부 소셜 미디어 플랫폼에서는 이미지의 크기나 형식에 제약이 있을 수 있습니다. 이미지 파일이 너무 크거나, 지원하지 않는 형식일 수 있으니 점검해보시기 바랍니다.
캐시 문제
- 때로는 소셜 미디어에서 이전에 크롤링한 데이터를 캐시에 저장하고 사용하기 때문에 최신 이미지가 반영되지 않을 수 있습니다. 캐시를 비우거나 해당 플랫폼의 Debugging Tool을 사용하여 새로 크롤링하도록 요청할 수 있습니다.

해당 사항을 점검하시고도 문제가 해결되지 않는 경우, HTML 태그의 구성이나 기타 세부 설정에 문제가 있는지 추가적으로 확인해보셔야 할 것 같습니다. Jekyll 테마나 다른 설정 파일에서 충돌이 일어나지 않는지도 확인해볼 필요가 있습니다.

더 자세한 도움이 필요하시면 웹 개발 관련 커뮤니티나 Jekyll 관련 문서를 참조하는 것이 좋으며, 구체적인 코드 리뷰를 위해 Github 레포지토리를 공유하는 것도 고려해보실 수 있습니다.
도움이 필요하신 경우 언제든 문의해주시기 바랍니다.

런어데이

지식공유자

안녕하세요? 답변 드리겠습니다 :)
네 위에 인턴님께서 답변해 준 것처럼 og_image 에 설정하는 이미지가 thumbnail로 표기 됩니다.

만약, 표기 되지 않는다면, 경로 설정 문제 일 수 있습니다.

저의 경우는 아예 사이트 url 에 이미지 주소를 넣었습니다.

만약, 이미지 경로를 제대로 못 가져온다고 생각되신다면 아래처럼 site 의 image asset 주소를 직접 넣어봐주세요.

아래의 코드를 참고해 주시면 되겠습니다.

인프런 커뮤니티 질문&답변

url공유시 썸네일 이미지