[웹 퍼블리싱 12] HTML - 오픈그래프와 SNS 공유 태그 - TheNullPage(널페이지)

지난 편에서 문서의 머리에 들어가는 기본 메타 정보를 익혔습니다. 이번에는 그 연장선에서, 문서가 소셜에 공유될 때 어떻게 보일지를 결정하는 공유 태그를 다룹니다. 누군가 우리 페이지의 주소를 소셜에 붙여 넣으면, 밋밋한 주소 대신 제목과 요약, 그리고 큰 이미지가 담긴 카드가 뜹니다. 이 카드가 어떻게 만들어지는지, 우리가 어떻게 통제하는지가 이번 편의 주제입니다.

제가 이 카드의 존재를 처음 의식한 것은, 정성껏 만든 페이지를 소셜에 공유했는데 아무 이미지도 없이 주소만 덩그러니 뜨는 것을 보았을 때였습니다. 옆 사람이 공유한 링크는 멋진 카드로 뜨는데 제 것만 초라했죠. 알고 보니 그 카드를 만드는 전용 태그가 있었고, 제 페이지에는 그것이 없었던 것입니다. 이번 편에서 그 태그를 제대로 다뤄 보겠습니다.

1. 공유 카드는 어떻게 만들어지나

소셜에 주소를 붙여 넣으면 그 서비스는 해당 페이지를 방문해, 페이지 머리에 담긴 공유용 정보를 읽습니다. 제목은 무엇이고, 요약은 무엇이며, 대표 이미지는 어떤 것인지를 이 정보에서 가져와 카드를 조립합니다. 그러니까 카드의 모양은 우리가 페이지에 심어 둔 정보에 따라 결정됩니다. 우리가 통제할 수 있는 것이죠.

이 공유용 정보를 담는 표준화된 방식이 있습니다. 여러 소셜 서비스가 공통으로 이해하는 이 방식을 따르면, 한 번 정보를 심어 두는 것으로 여러 서비스에서 카드가 제대로 뜹니다. 서비스마다 제각각 다른 방식을 요구했다면 무척 번거로웠을 텐데, 다행히 공통 표준이 자리 잡았습니다.

이 정보가 없으면 소셜 서비스는 페이지에서 아무 정보나 긁어와 카드를 대충 만들거나, 아예 카드 없이 주소만 보여 줍니다. 그러면 우리 페이지가 초라하게 노출되어 클릭을 부르지 못합니다. 반대로 정보를 잘 심어 두면, 매력적인 카드가 떠서 훨씬 많은 사람이 관심을 갖고 눌러 봅니다.

이 정보들은 화면에 보이지 않고 문서의 머리에만 존재합니다. 사용자가 페이지를 직접 볼 때는 아무 영향이 없고, 오직 공유될 때만 작동합니다. 그래서 이 정보를 심어도 페이지의 겉모습은 전혀 바뀌지 않습니다. 순전히 공유 상황을 위한 숨은 준비인 셈입니다.

제가 이 카드 정보를 심고 나서 공유 반응이 눈에 띄게 좋아졌습니다. 같은 페이지라도 초라한 주소보다 잘 만든 카드로 공유될 때 사람들의 클릭이 훨씬 많았습니다. 콘텐츠 자체는 그대로인데 포장만 바꿨을 뿐인데도 결과가 달라진 것이죠. 공유가 중요한 페이지라면 이 정보는 선택이 아니라 필수입니다.

정리하면 소셜 카드는 우리가 페이지 머리에 심어 둔 공유용 정보로 조립됩니다. 이 정보를 표준 방식으로 심어 두면 여러 서비스에서 일관된 카드가 뜹니다. 이제 그 정보가 구체적으로 무엇들인지 살펴보겠습니다.

2. 반드시 넣어야 할 정보들

공유 카드를 위해 갖춰야 할 핵심 정보는 몇 가지로 정해져 있습니다. 첫째는 제목입니다. 카드 상단에 굵게 뜨는 이 제목은 사용자의 시선을 가장 먼저 붙잡습니다. 페이지의 일반 제목과 같아도 되지만, 공유 상황에 더 어울리게 다르게 다듬을 수도 있습니다.

둘째는 요약입니다. 제목 아래에 뜨는 이 짧은 설명은 사용자에게 이 페이지가 무엇을 담고 있는지 알려 줍니다. 카드에서 보이는 요약은 길지 않으므로, 핵심을 앞쪽에 두고 간결하게 쓰는 것이 좋습니다. 요약이 매력적이면 클릭으로 이어집니다.

