오픈 그래프 검사기

오픈 그래프의 메타데이터 추출 및 확인

ETTVI의 오픈 그래프 유효성 검사기로 오픈 그래프를 검사하여 웹 페이지의 메타데이터가 소셜 미디어에 공유될 때 주목을 받는지 확인하세요. 이 고급 도구는 웹마스터가 자신의 웹 링크가 Facebook, Pinterest, Instagram 및 LinkedIn에 얼마나 잘 나타나는지 실시간으로 확인하는 데 도움이 됩니다.

웹페이지의 URL을 입력하고 ETTVI의 오픈 그래프 유효성 검사기가 오픈 그래프의 미리보기와 메타데이터를 얼마나 빨리 표시하는지 확인하세요. 복사 가능한 항목을 추출하고 강조 표시합니다.

• 오픈그래프 제목

• 오픈그래프 설명

• 웹 리소스 유형

• 웹사이트 이름

• 웹 사이트 주소

• 이미지 URL

ETTVI의 획기적인 오픈 그래프 생성기 유효성 검사기는  OG 메타 태그를 추출합니다  . 이는 자동으로 오픈 그래프 메타 태그를 가져와 표시합니다. 사용자는 요청된 오픈 그래프의 코드를 쉽게 복사하거나 다운로드할 수 있습니다.

오픈 그래프 메타 태그를 확인하고 추출합니다. 웹 링크가 소셜 미디어에 어떻게 나타나는지 무료로 미리 볼 수 있습니다.

웹 링크의 공개 그래프를 확인하려면 다음 단계를 따르세요.

1단계 “URL 입력”

다음과 같이 웹 페이지에 대한 링크를 배치하여 열린 그래프의 유효성을 검사합니다.

2단계 “도구 실행”

유효성 검사를 클릭하여 ETTVI의 Open Graph Checker를 실행하세요.

3단계 “오픈 그래프 미리보기”

ETTVI의 오픈 그래프 유효성 검사기는 오픈 그래프를 표시하여 다음과 같이 링크가 소셜 미디어에 어떻게 나타나는지 보여줍니다.

STEP 4 “오픈그래프 세부정보 확인”

ETTVI의 오픈 그래프 유효성 검사기는 다음 정보를 추출하고 강조 표시합니다.

5단계 “오픈 그래프 메타 태그 가져오기”

ETTVI의 오픈 그래프 유효성 검사기는 OG 메타 태그를 추출하여 다음과 같이 표시합니다.

주어진 열린 그래프의 메타 태그를 저장하려면 또는 를 클릭하세요.

ETTVI의 오픈 그래프 유효성 검사기는 소셜 미디어 사용자가 귀하의 웹 링크가 눈에 띄게 눈에 띄는지 여부를 확인하는 데 최선을 다합니다. 이를 통해 1분 이내에 모든 웹의 공개 그래프를 미리 보고 확인할 수 있습니다. 또한 ETTVI의 고급 도구를 사용하면 열려 있는 그래프의 복사 가능한 메타데이터와 메타태그를 쉽게 추출할 수 있습니다.

ETTVI의 Open Graph Checker가 제공하는 기능과 이를 선택해야 하는 이유를 알아보려면 아래를 살펴보십시오.

사용자 친화적 인 인터페이스

ETTVI 팀은 사용자가 이 도구를 쉽게 찾고, 액세스하고, 사용하여 모든 웹 리소스의 공개 그래프를 테스트할 수 있도록 했습니다. ETTVI 오픈 그래프 유효성 검사기의 모든 기능은 체계적으로 눈에 잘 띄고 적절하게 표시되었습니다. 또한, ETTVI의 Open Graph Tester가 무엇을 하는지, 사용자가 이를 어떻게, 왜 사용해야 하는지 명확하게 명시되어 있습니다.

정확하게 말하면, 이 도구가 웹 링크의 공개 그래프를 확인하기 위해 설계 및 개발된 방식은 정말 놀랍습니다. 웹마스터가 열려 있는 그래프를 검증할 수 있도록 효율적이고 정확하게 작동합니다.

원클릭 검증

ETTVI의 오픈 그래프 유효성 검사기에서는 사용자가 오픈 그래프를 가져오고 표시하기 위해 웹 리소스의 URL을 입력하기만 하면 됩니다. 단 한 번의 클릭만으로 사용자는 모든 웹 페이지의 열린 그래프를 확인하고 유효성을 검사할 수 있습니다. 사용자가 도구 작동을 이해하는 데 문제가 있는 경우 통합 매뉴얼을 읽고 ETTVI의 Open Graph Validator로 오픈 그래프를 테스트하는 방법을 알 수 있습니다.

