Open Graph를 사용하여 소셜 공유의 표시를 규제합니다.

오픈 그래프(OG)는 Facebook, LinkedIn, Twitter 등과 같은 소셜 플랫폼이 해당 플랫폼에서 URL을 공유할 때 웹사이트에서 데이터를 추출하는 데 활용하는 시스템입니다. 오픈 그래프 설정을 통해 사이트의 링크 미리보기에 표시되는 정보를 정의할 수 있습니다. 

기억해야 할 핵심 사항: 오픈 그래프 설정을 구성하지 않은 경우 사이트가 소셜 미디어에 공유될 때 임의의 콘텐츠(또는 콘텐츠 없음)가 표시됩니다. 

이 가이드에서는 다음 내용을 알려드립니다. 

1. 오픈 그래프 태그 설정
2. 동적 오픈 그래프 태그 배열
3. 오픈 그래프 설정 테스트 및 수정
4. 오픈 그래프 이미지 누락 문제 해결

오픈 그래프 태그를 설정하는 방법

Webflow에서는 3개의 Open Graph 태그를 정의할 수 있습니다. 

• 그래프 제목 열기 — 페이지의 URL이 공유될 때 페이지 제목으로 표시되는 텍스트
• 오픈 그래프 설명 — 제목 아래에 표시되고 페이지 콘텐츠의 개요를 제공하는 텍스트 표현입니다.
• 그래프 이미지 열기 — 제목과 설명 위에 표시되는 이미지

유용한 팁: 오픈 그래프 콘텐츠는 공유되는 특정 페이지에 맞게 조정될 때 가장 효과적입니다. 예를 들어 홈페이지의 오픈 그래프 콘텐츠는 가격 페이지의 콘텐츠와 달라야 합니다. 오픈 그래프 태그는 전체적으로 적용할 수 없으며 지정된 페이지에만 적용됩니다. 따라서 각 페이지에 대해 오픈 그래프 태그를 설정하는 것이 좋습니다.

다음으로 이동하여 페이지의 오픈 그래프 설정에 액세스하고 조정할 수 있습니다. 페이지 패널 > 페이지 설정 > 그래프 설정 열기.

프로 힌트: 현지화가 활성화된 웹사이트에서는 페이지 수준 오픈 그래프 설정을 현지화할 수 있습니다. 오픈 그래프 설정 현지화에 대해 자세히 알아보세요. 

오픈 그래프 제목 및 설명 

오픈 그래프 제목과 설명을 수동으로 입력하거나 각 오픈 그래프 필드 아래에 있는 checkboxes를 선택하여 SEO 제목과 메타 설명에서 검색할 수 있습니다. 

그래프 이미지 열기

오픈 그래프 이미지를 지정하려면 이미지에 대한 직접 링크(예: 이미지의 파일 이름과 확장자로 끝나는 URL)를 제공하세요. 

오픈 그래프 이미지 필드의 자산 패널에서 이미지를 활용하려면: 

1. 해당 이미지 위로 마우스를 가져가세요. 자산 패널
2. 설정을 클릭하세요 "장부" 아이콘이 나타납니다.
3. "를 마우스 오른쪽 버튼으로 클릭하십시오.링크자산 세부정보 메뉴의 자산 이름 옆에 있는 ' 아이콘
4. 링크 복사 
5. 링크를 붙여넣으세요. 그래프 이미지 열기 필드

더 발견하다: 이미지를 최적화하여 사이트 미리보기 향상

동적 Open Graph 태그를 구성하는 방법

컬렉션 페이지에서는 컬렉션의 모든 페이지가 오픈 그래프 세부 정보에 대해 준수할 템플릿을 설정할 수 있습니다. 이렇게 하면 각 컬렉션 항목에 대한 오픈 그래프 제목을 수동으로 설정하는 대신 컬렉션의 모든 항목이 설정된 템플릿을 기반으로 오픈 그래프 제목, 설명 및 이미지를 자동 생성합니다. 예를 들어, 블로그 게시물 컬렉션을 사용하면 동적 데이터를 사용하여 오픈 그래프 설정의 게시물 이름 또는 제목 컬렉션 필드에서 콘텐츠를 추출할 수 있습니다.

정적 페이지와 마찬가지로 다음으로 이동하여 이 정보를 편집할 수 있습니다. 페이지 패널 > 페이지 설정 > 그래프 설정 열기. 

오픈 그래프 제목 및 설명 

컬렉션 필드의 동적 데이터로 오픈 그래프 제목 및 설명 필드를 미리 로드하려면 필드 추가. 

오픈 그래프 제목과 설명을 수동으로 입력하거나, 각 오픈 그래프 필드 아래에 있는 checkboxes를 선택하여 SEO 제목과 메타 설명에서 오픈 그래프 제목과 설명을 가져올 수도 있습니다.  

그래프 이미지 열기

컬렉션 페이지에 오픈 그래프 이미지를 할당하려면 그래프 이미지 열기 드롭다운을 선택하고 영상 컬렉션의 필드(예: 기본 이미지, 썸네일 이미지 등). 컬렉션에 이미지 필드가 없으면 오픈 그래프 이미지를 지정할 수 없습니다.