셋째는 대표 이미지입니다. 카드에서 가장 큰 면적을 차지하며 시선을 사로잡는 것이 이 이미지입니다. 카드의 인상을 좌우하는 만큼, 페이지 내용을 잘 대표하면서도 작게 줄여도 알아볼 수 있는 이미지를 고르는 것이 중요합니다. 글씨가 잔뜩 든 이미지는 작아지면 읽히지 않으니 피하는 것이 좋습니다.

넷째는 이 페이지의 대표 주소입니다. 카드가 어느 주소로 연결될지를 명시하는 것으로, 공유된 카드를 누르면 이 주소로 이동합니다. 다섯째는 이 콘텐츠의 종류입니다. 일반 글인지, 웹사이트인지, 영상인지 같은 종류를 밝히면 서비스가 그에 맞게 카드를 다룹니다.

이 다섯 가지를 갖추면 대부분의 서비스에서 온전한 카드가 뜹니다. 저는 새 페이지를 공유 가능하게 만들 때 이 다섯 가지를 점검표처럼 확인합니다. 하나라도 빠지면 카드가 불완전하게 뜨거나 서비스가 엉뚱한 정보로 빈자리를 메우기 때문입니다.

아래는 핵심 공유 정보를 담은 예시입니다. 제목, 요약, 이미지, 주소, 종류가 어떻게 들어가는지 보세요.

3. 이미지 규격 맞추기

공유 카드에서 가장 신경 써야 할 것이 이미지 규격입니다. 대다수 서비스가 가장 안정적으로 표시하는 크기가 정해져 있습니다. 가로가 세로보다 조금 긴 직사각형 비율인데, 이 규격에 맞추면 잘림 없이 온전한 큰 카드로 표시됩니다. 규격에서 벗어난 이미지는 서비스가 제멋대로 잘라 버려 중요한 부분이 사라지기도 합니다.

이미지의 무게도 고려해야 합니다. 너무 큰 파일은 서비스가 읽기를 포기하거나 표시가 느려집니다. 그래서 적당히 압축해 무게를 줄이되 화질은 유지하는 균형이 필요합니다. 저는 공유 이미지를 만들 때 규격에 맞춘 크기로 잘라 두고, 무게가 과하지 않도록 압축을 함께 챙깁니다.

이미지 주소는 온전한 전체 주소로 지정해야 합니다. 페이지 안에서는 짧은 상대 주소로 이미지를 부를 수 있지만, 외부 서비스가 이미지를 가져갈 때는 어디에 있는지 정확한 전체 주소가 필요합니다. 상대 주소로 두면 서비스가 이미지를 찾지 못해 카드에 이미지가 빠집니다. 저는 이 실수를 몇 번 겪은 뒤로 항상 전체 주소를 씁니다.

안전한 연결을 쓰는 주소인지도 확인해야 합니다. 요즘 서비스들은 안전하지 않은 연결의 이미지를 거부하는 경우가 많습니다. 그래서 이미지 주소는 안전한 연결 방식으로 제공하는 것이 안전합니다. 이것이 지켜지지 않으면 이미지가 뜨지 않는 원인이 됩니다.

이미지를 고를 때 저는 작게 축소된 상태를 항상 상상합니다. 카드 속 이미지는 실제로 꽤 작게 표시되므로, 원본에서 멀쩡해 보여도 축소되면 알아볼 수 없는 경우가 많습니다. 그래서 세밀한 글씨나 복잡한 그림보다는, 축소해도 한눈에 알아볼 수 있는 단순하고 강렬한 이미지가 카드에 어울립니다.

아래는 이미지 규격을 함께 명시한 예시입니다. 크기 정보까지 알려 주면 서비스가 더 정확히 처리합니다.

4. 서비스별 세부 대응

대다수 서비스는 공통 표준을 따르지만, 일부 서비스는 자기만의 추가 정보를 함께 읽습니다. 그래서 특정 서비스에서 카드를 더 잘 보이게 하려면 그 서비스 전용 정보를 추가로 심을 수 있습니다. 다만 전용 정보가 없어도 대개 공통 표준의 정보를 대신 읽으니, 기본만 잘 갖춰도 큰 문제는 없습니다.

