안녕하세요 셀러 여러분,

브랜드의 검색 결과 순위를 높여 인지도와 트래픽을 늘리기 위한 SEO를 HTML로 전략적으로 구현하는 여정, 2번째 편입니다.

이전 편에서 SEO에 영향을 끼치는 웹 사이트 구성 태그, 부가 정보를 띄는 메타 태그에 대해 다루어 보았습니다.

 👉참고하면 좋은 글:  태그로 구현하는 똑똑한 SEO – 기본, 메타 태그편

검색 엔진이 쉽게 수집 및 정리를 할 수 있도록 ‘HTML 태그’를 통해 웹 페이지를 구조화하고, 정보를 명시해 둔다고 했었죠.

앞서 브랜드 웹 페이지 내부에서 검색 엔진에 영향을 끼치는 태그를 다루었다면, 이번 쇼픽에서는 웹 페이지의 링크를 외부(SNS)로 공유할 때 적용되는 공유 태그에 대해 소개하려고 합니다.

SNS 공유가 SEO와 무슨 관계가 있나요?

공유 태그를 소개하기에 앞서 왜 이를 적용해야 하는지를 짚고 넘어가겠습니다.

결론부터 말씀드리자면 SNS 공유는 사실 SEO에 직접적인 영향을 미치지 않습니다. 하지만 간접적인 영향을 줄 수 있고, SEO와 유사한 역할을 수행할 수도 있습니다.

SEO를 다루는 편에서 무슨 엉뚱한 소리냐고요? 하나씩 풀어보도록 하죠.

① SEO에 간접적인 영향

검색 엔진은 인터넷에 존재하는 모든 웹 페이지를 수집합니다. 웹 페이지에서 콘텐츠와 함께 페이지 내부의 모든 링크들을 훑습니다. 이 링크는 브랜드 웹 사이트 내부의 또 다른 페이지일 수도 있고, 외부 웹 사이트의 페이지를 가리킬 수도 있습니다.

SNS에는 텍스트, 사진, 동영상 같은 직접 콘텐츠 외에 링크와 같은 간접 콘텐츠도 게시할 수 있습니다. 검색 엔진은 ‘외부 웹 페이지’ 인 SNS 게시글에 게재된 링크 또한 고려할 것입니다.

이는 사실 SEO가 뭐에요? 편에서 언급한 자사 웹 사이트 외부에서 진행하는 오프 페이지 SEO, 그 중에서도 백 링크와 관련이 있습니다. 외부 웹 페이지에서 자사 웹 페이지로의 링크가 많을수록 이는 ‘평판’으로 이어집니다. 검색 엔진에서는 이런 웹 페이지의 권위를 높게 평가하죠.

② SEO와 유사한 역할

현재 전세계 인구 중 60.99%가 SNS를 사용한다고 합니다.

