워드프레스에 페이스북 메타 태그 넣기

이스북에 컨텐츠의 링크를 입력하면 자동으로 컨텐츠의 썸네일, 제목, 요약글 등을 불러오는 것을 보셨나요? 여러분 사이트의 컨텐츠가 페이스북에 제대로 링크가 되려면 페이스북의 메타 태그가 제대로 들어가 있어야 합니다.

플러그인에서 자동으로 제공해주기도 하죠

대표적인 SEO 플러그인 All in one SEO과 WordPress SEO by Yoast 모두 소셜네트워크의 메타 태그를 자동으로 소스에 넣을 수 있는 기능을 제공합니다. 사이트 구조가 단순하다면 이러한 플러그인을 활용하시는 것이 편리하겠죠. 하지만 사용하는 사이트에서 메타 태그를 표시하는 조건이 필요하다면 테마에 직접 코드를 넣으시면 됩니다.

직접 테마에 페이스북 메타 태그 넣기

페이스북에 링크를 붙여넣으면 물결 로딩이 표시되고 그와 동시에 페이스북의 로봇이 붙여진 링크를 따라들어와 페이스북 메타 태그(open graph: og)를 가지고 갑니다. og 메타 태그가 없는 경우에는 랜덤한 이미지나 타이틀 등을 긁어갈 수 있으니 og를 심어서 페이스북에게 정확한 정보를 제공하는 것이 좋겠죠.

facebook-meta-tag-flow

og 태그

페이스북에 알려줄 og 태그는 아려와 같습니다.

1. og:title – 컨텐츠 제목
2. og:type – 컨텐츠 타입
3. og:image – 컨텐츠 특성 이미지
4. og:url – 컨텐츠 URL
5. og:description – 컨텐츠 내용
6. og:site_name – 사이트 이름

더 자세한 내용은 페이스북 open graph를 참고하세요.

functions.php 파일에 코드 입력

* 위 주석 설명 *

/* 1 */

원하는 조건을 입력하실 수 있습니다. is_single()는 블로그 포스트일 경우에만 보여준다는 것입니다. 만일 홈이나 페이지에서 보여주고 싶다면 is_home(), is_page()를 추가하시면 되겠죠.

예:

워드프레스 conditional tags 참고

/* 2 */

만일 포스트 썸네일이 없는 경우 대체할 이미지의 주소를 입력하세요.

og 태그 확인

태그를 적용한 링크에서 마우스 오른쪽을 눌러 페이지 소스 보기(View page source) 하시면 적용된 태그를 확인할 수 있습니다. 아래는 수정해야할 글이 너무 많은데 쉽게 수정하는 방법이 있나요? 페이지에서 확인한 메타 태그입니다.

마치며

페이스북에 공유가 잘 안된다는 분들이 계셔서 포스팅을 해봤습니다. 여러분 사이트의 컨텐츠가 제대로 공유가 안될 때는 og 태그를 확인해보세요. open graph와 관련된 내용이 있으시면 아래 댓글이나 Q&A게시판에 공유해주세요.

글쓴이

HwangC

안녕하세요! 여러분의 편안한 워드프레스 안내자 황씨입니다.

“워드프레스에 페이스북 메타 태그 넣기”에 대한 1개의 생각

답글 남기기

이메일은 공개되지 않습니다. 필수 입력창은 * 로 표시되어 있습니다.