콘텐츠로 건너뛰기

소셜 글 링크 미리 보기를 위해 웹사이트의 robots.txt 및 이미지 메타 태그를 구성합니다.

마지막 업데이트 날짜: 2월 12, 2025

명시된 경우를 제외하고 다음 구독 중 어느 것에서나 사용할 수 있습니다.

마케팅 Hub   Professional , Enterprise
레거시 Marketing Hub Basic

HubSpot에서 소셜 글을 작성하고 게시하면 해당 소셜 네트워크에서 글에 대한 이미지 미리 보기를 생성하려고 시도합니다. 소셜 네트워크는 글에 입력한 링크를 기반으로 페이지의 소스 코드에 있는 메타 태그를 스캔하고 웹사이트의 robots.txt 파일을 크롤링합니다.

워드프레스와 같은 외부 서비스 제공업체에서 웹사이트를 호스팅하는 경우 글 미리보기가 예상대로 표시되지 않으면 아래 지침을 따르세요.

robots.txt 업데이트

robots.txt 파일은 검색 엔진에 웹사이트 색인 생성 방법을 알려줍니다. robots.txt 파일을 제대로 추가하거나 구성하지 않은 경우 소셜 네트워크에서 페이지의 콘텐츠를 구문 분석할 수 없습니다. Facebook과 X는 모두 robots.txt 파일에 추가해야 하는 사용자 에이전트 문자열을 제공합니다:

User-agent: facebookexternalhit
Disallow:

User-agent: Twitterbot
Disallow:

LinkedIn은 사용자 에이전트 문자열에 대한 설명서를 제공하지 않지만 LinkedIn 게시물 검사기를 사용하여 LinkedIn에서 웹사이트 콘텐츠를 크롤링할 수 있는지 확인할 수 있습니다.

웹사이트 페이지의 <head> 섹션에 메타 태그 추가하기

검색 엔진과 소셜 네트워크는 HTML의 헤드 섹션을 파싱하여 페이지 미리 보기를 생성하는 데 필요한 메타데이터를 찾습니다. 기본 메타 태그 뒤에 Facebook 및 X에 대한 메타데이터를 포함해야 합니다:

<!-- Primary Meta Tags -->
<title>Meta Tags — Preview, Edit and Generate</title>
<meta name="title" content="Meta Tags — Preview, Edit and Generate">
<meta name="description" content="With Meta Tags you can edit and experiment with your content then preview how your webpage will look on Google, Facebook, Twitter and more!">

<!-- Open Graph / Facebook -->
<meta property="og:type" content="website">
<meta property="og:url" content="https://example.com">
<meta property="og:title" content="Title of your Website Page">
<meta property="og:description" content="Description of your Website Page">
<meta property="og:image" content="https://example.com/image.png">

<!-- Twitter -->
<meta property="twitter:card" content="summary_large_image">
<meta property="twitter:url" content="https://example.com/">
<meta property="twitter:title" content="Title of your Website Page">
<meta property="twitter:description" content="Description of your Website Page">
<meta property="twitter:image" content="https://example.com/image.png">

위의 각 메타 태그의 콘텐츠 속성을 페이지에 해당하는 값으로 채웁니다. Facebook 디버거 도구, X 카드 유효성 검사기 및 LinkedIn 게시물 검사기를 사용하여 메타 태그의 유효성을 검사할 수 있습니다.

삽입한 링크의 추천 이미지가 소셜 미리 보기에서 올바르게 표시되지 않는 경우(예: 이미지가 잘리거나 비율이 올바르지 않은 경우) 게시하려는 소셜 네트워크에 적합한 크기가 되도록 이미지를 편집한 다음 페이지를 다시 게시해야 할 수 있습니다. Facebook에 게시하는 경우 해당 문서의 추천 이미지 요구 사항에 대해 자세히 알아볼 수 있습니다.

각 네트워크에서 추천 이미지 최적화를 위해 권장되는 크기는 다음과 같습니다:

  • 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의 소셜 게시 도구에 경고가 표시되어 이미지를 적절히 조정할 수 있습니다.

링크 미리보기가 제대로 표시되지 않는 문제가 계속 발생하면 문제 해결 가이드를 확인하세요.

이 문서가 도움이 되었나요?
이 양식은 문서 피드백에만 사용됩니다. HubSpot으로 도움을 받는 방법 알아보기.