어떤 서비스는 카드의 크기를 큰 것과 작은 것 중에서 고를 수 있게 합니다. 큰 카드는 이미지가 넓게 펼쳐져 시선을 강하게 끌고, 작은 카드는 이미지가 한쪽에 작게 붙습니다. 이미지가 중요한 콘텐츠라면 큰 카드를 지정해 이미지를 부각하는 편이 효과적입니다. 저는 대체로 큰 카드를 선호합니다.

전용 정보를 심을 때 흔한 실수는, 공통 표준 정보와 전용 정보가 서로 어긋나게 두는 것입니다. 제목이나 이미지가 두 곳에서 다르면 서비스에 따라 다른 카드가 떠서 일관성이 깨집니다. 그래서 전용 정보를 추가하더라도 공통 정보와 내용을 일치시키는 것이 좋습니다.

모든 서비스에 대해 전용 정보를 일일이 갖추려 할 필요는 없습니다. 우리 사용자가 실제로 많이 쓰는 서비스 위주로 챙기고, 나머지는 공통 표준에 맡기는 것이 현실적입니다. 지나치게 많은 전용 정보는 관리 부담만 키우고 얻는 것은 적을 때가 많습니다.

제가 실무에서 정착한 방식은, 공통 표준 정보를 탄탄히 갖추고 주요 서비스 한둘에 대해서만 카드 크기 정도를 추가로 지정하는 것입니다. 이 정도면 대부분의 공유 상황에서 만족스러운 카드가 떴습니다. 완벽을 좇아 모든 서비스를 대응하기보다, 핵심을 확실히 하는 편이 효율적이었습니다.

아래는 특정 서비스용으로 카드 크기를 지정한 예시입니다. 큰 카드로 지정한 것을 보세요.

5. 공유 카드 검증하기

공유 태그를 심었다고 끝이 아닙니다. 반드시 실제로 카드가 잘 뜨는지 확인해야 합니다. 여러 소셜 서비스는 공유 카드가 어떻게 보일지 미리 확인할 수 있는 검사 도구를 제공합니다. 페이지 주소를 이 도구에 넣으면, 서비스가 실제로 읽어 들이는 정보와 조립될 카드의 모양을 미리 보여 줍니다. 배포 전에 이 확인을 거치는 것이 안전합니다.

검사 도구를 쓰면 흔한 문제들을 미리 잡을 수 있습니다. 이미지 주소가 잘못되어 이미지가 빠지거나, 요약이 엉뚱하게 잡히거나, 제목이 예상과 다른 경우가 이 단계에서 드러납니다. 저는 공유가 중요한 페이지를 낼 때 반드시 이 검사를 거쳐, 실제 공유에서 카드가 초라하게 뜨는 사고를 예방합니다.

여기서 알아 둘 것이 서비스의 저장 문제입니다. 소셜 서비스는 한번 읽은 페이지의 카드 정보를 일정 기간 저장해 두고 재사용합니다. 그래서 카드 정보를 고친 뒤에도 예전 카드가 계속 뜨는 일이 생깁니다. 이럴 때는 검사 도구로 강제로 다시 읽게 하거나, 서비스가 저장을 갱신할 때까지 기다려야 합니다.

이 저장 문제 때문에 저는 카드 정보를 처음부터 제대로 갖추려 애씁니다. 일단 잘못된 카드가 한번 저장되면 그것을 바로잡기가 번거롭기 때문입니다. 특히 많은 사람에게 공유될 페이지라면, 첫 공개 전에 카드를 완벽히 확인해 두는 것이 나중의 수고를 크게 덜어 줍니다.

제가 겪은 사례로, 중요한 페이지를 공유했는데 예전에 저장된 잘못된 카드가 계속 떠서 곤란했던 적이 있습니다. 미리 검사 도구로 확인만 했어도 피할 수 있는 일이었습니다. 그 뒤로 저는 공유 태그를 심으면 반드시 검사 도구로 실제 결과를 눈으로 확인하는 습관을 들였습니다.

이번 편에서는 소셜 공유 카드가 만들어지는 원리, 넣어야 할 핵심 정보, 이미지 규격, 서비스별 대응, 그리고 검증까지 살펴봤습니다. 다음 편에서는 시맨틱 구조와 검색 최적화의 관계로 넘어가겠습니다. 문서가 소셜에서 잘 보이게 하는 법을 익혔으니, 이제 검색엔진에게 잘 읽히게 하는 법을 배울 차례입니다.