오픈 그래프 태그 전체 가이드 - og:제목, 이미지 및 트위터 카드(2026)

누군가가 귀하의 URL을 Facebook, LinkedIn, Slack, Discord 또는 iMessage에 붙여넣으면 해당 앱은 보이는 페이지에서 추측하지 않습니다. HTML 헤드에서 제목, 설명, 이미지, 유형, 표준 URL 등 오픈 그래프 태그를 찾습니다. 올바르게 설정하면 공유 카드가 디자인된 미리보기처럼 보입니다. 건너뛰면 임의의 이미지가 나타나거나 제목이 잘리거나 카드가 전혀 표시되지 않습니다. 이 가이드에서는 프로토콜, 중요한 태그, HTML 제목 및 메타 설명과의 차이점, 미리보기를 방해하는 실수에 대해 안내합니다. 붙여넣을 수 있는 마크업을 원할 경우 오픈 그래프 태그 생성기를 사용하세요. 이 생성기는 브라우저에서 실행되며 필드를 업로드하지 않습니다.

오픈 그래프 태그란?

오픈 그래프는 메타 태그의 작은 어휘입니다. 각 태그는 문서 헤드의 이름/값 쌍입니다. 이름은 og: 접두사를 사용합니다. 소셜 앱의 크롤러는 공개 URL을 가져와 해당 태그를 읽고 상단 또는 측면의 이미지, 제목, 설명 및 사이트 이름과 같은 카드를 만듭니다. 프로토콜은 Facebook에서 시작되었습니다. 이제 이는 대부분의 웹에서 기본 공유 형식입니다.

• Facebook 및 Instagram 링크 미리 보기는 og:*를 먼저 읽습니다.
• LinkedIn, Slack, Discord, Telegram 및 iMessage는 동일한 태그를 재사용합니다.
• X(Twitter)는 Open Graph로 대체될 수 있지만 twitter:* 태그는 둘 다 존재할 때 승리합니다.
• 검색 엔진은 여전히 ​​SERP에 HTML 제목과 메타 설명을 사용합니다. OG는 공유용이지 Google의 파란색 링크용이 아닙니다.

태그는 메타 속성="og:title" content="공유 제목"과 같습니다. 속성 이름이 핵심입니다. 콘텐츠 속성은 값입니다. HTML이 유효한 상태로 유지되도록 값의 특수 문자를 이스케이프해야 합니다. 발전기가 탈출을 처리합니다.

모든 페이지에 필요한 4개의 태그

Facebook의 기본 개체에는 네 가지 속성이 필요합니다. 그 중 하나라도 없거나 비어 있으면 많은 크롤러가 대체 방법을 고안하거나 손상된 카드를 표시합니다.

• og:title - 카드의 제목입니다. 짧고 구체적으로 작성하세요. Google에서 원하는 HTML 제목과 다를 수 있습니다.
• og:type - 이것이 어떤 종류의 객체인지. 웹사이트는 홈페이지 또는 랜딩 페이지의 기본값입니다. 기사가 블로그 게시물에 적합합니다.
• og:image - 미리보기 이미지에 대한 절대 https URL입니다. 크롤러에 이를 해결할 페이지 컨텍스트가 없기 때문에 상대 경로(/images/og.png)가 실패합니다.
• og:url - 이 개체의 표준 URL입니다. https 및 기본 호스트(www 또는 apex)를 포함하여 사람들이 공유하는 공개 URL과 일치해야 합니다.

그 4개가 최소입니다. 제목만 있고 이미지가 없는 카드는 미완성처럼 보입니다. 이미지는 있지만 제목이 모호한 카드는 클릭을 낭비합니다.

추천 추가사항

• og:description - 제목 아래에 한두 개의 문장이 있습니다. 70~200자 정도를 목표로 하세요. 이는 귀하가 원하지 않는 한 메타 설명과 동일한 문자열이 아닙니다.
• og:site_name - 귀하의 브랜드. LinkedIn과 Slack은 종종 제목 아래에 표시하므로 출처가 분명합니다.
• og:locale - en_US, es_ES 또는 pt_BR과 같이 밑줄 형식의 언어 및 지역입니다. 페이지가 영어가 아닐 때 사용하세요.

나중에 더 풍부한 유형별 필드(기사:저자, 제품:가격:금액)를 추가할 수 있습니다. 코어 세트부터 시작하세요. 완전한 기본 개체가 반만 채워진 제품 개체보다 좋습니다.

og:실제로 사용할 값을 입력하세요.

유형은 크롤러에게 URL 처리 방법을 알려줍니다. 잘못된 유형으로 인해 카드가 손상되는 경우는 거의 없지만 의미가 있는 추가 필드와 일부 앱이 개체를 그룹화하는 방식이 변경됩니다.

