워드프레스 SNS 메타태그 최적화 플러그인 Open Graph

워드프레스

HTML 마크업(Markup)중 오픈그래프(Open Graph)는 블로그나 사이트가 SNS에서 링크등으로 활용될 때 우선적으로 활용되는 정보입니다.

<title></title>이나 <meta name=”description” content=”사이트 설명”>같은 사이트의 정보를 SNS 친화적으로 나타내주는 메타태그 인데요.

특히 네이버 같은 경우 웹마스터 도구에서 사이트의 최적화를 체크할때 나타내는 항목중 하나입니다. 워드프레스에서는 기본적으로 오픈그래프 메타태그를 지원하지 않아 위처럼 X 아이콘이 떠서 신경이 쓰이는데요.

wp_plugin_opengraph_01

물론 오픈그래프 메타태그가 없어도 검색엔진 측에서는 문제가 없지만 블로그나 사이트가 SNS 친화적으로 운영되려면 설정해야 겠습니다.

오픈그래프 메타태그는 간단하게 플러그인으로 해결할수 있습니다.

워드프레스 오픈그래프(Open Graph) 플러그인 Open Graph Protocol Framework

wp_plugin_opengraph_02

워드프레스 플러그인 페이지 (링크)

wp_plugin_opengraph_03

플러그인을 설치한 다음 활성화하면 따로 설정이나 옵션 없이 오픈그래프 메타태그가 자동으로 생성됩니다.

wp_plugin_opengraph_04

다시 네이버 웹마스터 도구를 확인해 보면 오픈그래프 정보를 가져가는 것을 확인할수 있습니다.

<head>
<meta property="og:type" content="website">
<meta property="og:title" content="사이트 제목">
<meta property="og:description" content="사이트 설명">
<meta property="og:image" content="http://site.com/myimage.jpg">
<meta property="og:url" content="http://site.com">
</head>

너무 간단하게 끝나서 오픈그래프 메타태그의 Syntax를 첨부합니다.

좀더 자세한 오픈그래프 정보를 보고싶다면 ogp.me를 참고하세요.

답글 남기기

이메일 주소는 공개되지 않습니다. 필수 필드는 *로 표시됩니다

Fill out this field
Fill out this field
유효한 이메일 주소를 입력해주세요.

Wordpress Gutenberg Title
워드프레스 구텐베르크 CSS 삭제하는 방법
워드프레스 5.0에서 기본 에디터로 추가된 구텐베르크(Gutenberg)는 블록 스타일의 위지윅 에디터로 단순한 디자인의 활용도가 높은 CSS를 제공하고 있습니다. 하지만 기존의 클래식…
Wordpress Disable Emoji Title
워드프레스 이모지(Emoji) 비활성화 방법
워드프레스는 :-)나 :-P 같은 텍스트 이모티콘을 입력하면 이모지로 변환해서 보여주는 기능을 포함하고 있습니다. 참고 : 워드프레스 이모티콘(스마일리) 사용법과 리스트 그림(え)과 문자(もじ)의 합성어인…