워드프레스 사이트를 운영하다 보면 글 공유 시 페이스북이나 쓰레드에서 섬네일 이미지가 제대로 표시되지 않는 문제를 겪는 경우가 많습니다. 분명 대표 이미지를 등록했는데도 이미지가 깨져 보이거나 엉뚱한 이미지가 표시되는 상황은 특히 초기에 많이 발생합니다. 이 글에서는 WP code plugin과 Open Graph Image 설정을 통해 이러한 문제를 근본적으로 해결하는 방법을 정리합니다.
- 페이스북 및 쓰레드 썸네일 오류 원인
- Rank Math 사용 시 발생하는 문제
- OG 이미지 강제 지정 방식 소개
Table of Contents
1. Open Graph Image란 무엇인가
Open Graph Image는 소셜 미디어에서 웹페이지를 공유할 때 표시되는 대표 이미지를 지정하기 위한 메타 정보입니다. 페이스북과 쓰레드뿐 아니라 카카오톡, 링크드인 등 대부분의 소셜 플랫폼이 이 정보를 기반으로 미리보기를 생성합니다. 이 설정이 제대로 되어 있지 않거나 충돌이 발생하면 이미지가 잘리거나 전혀 다른 이미지가 노출될 수 있습니다.
- 소셜 공유용 대표 이미지 역할
- 플랫폼 공통 표준 메타 태그
- 이미지 크기와 비율 중요
2. Rank Math Open Graph 설정의 한계
Rank Math SEO 플러그인은 워드프레스의 Open Graph 설정을 매우 쉽게 할 수 있도록 기능을 제공하지만 모든 워드프레스 환경에서 완벽하게 동작하지는 않습니다. 특히 테마나 다른 플러그인과 충돌이 발생하는 경우 설정한 OG 이미지가 무시되거나 잘못된 경로로 출력되는 문제가 발생할 수 있습니다. 제 워드프레스 환경에서도 Rank Math에서 OG 이미지를 지정하면 오히려 썸네일이 깨지는 현상이 반복적으로 발생했습니다.
- 테마 충돌 가능성
- 중복 OG 태그 출력 문제
- 이미지 경로 인식 오류
이런식으로 이미지가 제대로 나오지 않고 깨져서 나오는 것인데요. 아예 미디어 업로드에 1200 630 비율의 jpg 이미지를 업로드하고, 해당 이미지를 썸네일로 자동으로 지정하도록 wp-code를 사용해 강제적으로 지정해주는 방법을 사용하도록 하겠습니다.
이미지를 강제로 지정하는 방식이 필요한 이유
이러한 문제를 해결하기 위해 가장 확실한 방법은 OG 이미지를 코드 레벨에서 직접 지정하는 것입니다. 워드프레스 미디어 라이브러리에 1200×630 비율의 JPG 이미지를 업로드한 뒤 해당 이미지를 모든 페이지의 기본 OG 이미지로 강제 지정하면 플랫폼별 해석 차이를 최소화할 수 있습니다. 이 방식은 플러그인 설정에 의존하지 않기 때문에 안정성이 높습니다.
- 플러그인 의존도 제거
- 모든 페이지에 동일한 기준 적용
- 플랫폼 간 호환성 개선
3. 권장 Open Graph 이미지 규격
페이스북과 쓰레드에서 가장 안정적으로 출력되는 Open Graph 이미지 규격은 가로 1200px 세로 630px 비율의 JPG 이미지입니다. PNG보다는 JPG가 호환성이 좋으며 파일 용량은 가능한 한 최적화하는 것이 좋습니다. 이미지 안에는 텍스트를 과도하게 넣지 않는 것이 안전합니다.
- 가로 1200px 세로 630px
- JPG 형식 권장
- 텍스트 최소화
위 형식대로 캔바나 미리캔버스에서 오픈그래프 섬네일 전용 이미지를 제작하고, 워드프레스 미디어에 업로드하고 아래 방식을 통해 섬네일로 지정해주어야 합니다.
4. WPCode를 이용한 OG 이미지 강제 지정 방법
WPCode 플러그인을 사용하면 테마 파일을 직접 수정하지 않고도 헤더에 원하는 메타 태그를 삽입할 수 있습니다. 헤더 영역에 og:image 관련 메타 태그를 직접 추가하면 Rank Math 설정과 관계없이 해당 이미지가 우선 적용됩니다. 이 방식은 유지보수 측면에서도 안전하며 테마 업데이트 시에도 코드가 유지됩니다.
다음 단계를 차근차근 따라해서 OG이미지를 지정할 수 있습니다.
4-1. 삽입해야 할 기본 OG 메타 구조 확인
OG 이미지 설정 시 헤더에는 og:type, og:site_name, og:image, og:image:width, og:image:height 같은 기본 메타 태그가 함께 들어가야 합니다. 이때 이미지 URL은 반드시 실제 접근 가능한 경로여야 하며 보안 연결을 위해 https 주소를 사용하는 것이 좋습니다.
4-2. 사용할 OG 이미지 링크 확인
워드프레스의 이미지 라이브러리에서 이미지 url을 확인할 수 있습니다. 사용할 이미지를 미디어 라이브러리에 업로드한 후, 첨부파일 세부사항 오른쪽 아래에 있는 파일 URL을 확인하고 복사해둡니다.
4-3. 아래 코드를 WP-Code에서 헤더에 붙여넣기
앞서 살펴본 메타 태그 필수 구조와 사용할 이미지 파일 Url을 사용해서 아래와 같은 코드를 만들 수 있습니다. WP Code plugin을 활용해서 아래 코드를 손쉽게 추가할 수 있습니다.
<meta property="og:image" content="내가 사용할 op image 링크 여기에 넣기">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
- 위 코드에서, ‘내가 사용할 op 이미지 링크 여기에 넣기’ 안에 내가 사용할 이미지의 링크를 넣어주면 됩니다.
- WP Code 플러그인에서 헤더에 위 코드를 붙여넣기 해줍니다.
5. 페이스북 디버깅 및 스크랩 하기
위 과정을 모두 완료했다면 사이트의 오픈그래프 섬네일 이미지 지정이 잘 되었을 것입니다. 이제 설정이 바뀌었다는 것을 페이스북, 스레드에 알려주기 위해 디버그를 시행해야 합니다. 아래 링크에서 디버깅을 시행할 수 있습니다. 업데이트하고자 하는 내 사이트의 게시글 링크를 넣어주고 ‘스크랩’을 눌러 진행해줍니다.
스크랩시 변경된 og image가 잘 적용되었다면 썸네일 이미지 지정이 완료된 것입니다.
6. 자주 묻는 질문 Q&A
Q. Rank Math OG 이미지를 꺼도 되나요?
네 헤더에서 OG 이미지를 직접 지정하는 경우 Rank Math의 OG 이미지 기능은 꺼두는 것이 중복 출력을 방지하는 데 도움이 됩니다.
Q. 모든 글에 같은 썸네일이 적용되나요?
기본 OG 이미지를 강제 지정하면 개별 설정이 없는 경우 동일한 이미지가 적용됩니다. 필요하다면 특정 글에는 별도로 OG 이미지를 추가할 수 있습니다.
Q. 이미지 변경 후 바로 반영되지 않는 이유는 무엇인가요?
페이스북과 쓰레드는 캐시를 사용하기 때문에 디버거 도구를 통해 다시 스크랩해야 변경 사항이 반영됩니다.
OG 이미지 설정 방식 비교 요약하기
| 방식 | 장점 | 단점 |
|---|---|---|
| SEO 플러그인 설정 | 간편함 | 충돌 가능성 |
| 헤더 직접 코딩 | 안정성 높음 | 초기 설정 필요 |
| WPCode 사용 | 유지보수 편리 | 추가 플러그인 필요 |
지금까지 wp code 플러그인을 사용해 썸네일 이미지를 지정해주는 방법에 대해 살펴보았습니다. 일반적으로는 대표 이미지가 자동으로 op image(썸네일 이미지)로 지정되지만, 이미지 최적화 플러그인을 사용하거나 wepb 확장자 이미지를 사용하는 경우 이미지의 화질이나 포맷이 충돌을 일으켜 제대로 대표이미지가 출력되지 않을 수 있습니다. 이 경우 썸네일 전용 jpg 이미지를 위 과정을 이용해 문제를 해결할 수 있습니다. 도움이 되었기를 바랍니다.
- 함께 읽어볼만한 글