サポート » 使い方全般 » SNSへのリンクでアイキャッチ画像を表示する

SNSへのリンクでアイキャッチ画像を表示する

  • casey76

    (@casey76)


    8年、 3ヶ月前

    サイトをfacebookに転載した際に、アイキャッチ画像が同時に表示されていましたが、
    １ヶ月ほど前からアイキャッチ画像ではなく他の無関係な画像が表示されるようになりました。
    ワードプレス自体もAll in One SEOやその他プラグインもアップデートしているので、その中で何らかの変化があったと思います。

    検索して調べ「All in One SEO」の設定などを操作しても改善されません。
    何かいい方法はないでしょうか。

9件の返信を表示中 - 1 - 9件目 (全9件中)
  • photographer hiro.

    (@mura0403)

    8年、 3ヶ月前

    casey76さん

    ソースのogタグって書き出されてますか？
    ページソースのheadのあたりに書かれてると思います。

    私も以前同じ症状があり、header.phpを変更して使っています。

    トピック投稿者 casey76

    (@casey76)

    8年、 3ヶ月前

    mura0403様

    og: というソースでしょうか？
    見当たりません。

    header.php とはテーマのファイルでしょうか？
    こちらにもog: はありません。
    header.phpにソースを書き込むことで解決できるのでしょうか。
    もしそうなら、ソースも教えていただけませんか？

    よろしくお願いします。

    photographer hiro.

    (@mura0403)

    8年、 3ヶ月前

    casey76さん

    説明不足で済みませんでした。
    帰りの電車で書き込んでましたので短文ですみません。

    本題ですが閲覧ページのソースを見ると
    <head>～</head>の中に「meta property」とういういわゆメタタグがあります。
    そのなかに

    <meta property="og:image" content="画像URL" />

    上記のようなタグが存在します。
    これがogタグというもので、facebookなどのSNSでシェアしたときの情報を記述するタグです。
    この時の記述は基本的には以下のように書くと良いと思います。

    <meta property="og:site_name" content="サイト名" />
<meta property="og:type" content="article" />
<meta property="og:locale" content="ja_JP" />
<meta property="fb:app_id" content="facebookのID（数字）を記入" />
<meta property="og:url" content="ページのURL " />
<meta property="og:title" content="SNS用タイトル" />
<meta property="og:description" content="SNS用説明概要" />
<meta property="article:published_time" content="2015-12-29T12:30:31+09:00" /><!-- 記事公開日 -->
<meta property="article:modified_time" content="2016-01-15T09:55:31+09:00" /><!-- 最終更新日 -->
<meta property="article:author" content="投稿者の記述があるURL（facebookでも可能）" />
<meta property="article:section" content="facebook" />
<meta property="article:tag" content="キーワード1,キーワード2" />
<meta property="article:publisher" content="facebookページのURLなど" />
<meta property="og:image" content="アイキャッチURL" />
<meta property="og:image:width" content="画像の横幅" />
<meta property="og:image:height" content="画像の高さ" />

    となります。
    header.php、ソース調べますので少々お待ちください。

    photographer hiro.

    (@mura0403)

    8年、 3ヶ月前

    casey76さん
    私の場合こんな感じで書いてますが

    <!doctype html>
<html lang="ja">
<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# article: http://ogp.me/ns/article#">
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
<meta name="description" content="<?php if(is_single()): the_excerpt(); endif; ?>">
<meta name="keywords" content="タグ一覧など出力" />
<meta property="og:site_name" content="<?php bloginfo('name'); ?>" />
<meta property="og:type" content="article" />
<meta property="og:locale" content="ja_JP" />
<meta property="fb:app_id" content="facebookID" />
<meta property="og:url" content="<?php echo esc_html( "http://" . $_SERVER['HTTP_HOST']  . $_SERVER['REQUEST_URI']);//現在のURL ?> " />
<meta property="og:title" content="<?php if(is_single()): the_title(); endif; ?> - <?php bloginfo('name'); ?>" />
<meta property="og:description" content="<?php if(is_single()): the_excerpt(); endif; ?>" />
<meta name="format-detection" content="telephone=yes" /><!-- 電話番号リンクする場合のみON -->
<?php if(is_single()) : ?>
<meta property="article:published_time" content="<?php echo get_the_time('Y-m-d'); ?>T<?php echo get_the_time('H:i:s'); ?>+09:00" />
<meta property="article:modified_time" content="<?php echo get_post_modified_time('Y-m-d') ?>T<?php echo get_post_modified_time('H:i:s') ?>+09:00" />
<?php endif; ?>
<meta property="article:author" content="<?php bloginfo('url');//ここではワードプレスのトップにしてますがfacebook URLがおすすめ ?>" />
<meta property="article:section" content="facebook" />
<meta property="article:tag" content="タグやカテゴリーなどカンマ区切り" />
<meta property="article:publisher" content="facebookURL" />
<?php if(has_post_thumbnail()): //画像のOGタグ開始
$thumbnail_id = get_post_thumbnail_id();
$eye_img = wp_get_attachment_image_src( $thumbnail_id , 'full' );
?>
<?php echo '<meta property="og:image" content="'.$eye_img[0].'" />'; ?>

<?php echo '<meta property="og:image:width" content="'.$eye_img[1].'" />'; ?>