빠른 추출

사용자가 웹 리소스의 URL을 입력하면 열려 있는 그래프의 모든 세부 정보를 자동으로 가져와 표시합니다. 즉, ETTVI의 오픈 그래프 유효성 검사기는 요청된 오픈 그래프의 메타데이터와 메타 태그를 추출하고 사용자가 필요에 따라 이를 복사하거나 다운로드할 수 있도록 합니다. 확실히 SEO, 소셜 미디어 마케팅 담당자, 블로거를 포함한 모든 웹마스터는 이 고급 도구를 활용하여 열려 있는 그래프의 메타 태그나 제목 및 설명을 실시간으로 추적할 수 있습니다.

무료 및 무제한 액세스

ETTVI를 통해 사용자는 Open Graph Validator에 무료로 액세스하고 사용할 수 있습니다. 전 세계의 사람들이 시간 제한 및 구독에 관계없이 이 고급 도구를 사용하여 공개 그래프를 검증할 수 있습니다.

콘텐츠가 가장 중요합니다. 그러나 최고의 자료라도 소셜 미디어 공유와 공유를 촉진하는 플랫폼이 없으면 눈에 띄지 않을 것입니다. 사용자가 소셜 네트워크에서 도달 범위를 최대화하려는 경우 사용자가 가장 먼저 해야 할 일은 공유 시 콘텐츠의 모양을 개선하는 것입니다. SEO는 Open Graph 태그를 사용하여 이를 수행할 수 있습니다.

오픈 그래프 메타태그란 무엇입니까?

모든 웹 페이지는 오픈 그래프 프로토콜을 통해 소셜 그래프의 풍부한 개체로 변환될 수 있습니다. 오픈 그래프 메타 태그를 HTML 태그 헤더에 추가하여 소셜 미디어에 URL이 표시되는 방식을 변경할 수 있습니다.

웹페이지 섹션에는 이러한 태그가 포함되어 있습니다. 오픈 그래프 태그는 속성 이름 앞에 접두사 og:가 있는 태그입니다.

열린 그래프의 메타 태그는 다음과 같이 코딩됩니다.

개방형 그래프 태그가 무엇인지 학습한 후 SEO는 이러한 태그의 코딩이 어떻게 생겼는지 물을 수 있습니다.

이 코딩의 기본 공식은 다음과 같습니다.

Facebook이 이 개념을 개척했지만 이후 다른 소셜 미디어 회사에서도 이 개념을 채택했습니다. Twitter, LinkedIn 및 Google은 개방형 그래프 태그를 인식합니다. Twitter에는 "Twitter Cards"라는 자체 메타 태그가 있지만 여전히 Open Graph 태그를 인식하고 사용하며 Twitter 카드가 발견되지 않으면 그렇게 합니다. 그러나 SEO는 성공적으로 구현된 유효한 태그에 대한 개요를 제공하는 ETTVI의 개방형 그래프 검사기를 사용할 수 있습니다.

웹사이트에 오픈 그래프 프로토콜이 필요한 이유는 무엇입니까?

오픈 그래프 프로토콜은 공유 콘텐츠의 사용자 경험을 향상시킵니다. 콘텐츠의 노출을 높이고, 더 흥미롭게 만들고, 독자가 클릭하도록 유도합니다.

예를 들어 다음과 같은 풍부한 항목에 참여합니다.

• 웹사이트를 방문하는 사람들의 수를 늘리세요

• 검색 엔진 순위 향상 및 매출 증대

• 웹사이트에 대한 고품질 백링크 달성

• 특정 콘텐츠에 반응하는 사람의 수를 늘립니다.

• 소셜 미디어 팔로어 늘리기

• 웹사이트의 클릭률(CTR)을 높이세요.

OG 태그를 사용하면 누군가가 콘텐츠를 공유할 때 어떤 콘텐츠를 표시해야 하는지 소셜 미디어 네트워크에 알릴 수 있습니다. Facebook은 이미지가 없거나 제목이 잘못된 경우 링크를 게시하기에 적합한 장소가 아닙니다. OG 태그는 특정 그룹이나 위치를 타겟팅하는 데 사용될 수도 있습니다. 예를 들어 SEO는 특정 영역에서 사용자에게 표시되는 정보를 제어할 수 있습니다. 개방형 그래프의 메타데이터에 대한 몇 가지 기본 사항부터 시작해 보겠습니다.

메타데이터 기본 사항

모든 페이지에는 다음과 같은 네 가지 기본 메타 태그가 포함되어야 합니다.