• 웹사이트 - 홈페이지, 카테고리 색인, 일반 방문 페이지.
• 기사 - 블로그 게시물, 뉴스 및 방법 가이드. 날짜가 적힌 URL과 고유한 이미지를 결합하세요.
• 제품 - 단일 제품 또는 가격 페이지입니다. 명확한 제목과 영웅 사진을 추가하세요.
• 프로필 - 사람 또는 작성자 페이지입니다.

확실하지 않은 경우 웹사이트는 안전합니다. 사용자 정의 유형을 만들지 마십시오. 크롤러는 모르는 이름을 무시합니다.

og:이미지 규칙

이미지는 사람들이 가장 먼저 보는 것입니다. 약하거나 누락된 이미지는 주식이 저렴해 보이는 가장 일반적인 이유입니다.

• 가로 카드에는 1200 x 630픽셀을 사용합니다. 이 비율(약 1.91:1)은 Facebook과 LinkedIn이 기대하는 것입니다.
• 크롤러가 작은 썸네일로 돌아가지 않도록 600 x 315 이상을 유지하세요.
• URL은 절대 URL이어야 하며 https여야 합니다. 공개 CDN 또는 자체 원본에서 파일을 호스팅합니다. 로그인 벽과 robots.txt 블록은 크롤러로부터 이미지를 숨깁니다.
• 파일을 적당히 작게 유지하십시오(8MB 미만). PNG나 JPEG는 괜찮습니다. WebP를 가져오기 위해 여전히 오래된 Facebook 캐시가 필요한 경우 WebP를 사용하지 마세요.
• 주제를 중앙에 두세요. 일부 앱은 모바일에서 측면을 자릅니다.

트위터 카드와 오픈 그래프

X는 og:제목, og:설명, og:이미지를 읽을 수 있습니다. 또한 자체 twitter:* 태그도 있습니다. 둘 다 존재하는 경우 twitter:*는 X에서 승리하고 og:*는 여전히 다른 모든 곳에서 승리합니다. 이것이 바로 대부분의 페이지가 두 가지를 모두 내보내는 이유입니다.

• twitter:card - 넓은 이미지가 있는 경우 summary_large_image, 그렇지 않은 경우 요약입니다.
• twitter:title, twitter:description, twitter:image - 일반적으로 일치하는 og:* 태그와 동일한 값입니다.
• 기본 대형 이미지 카드에는 Twitter 사이트 핸들이 필요하지 않습니다.

Open Graph만 게시하는 경우 X에서는 여전히 카드를 표시하는 경우가 많습니다. Twitter 태그만 게시하면 Facebook과 LinkedIn은 게시하지 않습니다. 오픈그래프는 공유기반입니다. Twitter 태그는 X의 추가 레이어입니다.

OG vs HTML 제목 vs 메타 설명

세 개의 끈, 세 개의 직업. 이들을 혼합하는 것은 훌륭한 SERP 스니펫과 약한 Slack 카드를 얻는 방법입니다. 또는 그 반대입니다.

• HTML 제목 - 검색 결과 제목 및 브라우저 탭입니다. 여기에 거래 또는 정보 쿼리를 대상으로 합니다.
• 메타 설명 - 해당 제목 아래의 SERP 조각입니다. Google이 이를 다시 작성할 수도 있습니다.
• og:title 및 og:description - 소셜 카드입니다. 키워드용이 아닌 이미 링크를 가지고 있는 사람을 위해 작성하세요.

도구 페이지는 트랜잭션 HTML 제목(무료 오픈 그래프 태그 생성기)과 보다 명확한 og:title(이 기사에 대한 오픈 그래프 태그 생성)을 유지할 수 있습니다. 블로그 게시물은 그 반대의 일을 할 수 있습니다. 즉, 키워드 중심의 HTML 제목과 좀 더 인간적인 og:title을 사용할 수 있습니다. Meta Description Checker를 사용하여 SERP 스니펫을 확인하세요. OG 태그가 있는 공유 카드를 확인하세요.

실제 사례

Open Graph 자체에 대한 블로그 게시물에서는 이러한 값을 사용할 수 있습니다. 공개 URL의 헤드에 붙여넣으면 크롤러가 완전한 개체를 보게 됩니다.

• og:title - 오픈 그래프 태그 설명
• og:description - og:title, og:image, og:url 및 og:type의 기능과 Twitter 카드 및 이미지 크기입니다.
• og:유형 - 기사
• og:url - https://www.toolsminify.com/blog/open-graph-tags-complete-guide
• og:image - https의 1200 x 630 PNG 또는 JPEG
• og:site_name - 도구Minify
• og:로케일 - en_US
• twitter:card - summary_large_image, 동일한 제목, 설명 및 이미지 포함

