2022年1月28日

LinkedInのフィードにURLを投稿した時のサムネイルがおかしい

HTML/CSS SEO 学習

この記事は1年以上前に投稿された記事です。情報が古い可能性があります。

この不具合の検証のためにLinkedInアカウントを作った

制作を担当したとあるサイトのURLをLinkedInのフィードでシェアしようとすると、サムネイルにog:imageで指定したものとは違うものが表示されていました。よくみると、サイトのbodyタグ内に一番最初に出てくるimgタグのsrc画像になっていた。

TwitterやFacebookだと問題なくog:imageで指定した画像が出ているのに、LinkedInだけおかしい。原因究明と解決にむけ調査することに。

やったこと

LinkedInのPOST INSPECTORで検証

https://www.linkedin.com/post-inspector/

TwitterやFacebookのシェアデバッガーみたいなもの。

description文が長いとかそういうエラーは出ましたが、　og:imageに関係するものはなく。

URL末尾に ?1 をつけるとキャッシュクリアしてくれるらしいという情報みたんですが効果なし。

metaタグの修正

上記のデバッガーで、og:imageのmetaタグに name="image" が入っていて、サイトのほうには入れてなかったので入れてみるも効果なし。

canonical urlの指定

<link rel=”canonical”>タグでURL正規化を明記するも効果なし。

最終手段：非表示imgの設置

bodyタグの冒頭にあるimgタグの画像がサムネイルになってしまう、という不具合なので、bodyタグ直後にimgタグを配置しsrcにog:imageと同じものを指定。img自体はcssで display none で見えなくする。

これも無駄骨だった。

解決：headタグの明記

最終手段もダメで諦めかけていたところ、htmlソースにheadタグがないことを同僚に指摘いただきました。

本サイトはGoogleのWeb starter kitを利用していて、kit中のgulpタスクでHTMLの最適化とMinifyしたときに、headタグ、bodyタグなど、HTML5で省略可なタグを省略していました。

stack overflowにこんなコメントが

In my case it seemed that LinkedIn Parser is really poor to the point that if your HTML file doesn’t have the <head> tag (which is not required by the spec) It will simply ignore everything where the bellow wouldn’t work

https://stackoverflow.com/questions/35201679/linkedin-doesnt-fetch-metadata-when-sharing-website/37787650#37787650

要訳すると、LinkedInのパーサは、headタグのないHTMLファイルの場合はmetaタグを無視するそう。

これだ！とわかってheadタグを手動で追加すると、無事og:imageが表示されました🎉

おわりに

調査段階で並行して（ダメ元で）LinkedInのヘルプに問い合わせてたんですが、技術的なことはstack overflowで質問してね、という感じだったのが面白かった。

参考