• og:title: 페이지 제목입니다. 여기에는 사이트별 식별자가 포함되어서는 안 되며 페이지 자체에 대한 정보만 포함되어야 합니다.

• og:type: 페이지의 콘텐츠 유형입니다. 가장 일반적인 유형은 웹사이트이지만, 웹마스터가 더 구체적인 것을 요구할 경우 더 다양한 유형을 사용할 수 있습니다.

• og:image: 링크 미리보기에 표시될 사진입니다. 이는 페이지 콘텐츠를 대표하는 이미지여야 합니다. 또한 링크에 연결된 사이트를 나타내는 대체 이미지를 포함하는 것이 좋습니다.

• og:url: 페이지의 표준 URL입니다. 정규화된 URL이어야 합니다.

오픈 그래프 태그를 구현하는 것은 페이지 내 SEO에 직접적인 영향을 미치지는 않지만 소셜 미디어 링크의 성능에는 확실히 영향을 미칠 것입니다. 결과적으로 조사해야 할 중요한 측면입니다!

Facebook의 AND 메타태그 이해하기

Facebook의 오픈 그래프 메타 태그는 다양한 형태로 제공됩니다. 다음은 각 유형을 사용하는 방법을 설명하는 다양한 유형의 개방형 그래프입니다.

및:제목

콘텐츠 제목은 사용자가 예상할 수 있는 방식으로 정의됩니다. 이 목적을 위해 코드는 여전히 표준 메타 제목 태그를 사용할 수 있습니다. Facebook이 페이지에서 메타 제목을 찾지 못하는 경우 og:title 태그 대신 메타 제목이 사용됩니다.

Facebook 뉴스피드에 표시되는 텍스트는 굵게 표시되며 놀라울 정도로 눈길을 끕니다. 좋은 블로그 기사 제목처럼 흥미로울 것입니다.

경험상 60~90자 사이를 유지하는 것이 합리적이지만 상한 또는 하한 제한은 없습니다. Facebook에서는 제목이 100자를 초과하는 경우 제목을 88자로 자릅니다.

및:URL

페이지를 공유할 때 페이지의 표준 URL을 쉽게 설정할 수 있습니다. 기본적으로 이는 모든 공유가 단일 웹페이지에 연결된다는 의미입니다. 이는 콘텐츠에 동일한 콘텐츠를 가리키는 URL이 많이 있는 경우 유용한 태그입니다. 중요 참고 사항: Facebook의 뉴스 피드에는 사용자가 제공한 URL이 아닌 도메인 이름만 표시됩니다.

및: 유형

이는 객체의 유형을 표현합니다. 다음은 몇 가지 예입니다.

오락:

• 책

• 게임

• 영화

이 메타 설명자와 HTML 메타 설명 태그 사이에는 중복되는 부분이 많습니다. og:description 태그는 Facebook의 콘텐츠를 설명하는 데 사용됩니다. 검색 엔진 결과 페이지 상단이 아닌 링크 제목 아래에 표시됩니다. 콘텐츠에 키워드를 포함하는 방법을 알아내려고 너무 많은 시간을 소비하지 마세요. 결과적으로 검색 엔진 순위에는 영향을 미치지 않습니다. 그러나 SEO가 사용자가 클릭하기를 원한다면 흥미롭고 매력적으로 만들어야 하며 ETTVI의 오픈 그래프 유효성 검사기를 사용하여 설명, 제목, 이미지 및 콘텐츠를 확인할 수 있습니다.

트위터 카드

Tumblr 카드는 트윗에만 사용되는 일종의 소셜 메타 태그입니다.

트위터는 트위터 카드 태그를 사용하는데, 이는 가능한 경우 더 큰 기능과 옵션을 제공합니다. 그렇지 않으면 Open Graph가 기본값으로 사용됩니다(제공된 경우 다시 한 번).

트위터 카드를 사용하면 사진, 동영상, 기타 미디어 등의 추가 콘텐츠가 즉시 트윗에 통합되어 상호작용이 향상됩니다.

Twitter 카드용 태그

Twitter:card는 상황에서 사용되는 카드의 종류를 결정합니다.

요약 - 요약 정보와 함께 사각형 이미지가 포함된 요약 카드를 제공합니다.

Large-Summary-Image: 사용된 이미지가 직사각형인 경우 사용자는 작은 요약 이미지 대신 큰 요약 이미지를 사용하려고 합니다.

twitter:description (og:description) 페이지나 기사에 대한 설명입니다.

twitter:site 비즈니스 또는 웹사이트와 연결된 Twitter 핸들 사용

트위터:크리에이터(선택사항). 콘텐츠 제작자의 트위터 핸들을 만들었습니다. 큰 이미지를 요약하기 위해 twitter:card가 정의된 경우에만 이 태그가 의미가 있습니다.

