공유하고싶을 만한 좋은 글, 상품소개등을 쓰고 나면 자신의 블로그글을 SNS나 사이트, 메신저등으로 여기저기에 링크를 공유하는 분들이 꼭 있을 겁니다. 그것은 SEO뿐만 아니라 바이럴, 입소문등을 위해 꼭 필요한 것이죠. 글과 페이지의 URL(링크주소)은 자신이 공유할 수도 있고, 다른 사람이 공유할 수도 있습니다.
이번글은 SEO(검색엔지 최적화)와도 매우 밀접한 관계가 있습니다만 SNS 마케팅에 민감한 분들에게 더욱 중요한 얘기일 겁니다.
그리고 워드프레스 테마를 개발하는 사람이라면 필수로 알아야할 사항이기도 합니다. SNS에 최적화된 테마를 만드는건 중요하니까요.
공유되는 링크의 형태에 대해서
저는 링크의 표시형식에 매우 민감한데요. 제가 콘트롤 할 수 있는 부분이라면 어떤 형태가 적합할지 링크마다 고민을 하게 됩니다. 예를 들어 제 블로그 본문에 다른글이나 다른 사이트의 링크를 걸 때는 아래 3가지로 나눌 수 있습니다.
- 그냥 URL 그 자체가 표시된 링크
- 문장속 문맥적인 링크
- 예시: 몇일 전에 Elementor 시작 방법에 관한글을 포스팅했습니다.
- 썸네일 이미지가 함께 표시된 링크.(임베딩. 아래 예시)
1번은 사람들이 손쉽게 링크주소라는 걸 알 수 있어서 눌러볼 확율이 크며 어떤 사이트로 연결될지 알 수 있지만 지저분합니다. 링크자체로는 별다른 정보를 제공하지도 못하죠.
2번은 자연스럽게 문장과 어우러져 있어 깔끔하며 구글 SEO에 친화적입니다. 다만 CSS 스타일로 잘 표시해줘야 링크라는 것을 사람들이 알아볼 수 있습니다.
3번은 많은 정보를 담고있는데다가 ‘예쁘죠’. 요즘 트렌드입니다.
3번 방식은 기술적용어로 ‘임베딩, embedding’ 이라고 하는데 보통 HTML 태그중 하나인 <iframe>이 사용됩니다. 이것은 유튜브 영상을 공유하는 방식과도 같죠.
HTML코드를 수정해서 <iframe>을 넣을수는 있지만 매우 번거롭습니다. 하지만 워드프레스 4.8 버전대에 들어서면서 본문 글에 링크만 붙여넣어도 위처럼 자동으로 임베딩되도록 편리해졌습니다.
사이트나 SNS에 공유되는 링크의 썸네일
이번 포스팅은 위처럼 3번과 같은 형태에대한 ‘타사이트에 공유된 링크의 썸네일’에 관한 얘기입니다. 이것을 바꾸고 싶을 때가 있을 수 있는데 어떻게 바꿀까하는 것이죠.
페이스북, 트위터, 네이버, 인스타그램등등에서 꼭 iframe 임베딩 방식이 아니더라도 어떻게든 링크를 ‘썸네일을 함께’ 표시하는게 요즘 트렌드인데요. 사용자가 꼭 임베딩과같은 HTML 언어 수정을 하지 않더라도 링크만 공유하면 알아서 척척척 썸네일 이미지까지 넣어주죠. 썸네일을 표시하는 방법도 저마다 다릅니다. 아래 예를 볼까요.
또다른 예로 클리앙같은 커뮤니티 사이트는 ‘선택적’으로 그런 동작을 하도록 프로그래밍 되어있습니다. 사용자가 공유한 링크가 유튜브, 비메오같은 영상링크일 때만 비디오 썸네일을 표시하죠. 워드프레스 블로그글 링크를 본문에 작성해도 썸네일을 표시해주지 않습니다.
이러한 것들은 어떻게 표시할지, 수정이 가능할지등은 전적으로 해당 사이트에 달려있습니다. 우리가 어찌할 수 있는게 아니죠.
비단, 썸네일이미지뿐만 아니라 글제목, 요약이 포함되기도하고 사이트 이름, 주소가 표시되기도 하는데 사이트마다 정식 용어도 제각각이죠.
트위터에서는 트위터 카드, 페이스북은 오픈 그래프 마크업(링크 미리보기), 카카오톡은 링크 미리보기, 아이폰과 맥북 사용자가 쓰는 메신저인 iMessage(아이메시지)에서는 링크 프리뷰(Link Previews)라고 합니다.
참고: 페이스북 사용자들은 보통 포스팅 썸네일이라고 부르곤 합니다.
오픈그래프 – URL의 제목, 특성이미지를 알려주는 메타태그
글이나 페이지에 아무리 특성이미지를 지정해줘도 공유되는 링크에 특성이미지가 썸네일로서 나타나지 않고 사이트 로고만 나올 때도 있을 겁니다. 사이트 로고 조차 없다면 빈칸일테고요.
웹페이지에서 제목, 요약, 대표이미지를 인식하는 것은 HTML의 오픈 그래프(og, open graph) 메타태그에 의존하곤 합니다. 그러므로 자신의 워드프레스 테마가 페이지의 HTML 헤더에 메타 태그를 작성하면서 <meta> 태그중 하나가 그 속성(property)로 “og:image”를 작성해줘야합니다. 그 메타데이터에 콘텐트(content)에 특성이미지의 주소를 넣어줘야하죠.
이미지뿐만 아니라 제목, 요약, 사이트이름등도 있죠. 이러한 오픈그래프 메타정보를 HTML로 작성해주는 테마가 SEO 최적화에 좋은 테마라고 할 수 있습니다. 자신의 테마가 오픈그래프 태그를 지원하지 않는다면 그것을 작성해주는 플러그인도 있는데요. Yoast SEO 같은 플러그인을 사용해도 됩니다.
자신의 테마가 이미 오픈그래프를 작성한다면 Yoast SEO 사용자는 중복된 메타태그 사용을 지양하기위해 관리자페이지 > SEO > Social 의Facebook 이나 Twitter 항목에서에서 오픈그래프 사용을 끌 수 있습니다(Disabled). 종종 테마에 딸린 기능은 개별글 별로 콘트롤이 안되므로 Yoast SEO보다는 가능하다면 사용하는 테마의 오픈그래프 기능을 끄는걸 추천합니다.
이미 공유된 링크의 프리뷰 갱신하기
SNS에 보여지는 링크 미리보기는 내 워드프레스 서버의 이미지 주소, 제목등을 사용하지 않곤합니다. 페이스북, 트위터, 카카오톡 위 3가지가 가장 대표적인 예인데 다른 곳도 어떨지 모르겠지만 이런것들 모두 어떤 링크주소가 최초로 공유될 때 그 상태를 자기들 서버에 저장(캐싱)합니다.
내가 공유했든, 남이 내 링크를 공유했든 최초공유된 링크의 정보(썸네일, 제목, 요약등)를 자기네 (CDN) 서버에 저장합니다. 그리곤 같은 링크주소가 또 다른 누구에 의해서든 재공유되면 전에 저장해둔 자기네 서버 데이터를 끌어다 보여줄 뿐 더이상 원본 사이트를 참고하지 않아요.
그래서 특정 글이 한번이라도 공유된 적이 있는 글을 제목, 요약, 특성이미지등을 변경했다면 SNS에 나타나는 미리보기 정보도 바꿔야할 테고 그럴려면 해당 서비스의 개발자 페이지에 방문해서 다시 스크랩하도록 말해줘야합니다. (요청한뒤 새로 반영되려면 약간의 시간이 걸리는 편입니다)
- 트위터 썸네일 갱신 페이지: 트위터 카드 벨리데이터
- Card URL에 링크주소를 넣고 Preview card 버튼 클릭
- 페이스북 썸네일 갱신 페이지: 페이스북 공유 디버거
- 공유디버거 > 링크주소입력 > 디버그 > 새정보 가져오기 또는 다시 스크랩
- 카카오톡 썸네일 갱신페이지: 카톡 개발자 캐시 삭제도구
- URL 입력 > 요청 클릭: 공유된적 없거나 이미 삭제요청이 되었을 경우 ‘스크랩된 URL이 아닙니다’ 메시지가 나옵니다.
새로 스크랩하도록 하는 일은 원본 사이트의 주인이 아니더라도 할 수 있습니다. 위 링크들은 본래 웹페이지를 개발할 때 테스트하는 용도이기도 하는데 여기서 경고하는 것들을 수정해주면 SEO에 도움이 되기도합니다.
링크 미리보기와 인터넷 가짜뉴스
요즘들어 SNS 가짜뉴스로 여러가지 말이 있는데요. 예전에 횡횡했던 방식으로는 가짜뉴스를 퍼트리면서 SNS 링크공유를 통해서 트래픽을 모으는 무리들도 있었다고 합니다. ‘이럴수가’, ‘충격’적인 제목과 썸네일로 나타난 포스팅 썸네일을 눌러보니 광고글로 연결되는 거죠.
그 때문에 페이스북의 공유디버거는 본래는 공유된 링크 미리보기의 제목등을 다르게 수정 할 수 있었지만 2017년 부터는 오직 스크랩을 통해서만 페이지정보를 가져와 일치시키도록 바뀌었습니다.
요즘엔 가짜뉴스 그 자체가 돈이 되다보니 진짜로 가짜뉴스 페이지를 생성하는 사람들이 늘은터라 그 조차도 별 효력을 발휘하지 못하지만 말예요. 가짜뉴스에대한 처벌 법안이 논의되고 있는 시점이니 정직한 포스팅을 하도록 합시다.
참고: 검색엔진 인덱싱
글 제목이나 요약글, 이미지를 수정했다면 구글웹마스터에서도 인덱싱을 요청해줄 수 있습니다. 사이트맵을 등록했다면 바로바로 인덱싱을 하지 않아도 시간이 지나면 알아서 갱신해줄 것입니다.
특성이미지를 업로드했더라도 썸네일 이미지로 표시하고 말고는 구글 마음입니다. 구글은 검색결과에 썸네일을 잘 사용하지 않아요.
네이버웹마스터는 2018년 9월경 새로운 정책업데이트로 인해 이미 한번 인덱싱한 페이지는 중복이라면서 수동 재인덱싱 요청을 받지 않는 것같습니다. 이 또한 네이버 검색엔진에 전적으로 달려있을 뿐입니다.
'WEB > WP(WordPress)' 카테고리의 다른 글
| The 6 Best WordPress Image Optimization Plugins Compared (0) | 2019.10.25 |
|---|---|
| [WP Troubleshooting] Errors and other issues to solve (0) | 2019.09.10 |
| Woocommerce product stack management (0) | 2019.08.27 |
| Getting code=EWP_SETTINGS error when trying to connect to PayPal (0) | 2019.08.27 |
| Divi Theme Bug - Default Site Language English Problem (0) | 2019.08.23 |
