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

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

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

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

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

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

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 파일에 코드 입력

if (is_single()/* 1 */) {
	
	global $post;

	if(get_the_post_thumbnail($post->ID, 'thumbnail')) {
		$image = wp_get_attachment_url( get_post_thumbnail_id($postID) );
	} else {	
		$image = ''; /* 2 */
	}
	$description = get_bloginfo('description');
	$description = hwangc_excerpt( $post->post_content, $post->post_excerpt );
	$description = strip_tags($description);
	$description = str_replace("\"", "'", $description);
?>
	<meta property="og:title" content="<?php the_title(); ?>" />
	<meta property="og:type" content="article" />
	<meta property="og:image" content="<?php echo $image; ?>" />
	<meta property="og:url" content="<?php the_permalink(); ?>" />
	<meta property="og:description" content="<?php echo $description ?>" />
	<meta property="og:site_name" content="<?php echo get_bloginfo('name'); ?>" />
<?php 	}
}

function hwangc_excerpt($text, $excerpt){
	$raw_excerpt = $text;
	if ($excerpt) return $excerpt;
	return apply_filters('wp_trim_excerpt', $text, $raw_excerpt);
}

if (is_single()/* 1 */) {

global $post;

if(get_the_post_thumbnail($post->ID, 'thumbnail')) {

$image = wp_get_attachment_url( get_post_thumbnail_id($postID) );

} else {

$image = ''; /* 2 */

}

$description = get_bloginfo('description');

$description = hwangc_excerpt( $post->post_content, $post->post_excerpt );

$description = strip_tags($description);

$description = str_replace("\"", "'", $description);

<?php }

}

function hwangc_excerpt($text, $excerpt){

$raw_excerpt = $text;

if ($excerpt) return $excerpt;

return apply_filters('wp_trim_excerpt', $text, $raw_excerpt);

}

* 위 주석 설명 *

/* 1 */

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

예:

if ( is_home() || is_single() || is_page() )

1	if ( is_home() \|\| is_single() \|\| is_page() )

워드프레스 conditional tags 참고

/* 2 */

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

og 태그 확인

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

<meta property="og:title" content="수정해야할 글이 너무 많은데 쉽게 수정하는 방법이 있나요?" />
<meta property="og:type" content="article" />
<meta property="og:image" content="http://hwangc.com/wp-content/uploads/2013/10/searchandreplace.png" />
<meta property="og:url" content="http://hwangc.com/quick-and-easy-way-to-replace-texts/" />
<meta property="og:description" content="워드프레스에서 몇년간 지속적으로 포스트를 발행해오던 H씨가 어느날 워드프레스 플러그인을 정리하기 위해 잘 사용하지 않는 플러그인 하나를 삭제하였습니다. 잘 사용하지 않는 플러그인이니 큰 문제가 없겠지 싶었는데 막상 포스트를 열어보니 삭제한 플러그인에서 사용하던 쇼트코드..." />
<meta property="og:site_name" content="HwangC의 착한 워드프레스" />

마치며

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