自分一新

ブログ記事を更新したら、そのアイキャッチ画像をPinterest（ピンタレスト）にも投稿することで、被リンクを得ると同時にブログ記事へのアクセス増も狙いたいなと思って、それを実現する方法を以前まとめて記事にしていました。

2023.04.23

ブログ記事を投稿するたびに自動でPinterestにピンされるようにする方法

ブログに記事を投稿するたびに自動でアイキャッチ画像をPinterestにピン（保存）されるにようしたいなと思い、その方法を調べて実装してみました。やり方を探しておられる方のために、手順をまとめます。...

ところが、当サイトでこれを実施してみたところ、うまくアイキャッチ画像がピンされず、代わりにブログ記事の最初に出てくる画像をピンしてしまう現象が発生しました。下の画像の青枠で囲ったピンがそれらです。

やっかいなのは常に記事の最初に入れた画像がピンされるのではなく、ちゃんとアイキャッチ画像をピンしてくれる場合もあるというところです。おそらくPinterest側のアルゴリズムに起因する問題だと思われるので、こういうことが起こることを前提としてブログ側で対応を検討する必要がありそうです。

いくつか対応策を考えたのですが、これが一番シンプルかなと思える方法を思いついたので、紹介します。

解決策

いきなり結論ですが。

「アイキャッチ画像と同じ画像を記事の一番最初に入れる。
ただし、表示位置をCSSでいじって画面表示されないようにする。」

少し説明をします。

WordPress上でのアイキャッチ画像は今まで通り設定します。Pinterestもアイキャッチ画像をちゃんとピンしてくれる時がありますし、他のSNSへの自動投稿でもアイキャッチ画像を参照させているので、アイキャッチ画像自体の設定を変えるような打ち手はとれません。

一方、問題は「Pinterestへの自動投稿で、ブログ本文中、一番最初に出てくる画像をピンしてしまう時がある」ことなので、そうであれば、もういっそのことブログ記事の一番最初にもアイキャッチ画像と同じ画像を挿入しておけばいいじゃないか、ということです。

これであればPinterestへの自動投稿においても、意図した通りアイキャッチ画像に設定した画像が必ずピンされるようになるはず。

しかし単にアイキャッチ画像と同じ画像を本文の一番最初に差し込んだだけだと、記事をブラウザで見た時に同じ画像が2枚縦に並んで表示されてしまうことになります。ちょっと格好悪いですよね。

そこで、画像の表示位置をブラウザで表示されない場所へ移動させてしまいます。具体的には画像の表示開始位置の座標を(0, -1000)のようにします。この設定の場合、本文エリアの開始位置を起点にして、上へ1000px移動させることになりますから、画像は本文エリアの外に出てしまいブラウザ上では表示されなくなります。

CSS記述はこんな感じ。記事の一番最初に差し込んだ画像に対して、class=”img-hidden”を設定してあげればOKです。

.img-hidden {
  position: absolute;
  top: -1000px;
  left: 0px;
}

ただし、ブラウザ上で表示されないというだけで、画像は以前としてブログ記事の冒頭に入っています。ですから、Pinterestがフィードからピンする画像を取得する際、記事の本文最初に登場する画像を拾ったとしても、この「表示されていないアイキャッチ画像と同じ画像」を参照してくれる、というわけです。

当サイトと同じように、フィードを使ってピンを一括作成させている方で、同じような問題にぶつかっている方がおられましたら、この方法をお試しください。