kdcsライブラリー

meta要素の「property」

<meta property="og:site_name" content="サイト名">
<meta property="og:title" content="ogpのタイトル <title>と同じ内容">
<meta property="og:description" content="ogpの本文 <meta name='description'>と同じ内容。">
<meta property="og:type" content="website（トップページがwebsite 下層ページがarticle）">
<meta property="og:url" content="サイト（ページ）の絶対パスURL">
<meta property="og:image" content="画像の絶対パスURL">

例

<meta property="og:site_name" content="kdcs-Library">
<meta property="og:title" content="kdcs-Libraryのタイトル">
<meta property="og:description" content="html・JavaScript・WordPressなどkdcsのテクニカルメモです。">
<meta property="og:type" content="website">
<meta property="og:url" content="https://library.kdcs-web.com">
<meta property="og:image" content="https://library.kdcs-web.com/wp-content/themes/library/images/xxx.jpg">

【捕捉】
titleは32文字程度
discriptionは120文字程度
横長の画像は比率1.91:1。600x315px以上であれば良いが、推奨は1200x630px。
正方形の画像は600x600px以上。

Twitterでの表示 —————————————

<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@twitter_acount">

【捕捉】

twitter:cardはsummaryまたはsummary_large_image（推奨サイズ1200px x 630px）
summaryは比率1:1 最少サイズ144px x 144px
summary_large_imageは比率1.91:1 最少サイズは600px x 314px

<meta property="og:type" content="article">
<meta property="og:image" content="ページで見せたい画像URL">
<meta property="og:title" content="ページのタイトル">
<meta property="og:description" content="ページの説明">
<meta property="og:url" content="ページのURL">
<meta property="og:site_name" content="サイト名">
<meta property="og:locale" content="ja_JP">
<meta property="fb:admins" content="facebookのユーザーID fb:app_idで良い。">
<meta property="fb:app_id" content="facebookのアプリID">

wordpress用
※facebookを使っていない場合は「fb:app_id」と「article:publisher」は削除

<meta property='og:locale' content='ja_JP'>
<meta property='fb:app_id' content='●●●'>
<meta property='og:site_name' content='<?php bloginfo('name'); ?>'>
<?php
if (is_single()){
if(have_posts()): while(have_posts()): the_post();
echo '<meta property="og:title" content="'; the_title(); echo '">';echo "\n";
echo '<meta property="og:description" content="'.mb_substr(get_the_excerpt(), 0, 100).'">';echo "\n";
echo '<meta property="og:url" content="'; the_permalink(); echo '">';echo "\n";
echo '<meta property="og:type" content="article">';echo "\n";
echo '<meta property="article:publisher" content="●●●">';echo "\n";
endwhile; endif;
} else {
echo '<meta property="og:title" content="'; bloginfo('name'); echo '">';echo "\n";
echo '<meta property="og:description" content="'; bloginfo('description'); echo '">';echo "\n";
echo '<meta property="og:url" content="'; bloginfo('url'); echo '">';echo "\n";
echo '<meta property="og:type" content="website">';echo "\n";
}
$str = $post->post_content;
$searchPattern = '/<img.*?src=(["\'])(.+?)\1.*?>/i';
if (is_single()){
if (has_post_thumbnail()){
$image_id = get_post_thumbnail_id();
$image = wp_get_attachment_image_src( $image_id, 'full');
echo '<meta property="og:image" content="'.$image[0].'">';echo "\n";
} else if ( preg_match( $searchPattern, $str, $imgurl )){
echo '<meta property="og:image" content="'.$imgurl[2].'">';echo "\n";
} else {
echo '<meta property="og:image" content="●●●">';echo "\n";
}
} else {
echo '<meta property="og:image" content="●●●">';echo "\n";
}
?>
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@●●●">