[실전 미디어 15] 이미지 SEO와 공유 카드

지난 편까지 미디어를 사이트 안에서 잘 저장하고 변환하고 정리하는 이야기를 했다. 이번 편은 그 미디어가 사이트 바깥에서 하는 일, 즉 검색 결과와 소셜 공유 카드에서 얼굴 역할을 하는 이야기다. 아무리 좋은 글이라도 검색과 공유의 첫인상은 대개 이미지가 결정했다. 대표 썸네일 하나, 공유 카드 이미지 하나가 클릭을 부르기도 하고 외면받게도 했다. 미디어 처리의 마지막 목적지는 결국 이 바깥에서의 노출이었다.

1. 미디어가 첫인상을 만든다

검색 결과나 소셜 타임라인에서 사람들은 글을 텍스트로만 만나지 않았다. 제목 옆이나 위에 딸린 작은 이미지가 먼저 눈에 들어왔고, 그 이미지가 클릭 여부를 크게 좌우했다. 같은 글이라도 대표 이미지가 있고 없고, 그 이미지가 선명하고 아니고에 따라 반응이 달랐다. 미디어는 사이트 안에서만 쓰이는 게 아니라 바깥에서 글을 대표하는 얼굴이었다.

이건 앞서 만든 대표 썸네일이 목록 안에서만 쓰이는 게 아니라는 뜻이기도 했다. 목록용으로 뽑은 그 첫 미디어 대표 이미지가, 검색 엔진에도 소셜 공유에도 그대로 재활용될 수 있었다. 한 번 잘 뽑아 둔 대표 이미지가 사이트 안팎에서 두루 쓰이는 자산이 된 것이다. 대표 이미지를 정성껏 만든 노력이 여기서 추가 보상을 받았다.

그래서 대표 이미지를 뽑는 규칙이 노출 품질과 직결됐다. 첫 미디어를 대표로 삼는다는 단순한 규칙이, 검색과 공유에서 그 글이 어떤 얼굴로 나갈지를 결정했다. 사용자가 원하는 이미지를 맨 앞에 두면 그게 얼굴이 된다는 걸 알면, 스스로 조절할 수도 있었다. 안에서의 규칙이 밖에서의 인상으로 이어지는 구조였다.

미디어가 없는 글은 이 얼굴을 못 가졌다. 텍스트만 있는 글은 검색이나 공유에서 이미지 없이 나가니 상대적으로 눈에 덜 띄었다. 그렇다고 억지로 아무 이미지나 붙이는 건 오히려 역효과였다. 대신 글의 성격에 맞는 기본 표현을 두거나, 미디어가 필요한 글은 사용자가 자연스럽게 넣도록 유도하는 편이 나았다. 얼굴은 진짜일 때만 값졌다.

2. 검색 결과 속의 대표 이미지

검색 엔진은 페이지를 이해할 때 대표 이미지를 함께 파악하려 했다. 페이지가 자기 대표 이미지가 무엇인지 명확히 알려주면, 검색 결과에 그 이미지가 함께 노출될 가능성이 높아졌다. 그래서 각 글 페이지가 자신의 대표 이미지를 분명히 선언하도록 했다. 검색 엔진이 헷갈리지 않게 얼굴을 명시하는 것이다.

여기서 대표 이미지의 주소가 안정적이어야 한다는 점이 중요했다. 검색 엔진이 한 번 파악한 이미지 주소가 자꾸 바뀌면 노출이 불안정해졌다. 그래서 대표 이미지는 일관된 규칙으로 주소가 정해지고, 함부로 바뀌지 않도록 관리했다. 안에서의 파일 관리 정합성이 밖에서의 검색 노출 안정성으로 연결되는 지점이었다.

이미지가 검색에 잘 걸리려면 접근도 열려 있어야 했다. 대표 이미지가 특정 조건에서만 열리거나 인증이 필요하면 검색 엔진이 못 가져갔다. 그래서 대표 이미지는 공개적으로 접근 가능하게 두고, 앞선 편들에서 다룬 변환과 캐시도 이 공개 접근 위에서 돌게 했다. 사람에게 보이는 것과 검색 엔진에 보이는 것이 같아야 했다.

대표 이미지의 품질도 노출 효과에 영향을 줬다. 흐릿하거나 엉뚱한 부분이 잘린 썸네일은 검색 결과에서 오히려 인상을 깎았다. 앞서 중앙 크롭과 적정 해상도로 썸네일을 만든 노력이, 검색 결과의 인상 관리로도 이어진 것이다. 안에서 잘 만든 이미지가 밖에서도 잘 보이는 건 당연했다. 품질은 위치를 가리지 않고 통했다.

3. 소셜 공유 카드라는 관문

소셜 미디어에 링크를 공유하면 제목과 설명, 그리고 큰 이미지가 담긴 카드가 자동으로 만들어졌다. 이 공유 카드는 타임라인에서 그 링크의 첫인상을 결정하는 관문이었다. 카드에 매력적인 이미지가 크게 걸리면 클릭을 부르고, 이미지가 없거나 깨지면 그냥 지나쳐졌다. 공유 카드의 이미지가 곧 확산의 핵심 변수였다.