4096x4096~144x144 픽셀 크기의 정사각형 이미지(twitter:image 태그 사용)는 요약으로 설정된 Twitter:card에 사용할 수 있습니다.

또한 요약 대형 이미지 매개변수에는 4096x4096~300x157 픽셀 사이의 직사각형 이미지가 지원되며 이는 더 큰 이미지에 사용할 수 있습니다. JPG, WEBP, GIF, PNG 파일을 모두 지원하며 파일 크기는 5MB를 초과할 수 없습니다. 반면 트위터는 애니메이션 GIF를 지원하지 않습니다. 대신 첫 번째 프레임이 사용됩니다. 그러나 ETTVI의 Open Graph Checker 도구는 SEO 전문가가 필요에 따라 웹페이지에서 OG 태그를 식별하고 최적화하는 데 도움을 줍니다.

Facebook용 Shopify Open Graph 태그 설정

og:제목 및 og:이미지와 같은 OG 태그는 대부분 Shopify 테마의 제목 태그 및 추천 사진과 같은 변수에서 가져옵니다. og:image 태그만 Shopify UI를 통해 사용자 정의할 수 있습니다. 테마/ 사용자 정의/ 테마 설정/ 사용자 정의/ 소셜 미디어/ 드롭다운 메뉴에서 이미지를 선택합니다. 어떻게 완료되었는지 확인하려면 스크롤바에서 온라인 스토어 > 테마 > 작업 > 코드 편집 > 코드 조각 > 소셜 메타 태그 유동으로 이동하세요. 사용자가 코드를 변경해야 하는 경우 그렇게 할 수 있습니다.

Wix에서는 오픈 그래프 태그 추가를 허용합니다.

페이지의 메타 제목 및 설명 외에도 Wix는 다른 데이터를 사용하여 일반적인 OG 태그를 채웁니다.

"소셜 공유" 옵션에서 사용자는 각 페이지의 OG 설명, 제목 및 이미지를 변경할 수 있습니다. OG 사진은 전체 사이트에 맞게 사용자 정의할 수도 있습니다. 메인 메뉴에서 설정 > 소셜 공유를 선택하세요. Wix를 사용하면 하드코딩할 필요가 없기 때문에 OG 태그를 간단하게 추가할 수 있습니다.

WordPress 관리자 패널에서 그래프 태그 열기

Yoast의 SEO 플러그인은 웹사이트의 검색 엔진 순위를 높이는 데 도움이 될 수 있습니다. SEO 도구 상자는 게시물이나 페이지 편집기의 하단까지 표시되어야 합니다. '소셜' 드롭다운 메뉴에서 '페이스북'을 선택하세요.

og:description, og:title 및 og:image 태그를 설정하려면 여기에 정보를 입력하세요. og:url을 명시적으로 설정할 필요는 없습니다. Yoast가 이를 처리합니다. 이미지 크기도 도움이 될 수 있는 OG 태그 목록에 포함되어 있습니다. 사용자는 이를 몰랐을 수도 있지만 사용자가 게시물에 대한 추천 이미지를 갖고 있지 않은 경우 Yoast는 기본적으로 해당 이미지를 사용합니다. 시간을 절약하기 위해 사이트 이름, 이미지 크기 등과 같은 다른 Twitter 카드 및 OG 태그도 추가됩니다.

사이트 전체에 og:image 태그를 설정하는 것도 권장됩니다. 공유 URL에 사용자 정의 태그가 없으면 이 메시지가 표시됩니다. Yoast의 설정을 사용하면 이 옵션을 찾을 수 있습니다. Yoast > Facebook > 소셜 네트워크 스위치가 '활성화'로 설정되면 적절한 이미지를 제출하세요. 브랜드 이미지를 담기에 좋은 곳입니다.

게시물에 OG 태그가 없으면 어떻게 되나요?

기본적으로 대부분의 소셜 네트워크는 콘텐츠를 미리보기 위해 최선을 다합니다. 대부분의 경우 이는 계획대로 진행되지 않습니다. 제목과 설명에 내 페이지 이름이 나와 있어도 트윗이 특별히 눈길을 끌지는 않습니다. 단일 게시물의 미리보기와 비교하면 다른 이야기가 보입니다. 그렇다면 사용자가 자신의 웹사이트에서 오픈 그래프 태그를 사용하지 않으면 어떻게 될까요? 끔찍한 일이 발생하지는 않지만 온라인에 게시된 수많은 다른 콘텐츠와 콘텐츠를 구별하는 일부 특성을 사용할 수는 없습니다.