HubSpot에서 소셜 글에 링크를 추가하면 추천 이미지, 페이지 제목 및 페이지 설명이 포함된 미리보기가 표시됩니다.
소셜 미리보기는 페이지 HTML의 <head> 섹션에 있는 메타 태그를 기반으로 합니다. 이러한 태그는 소셜 미디어 사이트 플랫폼에 공유 링크의 미리 보기를 만들 때 중점을 두어야 할 사항을 알려줍니다. 기본 메타 태그는 다음과 같습니다:
- og:title: 콘텐츠의 제목입니다.
- og:type: 동영상 또는 웹 페이지와 같은 콘텐츠의 유형입니다.
- og:image: 콘텐츠를 나타내는 이미지의 URL입니다.
- og:url: 영구 ID로 사용될 콘텐츠의 고유 URL입니다.
- og:description: 이미지를 요약하는 설명입니다 .
블로그 글의 경우 제목, 메타 설명 및 추천 이미지가 자동으로 설정됩니다. 랜딩 페이지 및 웹사이트 페이지의 경우 제목과 메타 설명도 자동으로 설정되지만 추천 이미지는 수동으로 설정해야 합니다.
참고: LinkedIn은 미리보기 카드에 추천 이미지, 페이지 제목 및 URL을 표시하지만 메타 설명은 포함하지 않습니다.
글 미리 보기에 추천 이미지, 페이지 제목 또는 페이지 설명이 표시되지 않음
소셜 글 미리 보기에 예상되는 추천 이미지, 페이지 제목 또는 페이지 설명이 표시되지 않는 경우 HubSpot에서 또는 외부 디버깅 도구를 사용하여 문제를 해결할 수 있습니다.
HubSpot 내에서 문제 해결
HubSpot에서 호스팅하는 블로그 글, 랜딩 페이지 또는 웹사이트 페이지에 링크하는 경우 페이지 또는 글의 설정에서 추천 이미지가 설정되어 있는지 확인하세요.
수동으로 설정할 수도 있습니다. og:image 태그를 수동으로 설정하여 추천 이미지를 추가할 수도 있습니다:
-
콘텐츠로 이동합니다:
- 웹사이트 페이지로 이동합니다: HubSpot 계정에서 콘텐츠 > 웹사이트 페이지로 이동합니다.
- 랜딩 페이지: HubSpot 계정에서 콘텐츠 > 랜딩 페이지로 이동합니다.
- 페이지 이름을 클릭합니다.
- 콘텐츠 편집기에서 설정 메뉴를 클릭하고 클릭을 선택합니다.
- 대화 상자에서 이 코드 스니펫을헤드 HTML 필드에 붙여넣습니다:
<meta property="og:image" content="IMG URL">
<meta name="twitter:card" content="summary_large_image">
- 오른쪽 상단에서 게시 또는 업데이트를 클릭하여 변경 사항을 실시간으로 설정합니다.
브라우저 개발자 도구로 문제 해결하기
소셜 게시물에서 외부 페이지를 공유하는 경우 Chrome 개발자 도구와 같은 브라우저 개발자 도구를 사용하여 페이지의 메타 태그가 올바르게 설정되었는지 확인할 수 있습니다. 페이지의 소스를 확인한 다음 다음 사항을 확인하고 확인합니다:
- 메타 태그가
og:image 및 기타 메타 태그가 올바르게 표시되는지 확인합니다.
- 각 태그의 세부 정보가 올바른지 확인합니다. 예를 들어, 추천 이미지 URL이 올바른지 확인합니다.
og:image 태그의 추천 이미지 URL이 올바른지 확인합니다.
- 각 유형의 메타 태그는 한 개만 표시됩니다. 동일한 메타 태그가 여러 개 있는 경우 소셜 네트워크에서 링크 미리 보기를 생성할 때 올바른 메타 태그를 선택하지 않을 수 있습니다.
- 메타 태그는 HTML 상단에 위치합니다. 메타 태그 앞에 추가 코드나 마크업이 있는 경우 소셜 네트워크 크롤러가 이러한 태그를 찾지 못할 수 있습니다.
소셜 네트워크 디버깅 도구로 문제 해결하기
소셜 미리 보기와 메타 태그가 일치하지 않는 경우 소셜 네트워크에서 해당 페이지를 다시 크롤링해야 할 수 있습니다. 각 소셜 네트워크에 대해 다음 유효성 검사 도구를 사용하여 오류를 표시하거나 페이지 다시 스크롤을 트리거하세요:
- Facebook 공유 디버거: Facebook은 24시간마다 공유 콘텐츠를 자동으로 다시 스크롤합니다. 수동으로 다시 스크롤을 트리거하려면 공유 디버거에서 다시 스크랩을 클릭합니다.
- X 카드 유효성 검사기: X는 게시물을 게시한 후 7일 동안 콘텐츠를 캐시합니다. URL을 입력하고 카드 유효성 검사기에서 카드 미리 보기를 클릭하여 콘텐츠의 다시 스크롤을 트리거합니다.
- LinkedIn 게시물 검사기: LinkedIn은 게시물을 게시한 후 7일 동안 콘텐츠를 캐시합니다. 콘텐츠 다시 스크롤을 트리거하려면 게시물 검사기에서 검사를 클릭합니다.
일반적으로 페이지를 다시 스크롤하기 전에 게시된 모든 게시물에는 잘못된 이미지가 유지됩니다. 페이지에 og:image 태그가 설정되지 않은 경우 소셜 네트워크는 페이지를 스캔하여 소셜 게시물에 포함할 가장 적합한 이미지를 찾으며, 일반적으로 가장 먼저 발견되는 이미지가 이 이미지입니다. 페이지 크롤링을 방지하기 위해 robots.txt 파일 또는 보안 소프트웨어를 사용하는 경우 링크 미리보기 이미지가 전혀 표시되지 않을 수 있습니다.
추천 이미지 표시 문제
소셜 글 미리 보기에 예상되는 추천 이미지가 표시되지만 이미지가 잘못 표시되는 경우 다음을 확인할 수 있습니다.
이미지 크기 또는 비율이 올바르지 않음
소셜 미리보기에서 추천 이미지가 올바르게 표시되지 않는 경우(예: 이미지가 잘리거나 비율이 올바르지 않은 경우) 게시하려는 소셜 네트워크에 적합한 크기가 되도록 이미지를 편집한 다음 페이지를 다시 게시해야 할 수 있습니다.
각 네트워크에서 추천 이미지 최적화를 위해 권장되는 크기는 다음과 같습니다:
- Facebook: 1.91:1
- X: 사진 글의 경우 16:9, 링크 글의 추천 이미지의 경우 1.91:1
- Instagram(정사각형): 1:1
- 인스타그램(세로) 4:5
- 인스타그램(가로) 1.91:1
- LinkedIn(가로) 1.91:1
소셜 게시물에 포함된 모든 미디어가 각 네트워크의 파일 크기 가이드라인을 따르는지 확인하세요. 파일이 너무 커서 특정 네트워크에 게시할 수 없다고 HubSpot에서 판단하는 경우 소셜 게시물을 만들 때 경고가 표시됩니다. 다음은 각 소셜 네트워크의 최대 파일 크기입니다:
- Facebook: 8MB(픽셀화를 방지하기 위해 PNG 파일의 경우 1MB 미만 권장)
- Instagram: 8MB
- X: 5MB(GIF의 경우 15MB)
- LinkedIn: 10MB
이미지 색상의 차이
임베드된 색상 프로필은 추천 이미지가 소셜 게시물에 표시되는 방식에 영향을 줄 수 있습니다. 시스템마다 일반적인 색상 프로필을 처리하는 방식이 다르기 때문에 파일 관리자에서 이미지를 미리 볼 때 색상이 다르게 보일 수 있습니다.
외부 도구를 통해 이미지 URL을 실행하여 일반적이지 않은 색상 프로필을 사용하고 있는지 확인할 수 있습니다. 필요한 경우 포토샵과 같은 외부 사진 편집 도구에서 간섭하는 색상 프로필을 제거한 다음 소셜 게시물을 게시하기 전에 페이지를 다시 게시할 수 있습니다.
이미지 선명도의 차이
HubSpot의 파일 관리자는 JPEG 및 PNG에 이미지 압축을 사용하여 HubSpot에서 호스팅하는 콘텐츠의 로딩 속도를 최적화하는 데 도움을 줍니다. 소셜 미디어 네트워크에서도 게시물에 이미지 압축을 사용하므로 HubSpot에서 보는 것과 품질이 다를 수 있습니다.
따라서 각 네트워크마다 비교적 고해상도 이미지를 사용하는 것이 좋습니다. 이미지가 소셜 네트워크의 요구 사항을 충족하지 않는 경우 HubSpot의 소셜 게시 도구에 경고가 표시되어 이미지를 적절히 조정할 수 있습니다.
마케팅 Hub
Professional
,
Enterprise