제목의 따옴표와 앰퍼샌드는 콘텐츠 속성 내에서 " 및 &여야 합니다. 태그를 직접 작성했는데 페이지 구문 분석에 실패하는 경우 이스케이프 처리를 가장 먼저 살펴봐야 합니다.

일반적인 실수

• 상대 og:image 또는 og:url. 둘 다 절대적이어야 합니다.
• og:url은 공유 링크와 일치하지 않습니다(http 대 https, apex 대 www, 로케일 접두어 누락).
• 200 x 200 미만의 이미지 또는 LinkedIn에서 레터박스로 변환하는 1:1 자르기.
• 헤드 대신 본문에 태그를 지정합니다. 크롤러는 머리를 봅니다.
• robots.txt의 이미지나 페이지를 차단합니다. 소셜 크롤러는 여전히 이를 가져와야 합니다.
• 오래된 Facebook 캐시. 태그를 변경한 후 Facebook의 공유 디버거에서 URL을 다시 스크랩하세요. 다른 앱에는 자체 캐시가 있습니다.
• 충돌하는 og:title 태그가 중복됩니다. 일반적으로 첫 번째가 이기고 어떤 것이 마음에 들지 않을 것입니다.
• 비밀이나 게시되지 않은 초안 사본을 og:description에 넣습니다. 태그는 URL이 있는 순간 공개됩니다.

자주 묻는 질문

Open Graph 태그는 Google 순위 요소인가요?

직접적으로는 아닙니다. Google은 검색을 위해 HTML 제목, 메타 설명 및 페이지 콘텐츠를 사용합니다. OG 태그는 사람들이 깨끗한 카드로 페이지를 공유하는 데 도움이 됩니다. 더 나은 공유는 링크와 방문을 가져올 수 있습니다. 이는 순위 전환이 아닌 간접적인 효과입니다.

어떤 오픈 그래프 태그가 필요합니까?

og:title, og:type, og:image, og:url로 시작하세요. og:description, og:site_name 및 og:locale이 있으면 추가하세요. 빈 태그는 생략된 태그보다 더 나쁩니다.

og:image의 크기는 어느 정도여야 하나요?

1200 x 630 픽셀이 일반적인 가로 크기입니다. 600 x 315 이상을 유지하세요. 절대 https URL을 사용하세요. 모바일 자르기로 인해 이미지의 텍스트가 잘리지 않도록 피사체를 중앙에 배치합니다.

이미 오픈 그래프가 있는 경우 Twitter 카드 태그가 필요합니까?

X는 OG 태그를 읽을 수 있지만 twitter:card와 일치하는 제목, 설명 및 이미지를 사용하면 해당 네트워크에 대한 명시적인 제어가 가능합니다. Facebook과 LinkedIn은 twitter:*를 무시하지만 여전히 og:*가 필요합니다. 가능하면 둘 다 방출하십시오.

Facebook에 여전히 이전 이미지가 표시되는 이유는 무엇인가요?

Facebook은 첫 번째 스크랩을 캐시합니다. 이미지 URL을 변경하거나 기다린 다음 Facebook의 공유 디버거를 통해 URL을 실행하고 새 스크랩을 요청하세요. LinkedIn과 Slack에는 유사한 캐시가 있습니다. 동일한 URL에서 파일 바이트만 변경하면 아무 일도 일어나지 않는 경우가 많습니다.

HTML을 어디에 넣나요?

공개 HTML 문서의 헤드 내부 또는 프레임워크의 메타데이터 API에서 헤드에서 렌더링됩니다. 태그는 og:url로 설정한 정확한 URL에 표시되어야 합니다. 빌더에 대한 클릭별 안내는 오픈 그래프 태그 생성기 사용 방법을 참조하세요.

브라우저에서 태그 작성

제목, 설명, URL, 이미지를 입력한 후 라이브 HTML을 복사하세요. 아무것도 업로드되지 않았습니다:

• 오픈 그래프 태그 생성기 - 소셜 미리보기가 포함된 og:* 및 선택적인 Twitter 카드 태그를 구축하세요.
• 오픈 그래프 태그 생성기를 사용하는 방법 - 동일한 도구에 대한 단계별 가이드.
• 메타 설명 검사기 및 SERP 미리보기 - 공유 카드가 아닌 검색 스니펫을 확인하세요.
• 슬러그 생성기 - 공유할 페이지의 URL 슬러그를 정리하세요.
• 모든 SEO 도구 - 전체 카테고리 색인.