알아채다: 컬렉션의 모든 오픈 그래프 이미지는 동일한 크기를 가져야 합니다. 

오픈 그래프 설정을 검사하고 수정하는 방법

링크를 공유하기 전에 링크를 미리 보고 링크가 소셜 미디어 플랫폼에 어떻게 표시되는지 이해하거나 링크 미리 보기에 오래된 데이터가 나타나는 경우 오픈 그래프 콘텐츠를 업데이트하는 것이 도움이 될 수 있습니다.

몇몇 인기 소셜 미디어 플랫폼은 오픈 그래프 데이터를 미리 보고, 디버깅하고, 새로 고칠 수 있는 자체 도구를 제공합니다. 

• 페이스북
• 링크드인
• 트위터

알아채다: Pinterest와 Instagram에는 Open Graph 데이터를 검증하는 전용 도구가 없습니다. Facebook의 디버거 도구를 활용하면 이러한 플랫폼에서 사이트가 표시될 가능성을 확인할 수 있습니다. Facebook 디버거에 액세스하려면 Facebook에 로그인해야 합니다.

페이스북 

Facebook은 링크를 스크랩(인덱싱)하고 최신 오픈 그래프 데이터를 검색할 수 있는 자체 디버거 도구를 제공합니다. 

Facebook 디버거를 활용하려면 링크를 삽입하고 디버그. 오픈 그래프 설정을 변경한 후 표시된 데이터가 오래된 경우 다음을 선택하세요. 다시 긁어내기 데이터를 새로 고치려면. 

알아채다: Facebook 디버거에 액세스하려면 Facebook에 로그인해야 합니다.

링크드인

LinkedIn의 게시물 검사관 링크 재스크랩을 요청하고, LinkedIn이 링크 미리보기를 마지막으로 업데이트한 시기를 확인하고, 오픈 그래프 데이터와 관련된 문제를 해결할 수 있습니다. 

LinkedIn 게시물 검사기를 사용하려면 링크를 삽입하고 다음을 클릭하세요. 검사. 속성(예: 제목, 유형, 이미지 등)을 클릭하면 LinkedIn이 값을 선택한 방법에 대한 통찰력을 얻을 수 있습니다. 

알아채다: LinkedIn 게시물 검사기에 액세스하려면 LinkedIn에 로그인해야 합니다. 

트위터

트위터의 카드 검사기는 링크의 오픈 그래프 데이터에 대한 디버그 정보가 포함된 로그를 제공합니다. Twitter 카드 검사기를 활용하려면 링크를 삽입하고 다음을 클릭하세요. 미리보기 카드. 

Twitter에서는 더 이상 카드 검사기 내 링크 미리보기를 표시하지 않습니다. Twitter에서 공유할 때 링크가 어떻게 표시되는지 보려면 트윗을 작성하고 링크를 삽입하세요. 

알아채다: 트위터에서 카드 검사기와 트윗 작성기에 액세스하려면 트위터 계정에 로그인해야 합니다.

누락된 오픈 그래프 이미지를 해결하는 방법

Facebook에서 사이트 링크를 공유할 때 링크 미리보기에는 제목과 설명만 포함되어 있고 오픈 그래프 설정에 설정된 이미지는 없는 것을 볼 수 있습니다. 

이는 일반적으로 페이지를 공유하고 미리보기가 처음 생성될 때 발생하지만 게시물에서 링크를 제거했다가 다시 추가하면 이 문제를 해결할 수 있습니다. 그러나 몇 가지 모범 사례를 채택하면 이 문제가 발생하는 것을 방지할 수 있습니다. 

1. 사이트의 모든 오픈 그래프 이미지에 대해 균일한 크기를 유지하세요. Facebook에서는 최소 너비가 1080픽셀인 이미지를 활용할 것을 제안합니다. 이미지 공유에 대한 Facebook 권장 사항을 확인하세요. 
2. Facebook 디버거 도구를 통해 링크를 실행하여 이미지를 미리 캐시하세요. 오픈 그래프 이미지를 업데이트한 후에도 이 작업을 수행해야 합니다. 
3. 오픈 그래프 태그를 활용하여 웹 크롤러에 대한 이미지 크기를 지정하세요. 이를 통해 비동기식 다운로드 및 처리 없이도 웹 크롤러가 이미지를 즉시 렌더링할 수 있습니다. 다음 코드 조각을 삽입하십시오. 사이트 설정 > 맞춤 코드 탭 > 헤드 코드 섹션에서 사이트 이미지의 픽셀 값과 일치하도록 너비 및 높이 값을 변경합니다(모든 오픈 그래프 이미지에 대해 일관된 크기를 가정). 

‍사이트의 머리글 및 본문 태그에 사용자 정의 코드를 구현하는 방법에 대해 자세히 알아보세요. 

기억해두면 유용한 팁: 사이트 전체에서 다양한 크기의 오픈 그래프 이미지를 사용하는 경우 위의 코드 조각을 페이지 패널 > 페이지 설정 > 내부에 꼬리표 귀하의 사이트 설정 내에서가 아닌. 컬렉션 내의 모든 오픈 그래프 이미지는 동일한 크기를 유지해야 합니다.