(출처: https://backlinko.com/social-media-users)

그리고 GlobalWebIndex 사에 따르면 SNS의 유저의 주요 SNS 사용 용도에 대한 리서치 결과는 다음과 같습니다.

<출처: https://www.smartinsights.com/social-media-marketing/social-media-strategy/new-global-social-media-research/>

이에 따르면 대체로 SNS 사용 용도는 주변인과의 연락, 사진 및 영상 공유, 재미있는 콘텐츠 발견, 그리고 최신 뉴스를 얻기 위함입니다. SNS 이용자들은 서로 정보를 공유하고 얻는 용도로 쓴다는 것입니다.

이토록 엄청난 규모의 SNS 이용자들 상대로 브랜드 웹 페이지와 정보를 담은 링크가 공유되어 노출된다면 그를 통한 자사 웹사이트로의 트래픽도 기대할 수 있을 것입니다. 마치 검색 엔진의 검색 결과 페이지에서 노출도를 높이는 것처럼요.

오픈 그래프가 정확히 무엇인가요?

앞서 SNS 공유와 SEO의 관계에 대해 알아 보았습니다.

결국 제대로 실현하기 위해서는 더 많은 SNS 이용자들이 브랜드 웹 페이지의 링크를 공유하고, 클릭을 유도하게 해야 합니다. 궁극적인 솔루션으로는 웹 페이지에 고품질의 콘텐츠를 제작하여 업로드하는 것이겠지만, 링크가 표시되는 방식에 변화를 주는 방법이 있겠습니다. 그리고 이것이 바로 이번 쇼픽에서 다룰 오픈 그래프 프로토콜, 바로 og 태그입니다.

링크를 올린다고 하면 우리는 보통 아래와 같은 방식을 떠올립니다.

이동할 url과 이 링크를 표현할 텍스트, 이 두 개만 있으면 링크로서 작동할 수 있습니다.

<출처: SEO가 뭐예요? 검색 엔진 최적화 파헤치기 (shopigate.co.kr)>

하지만 오픈 그래프 메타 태그를 이용하면 다음과 같이 특정 정보가 보여질 수 있는 형태로 링크를 게재할 수 있습니다.

Og 태그가 설정된 웹 페이지를 페이스북에 공유하기로 가져왔을 때 게시글의 형태입니다. 이미지와 타이틀과 설명이 함께 보여져, 링크가 무슨 콘텐츠를 담고 있는지 좀 더 명확하게 알 수 있게 되었습니다.

이에서 알 수 있듯이 오픈 그래프는 공유할 페이지에 대한 콘텐츠 정보를 게시글에 나타내기 위한 조각(스니펫)과 같은 것입니다. 페이스북에서 처음 도입하였지만 현재는 링크드인, 트위터 등 다른 SNS로도 확장되었습니다.

오픈 그래프를 설정하면 브랜드가 원하는 특정 정보를 링크에 함께 표시할 수 있습니다. 링크에 대한 제어도를 높이면서 명확하고 풍부한 정보 제공으로 클릭률 또한 높일 수 있지요.

오픈 그래프 태그에는 어떤 것들을 담을 수 있나요?

오픈 그래프 태그는 전편에서도 다루었던 메타 태그의 property 속성을 이용해서 표현합니다. 페이스북, 링크드인, 왓츠앱 등 SNS에서의 og 태그와 트위터 전용의 og 태그가 따로 존재합니다.

1. 기본 og 태그

- og:title: 공유할 웹 페이지의 제목입니다. 일반적으로 웹페이지의 <title> 태그와 동일하며 다른 내용을 넣을 수도 있습니다. 60자~90자 사이가 적당하며 100자를 초과할 경우 88자로 자동으로 자르게 됩니다.

- og:description: 공유할 웹 페이지에 대한 간략한 설명을 나타냅니다. 약 200자 이내로 작성하는 것이 권장됩니다.

- og:type: 공유할 웹 페이지 콘텐츠에 대한 유형입니다. 지정하지 않는다면 기본 유형은 ‘websites’입니다. articles, websites, books, movies, actor, politicians 등의 유형이 있으며 이 부분은 해당 SNS 플랫폼 내에서 보여줄 콘텐츠에 대한 분류 시에 유용합니다.

예를 들어, 공유할 웹 페이지가 article일 경우 다음과 같이 추가 정보를 표기할 수 있습니다.

자세한 유형별 분류법은 The Open Graph protocol (ogp.me)에서 확인할 수 있습니다.

- og:image: 공유할 웹 페이지를 대표하는 이미지입니다. SNS 피드에서 가장 시선을 끄는 부분이므로, 단순한 썸네일처럼 보이지 않도록 고해상도의 이미지를 포함하는 것이 좋습니다. 최대 5MB 크기까지 가능하며 1200 x 630 px 정도의 이미지가 적당합니다.

또한 og:image 태그 밑에 아래와 같이 추가 정보를 지정하는 것도 가능합니다.

- og:url: 공유할 웹 페이지의 URL을 넣는 곳입니다.

- og:locale: 지역과 언어권을 설정하기 위한 태그입니다. 지정하지 않을 시 미국과 영어로 지정됩니다.

- og:site_name: 공유할 웹 페이지가 더 큰 영역의 세부 영역이라면 전반적인 사이트의 이름을 설정할 수 있습니다.

- og:audio: 공유할 웹 페이지의 콘텐츠와 함께 지원되는 오디오 파일에 대한 url을 제공합니다.

- og:video: 공유할 웹 페이지의 콘텐츠와 함께 지원되는 비디오가 있다면 비디오 파일을 설정할 수 있습니다.

2. 트위터 전용 공유 태그

기본적으로 트위터는 140자의 텍스트만 게시할 수 있지만 ‘card’라는 기능을 통해 이를 확장하여 추가적인 정보를 보여줍니다.

- twitter:card: 속성 값으로는 summary, photo, player 중 선택할 수 있으며 이 속성 값에 따라 사용할 수 있는 구체적인 정보는 조금 다릅니다. 아래는 공통적인 태그들만 우선 모아보았습니다.

- twitter:url: 해당 트위터로 구현한 카드의 url입니다. 즉 공유할 웹 페이지를 가리킬 링크이겠죠.

- twitter:title: 카드에 보여줄 공유할 웹 페이지의 제목입니다. 최대 70자까지 지원합니다.

- twitter:description: 카드에 보여줄 공유할 웹 페이지의 설명을 가리킵니다. 최대 200자까지 지원합니다.

- twitter:image: 카드에 보여줄 이미지의 URL이며 5MB 미만이어야 합니다. JPG, PNG, WEBP, GIF 형식을 지원합니다.

이 외의 특수한 속성들은 Cards markup | Docs | Twitter Developer Platform 에서 확인 가능합니다.

또한 페이스북과 링크드인, 핀터레스트, 트위터는 각각 해당 공유 정보에 문제가 없는지 테스트할 수 있는 곳도 제공합니다.

• 페이스북: https://developers.facebook.com/tools/debug/
• 링크드인: https://www.linkedin.com/post-inspector/
• 핀터레스트: https://developers.pinterest.com/tools/url-debugger/
• 트위터: https://cards-dev.twitter.com/validator

쇼피파이에서 open graph를 이용할 수 있는 방법이 있나요?

쇼피파이 스토어 화면은 테마로 구성되어 있습니다. 무료 제공 기본 테마인 Dawn에는 이 메타 태그를 담은 코드 조각이 다음과 같이 포함되어 있습니다. 이 코드 조각은 스토어의 모든 페이지에 적용됩니다.

<쇼피파이 코드 에디터> 

또한 좀 더 다이나믹한 오픈 그래프 설정이 필요하다면, 쇼피파이 스토어에서 SPO -SEO Product Optimizer 라는 앱이 있습니다. 이 앱은 키워드를 제안하며 SNS로의 공유 시 링크에 대한 프리뷰 관리가 가능하고 페이스북, 트위터 등의 링크 공유 시 커스텀도 가능하다고 합니다.

마치며

SEO의 궁극적인 목표는 고품질의 콘텐츠여야 합니다. 이것은 검색 결과 페이지에 표시되는 기본 태그를 설정하든, SNS 피드에 표시되는 공유 태그를 설정하든 동일합니다. 그러나 SNS 공간은 전 세계인의 60.99%가 이용하는 만큼 많은 정보가 쏟아집니다. 특히 내용을 확인하기 위해서 이동하는 수고를 들여야 하는 링크가 최소한의 텍스트만으로 이루어진 지루한 모양이라면 어떨까요? 단순한 방법이지만 플랫폼에 대응되는 데이터의 구조화는 똑똑한 SEO 전략의 기본입니다.