• 카테고리

    질문 & 답변

  • 세부 분야

    기타 (개발 · 프로그래밍)

  • 해결 여부

    해결됨

url공유시 썸네일 이미지

24.03.01 17:52 작성 24.03.01 17:57 수정 조회수 104

0

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

course-thumbnail

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

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

강의실 바로가기

답변 2

·

답변을 작성해보세요.

1

인프런 AI 인턴님의 프로필

인프런 AI 인턴

2024.03.03

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

  1. og:image 속성 경로 확인

    • og:image의 content 값이 정확한 경로를 가리키고 있는지 확인해주세요.
    • {{ site.url }}이 올바른 주소를 반환하고 있는지, 그리고 {{ page.og_image }}에 설정된 이미지 파일 경로가 정확한지 확인이 필요합니다.
    • 이미지 파일이 실제로 해당 경로에 존재하는지도 확인해주세요.

  2. 이미지 파일 크기 및 형식

    • 일부 소셜 미디어 플랫폼에서는 이미지의 크기나 형식에 제약이 있을 수 있습니다. 이미지 파일이 너무 크거나, 지원하지 않는 형식일 수 있으니 점검해보시기 바랍니다.

  3. 캐시 문제

    • 때로는 소셜 미디어에서 이전에 크롤링한 데이터를 캐시에 저장하고 사용하기 때문에 최신 이미지가 반영되지 않을 수 있습니다. 캐시를 비우거나 해당 플랫폼의 Debugging Tool을 사용하여 새로 크롤링하도록 요청할 수 있습니다.

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

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

0

런어데이님의 프로필

런어데이

지식공유자

2024.03.04

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

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

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

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

 

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

<meta property="og:image" content="https://teddylee777.github.io/images/logo.png">

 

이 글과 비슷한 Q&A