공유 카드가 어떤 이미지를 쓸지는 페이지가 제공하는 정보로 정해졌다. 페이지가 자신의 공유용 대표 이미지를 명시해 주면, 소셜 플랫폼이 그걸 가져다 카드에 실었다. 그래서 각 글 페이지가 공유용 이미지를 분명히 제공하도록 했다. 이건 검색용 대표 이미지 선언과 같은 맥락이었고, 대개 같은 대표 이미지를 함께 썼다.

공유 카드에는 큰 이미지 형태와 작은 이미지 형태가 있었다. 나는 미디어가 있는 글은 큰 이미지 카드로 나가도록 했다. 작은 이미지 카드보다 큰 이미지 카드가 타임라인에서 훨씬 눈에 띄었기 때문이다. 이왕 대표 이미지를 제공하는 김에, 그 이미지를 최대한 크게 보여주는 형태를 택한 것이다. 같은 이미지라도 큰 카드가 더 강한 첫인상을 줬다.

다만 플랫폼마다 카드를 다루는 방식이 조금씩 달랐다. 어떤 플랫폼은 이미지의 크기 정보를 세심히 읽고, 어떤 플랫폼은 대략만 처리했다. 그래서 특정 플랫폼에 의존하는 대신, 어느 플랫폼에서든 무난하게 큰 카드로 나가도록 이미지를 미리 알맞은 형태로 준비해 두는 편이 안전했다. 플랫폼의 변덕에 휘둘리지 않으려는 대비였다.

4. 카드용 이미지의 규격

공유 카드용 이미지에는 나름의 규격이 있었다. 큰 카드가 기대하는 가로세로 비율이 있었고, 그 비율에 맞지 않으면 플랫폼이 제멋대로 잘라 엉뚱한 부분만 보이게 했다. 그래서 카드용 이미지는 그 비율에 맞춰 미리 준비하는 게 안전했다. 플랫폼이 자르게 두는 대신 내가 먼저 알맞게 잘라 넘기는 것이다.

미리 잘라 넘기는 것이 중요한 이유가 있었다. 플랫폼이 알아서 잘라주길 기대하면, 어떤 플랫폼은 세로를 자르고 어떤 플랫폼은 크기 정보를 무시해 결과가 제각각이었다. 반면 내가 카드 비율에 딱 맞는 이미지를 미리 만들어 제공하면, 플랫폼은 그대로 실으면 되니 결과가 일관됐다. 통제권을 플랫폼에서 내 쪽으로 가져오는 것이다.

이 카드용 이미지도 결국 앞선 변환 기능으로 만들었다. 원본이나 대표 썸네일을 카드 비율에 맞는 크기로 변환해 두는 것이다. 이미지 글은 그 대표 이미지를, 동영상 글은 뽑아 둔 프레임을, 각각 카드 규격으로 맞췄다. 미디어 종류가 달라도 카드로 나갈 때는 같은 규격으로 수렴시켰다. 안에서 쌓아 온 변환 능력이 여기서 다시 쓰였다.

텍스트만 있는 글의 카드도 고려했다. 이런 글은 대표 이미지가 없으니, 사이트를 나타내는 기본 카드 이미지를 대신 제공했다. 카드가 아예 비는 것보다는 사이트의 정체성을 담은 기본 이미지라도 있는 편이 나았다. 모든 글이 최소한의 얼굴은 갖도록 기본값을 마련해 둔 것이다. 빈 카드로 나가 인상을 잃는 일은 피했다.

5. 캐시와 갱신의 함정

공유 카드에는 까다로운 함정이 하나 있었다. 소셜 플랫폼은 한 번 가져간 카드 정보를 오래 캐시했다. 그래서 이미지를 나중에 고쳐도 플랫폼의 카드에는 옛 이미지가 계속 남았다. 안에서는 바꿨는데 공유 카드에는 반영이 안 되니, 이게 왜 안 바뀌냐고 한참 헤매기 좋았다. 캐시는 편의이자 함정이었다.

그래서 카드 이미지를 갱신할 때는 캐시를 우회할 방법이 필요했다. 이미지 주소에 버전을 나타내는 표시를 붙여, 이미지가 바뀌면 주소도 달라지게 하는 식이었다. 주소가 달라지면 플랫폼은 새 이미지로 인식해 다시 가져갔다. 또는 플랫폼이 제공하는 갱신 도구로 캐시를 강제로 새로고침하기도 했다. 캐시를 이해하고 다뤄야 갱신이 반영됐다.

이 캐시 문제는 안정성과 갱신 사이의 트레이드오프를 보여줬다. 앞서 검색을 위해 이미지 주소를 안정적으로 유지하라고 했는데, 갱신을 위해서는 주소를 바꿔야 했다. 그래서 평소에는 주소를 안정적으로 두되, 실제로 이미지를 교체할 때만 의도적으로 버전을 올리는 균형이 필요했다. 안정과 변경을 상황에 따라 구분해 다룬 것이다.

정리하면 미디어의 바깥 노출은 안에서의 관리와 촘촘히 얽혀 있었다. 대표 이미지를 잘 뽑고, 주소를 안정적으로 관리하고, 카드 규격에 맞게 미리 준비하고, 캐시를 이해해 갱신하는 모든 일이 안팎으로 연결됐다. 안에서 정합성을 지킨 미디어가 밖에서도 신뢰할 만한 얼굴이 됐다. 마지막 편에서는 이 모든 것을 관통하는 정합성, 즉 글이 만들어지고 수정되고 삭제되는 전 과정에서 미디어를 어긋나지 않게 유지하는 이야기로 시리즈를 맺는다.