<?php echo '<meta property="og:image:height" content="'.$eye_img[2].'" />'; ?>
<?php endif; //END 画像のOGタグ ?>
<?php if(is_single()): ?><title><?php the_title(); ?> -<?php bloginfo('name'); ?></title><?php endif; ?>
</head>
<body>
・・・・・・・

    画像のみあればよろしければ

    <?php if(has_post_thumbnail()): //画像のOGタグ開始
$thumbnail_id = get_post_thumbnail_id();
$eye_img = wp_get_attachment_image_src( $thumbnail_id , 'full' );
?>
<?php echo '<meta property="og:image" content="'.$eye_img[0].'" />'; ?>

<?php echo '<meta property="og:image:width" content="'.$eye_img[1].'" />'; ?>

<?php echo '<meta property="og:image:height" content="'.$eye_img[2].'" />'; ?>
<?php endif; //END 画像のOGタグ ?>

    もしかすると、このソースのみでも大丈夫かもしれません。
    私の場合はほぼフルカスタムでヘッダー作ってるので、投稿ページだとOKだと思うのですがカテゴリーやトップなど少し工夫が必要になると思います。

    トピック投稿者 casey76

    (@casey76)

    8年、 3ヶ月前

    mura0403様

    ありがとうございます。
    ページのソースを見ても　<meta property=”og:image” 　というのはなかったのですが、
    最後のソースをheader.phpに記入したところ、ソースには表示されるようになりました。
    しかし、facebookにリンクを貼るとそれが表示されず無関係な画像が表示されます。

    プラグインの＜All In One SEO Pack＞を停止しましたが、同じです。
    せっかくご指導いただきましたが、解決できませんでした。
    これはWordPress自体の問題かと思いましたが、どうでしょうか。

    KUCKLU

    (@kuck1u)

    8年、 3ヶ月前

    こんにちは、casey76さん。

    これはWordPress自体の問題かと思いましたが、どうでしょうか。

    WordPress は関係ないと思いますよ？そもそも、WordPress 自体は OGP タグは出力しないので・・・。原因として考えられるのは以下になると思います。

    * 使用しているプラグインの使用方法が間違っている
    * 使用しているプラグインが使用しているサーバー上で利用できない（エラーがでるなど）
    * 使用しているプラグインが使用している WordPress のバージョンでは使用できない（エラーがでるなど）
    * 使用しているプラグインが他のプラグインと衝突している
    * 使用しているプラグインがテーマと衝突している。

    などなど、他にも色々と原因は考えられますが、原因を突き止めるのに一番早いのは、エラーログをみるのが一番早いと思います。

    define( 'WP_DEBUG', true );
define( 'WP_DEBUG_DISPLAY', false );
define( 'WP_DEBUG_LOG', true );

    上記を wp-config.php に書き込むと、wp-content ディレクトリ以下に debug.log というファイルを出力するので、テキストエディターなどで開いてみてください。恐らく色々エラーが書かれていると思います。

    トピック投稿者 casey76

    (@casey76)

    8年、 3ヶ月前

    KUCKLU様
    いろいろなご指導ありがとうございます。

    早速上記３行を wp-config.php に書き込みUPしました。
    しばらくすると debug.log ができるのでしょうか。
    後ほど確認します。

    wp-config.php のバーミッション変更は必要でしょうか。
    現在は６４４です。

    トピック投稿者 casey76

    (@casey76)

    8年、 3ヶ月前

    使用しているプラグインが使用しているサーバー上で利用できない（エラーがでるなど）

    という指摘で気になったのですが、昨年末にサーバーを変えました。
    以前は　ドメインキング　http://www.domainking.jp/
    現在は　エクストリムサーバー　http://www.extrem.jp/
    です。

    偶然かもしれませんが、時期的に見るとこの頃からアイキャッチ画像が表示できない不具合がありました。

    トピック投稿者 casey76

    (@casey76)

    8年、 3ヶ月前

    KUCKLU様

    ご指摘いただいたプラグインですが、＜All in One SEO＞の設定を色々調べなおして設定し直したところ、どうにか正常に戻りました。
    wp-config.php に書き込んだ３行ですが、その後 debug.log というファイルはできません。

    mura0403様

    ＜All in One SEO＞の設定をし直した後、アイキャッチ画像がリンクされないので、

    <?php if(has_post_thumbnail()): //画像のOGタグ開始
    $thumbnail_id = get_post_thumbnail_id();
    $eye_img = wp_get_attachment_image_src( $thumbnail_id , ‘full’ );
    ?>
    <?php echo ‘<meta property=”og:image” content=”‘.$eye_img[0].'” />’; ?>

    <?php echo ‘<meta property=”og:image:width” content=”‘.$eye_img[1].'” />’; ?>

    <?php echo ‘<meta property=”og:image:height” content=”‘.$eye_img[2].'” />’; ?>
    <?php endif; //END 画像のOGタグ ?>

    を再びheader.phpに書き込んだところ、facebookのリンクにちゃんと表示されるようになりました。

    どうもありがとうございました。

    しかし未だに気になるのは、今まで普通にできていたことが突然できなくなり、解決にこれほどの手間がかかるものでしょうか。今までは一体何だったのかと、変な気分です。

9件の返信を表示中 - 1 - 9件目 (全9件中)
  • トピック「SNSへのリンクでアイキャッチ画像を表示する」には新たに返信することはできません。

トピックタグ

表示