‼️

ブログのアイキャッチに余分な文字が追加される原因と対応策

2023/09/06に公開

こんにちは、エムアイ・ラボです。
今回はちょっとピンポイントなトラブルの原因と対応策をご紹介します。

何が起こったの？

少し前ですが、Zennブログで投稿した記事をTwitterやFBで紹介したところ、
アイキャッチに表示されているタイトルの後ろに
不要な文字が追加されてしまいました。。
「2028」が2つも・・・？
一体なに？
せっかく記事を書いてくれた方に申し訳なくて、とても焦りました。

原因としてはタイトルに改行が入っていたからでした。
試しにタイトルをコピペしてテキストエディタで1行目に貼り付けると
なぜか改行されています。（添付はテキストエディタのスクショです）
よく見てみるとなんと、「学んだこと」の後ろと2行目に改行が入っています！

「2028」はU+2028 LINE SEPARATOR (行分割子)と呼ばれる改行コードのようです。
テキストエディタの改行コード設定のプルダウンにも載っています。

打ち直す、または改行を抜いた状態でコピペする（私の場合は打ち直しても打ち直してもなぜか改行が入ってしまう不思議な現象が起こっていたので、最終的には必要な文字だけをコピペしました）
記事のソースを開き、headタグ内の「og:image」のcontentに設定されているリンクを直接叩いて適切なアイキャッチになっていることを確認する

ちなみにheadタグ内の「og:image」はOGPという、SNSでシェアするときに必要なHTML要素です。

すでにTwitterやFBに投稿してしまった場合は（私です）
それぞれキャッシュを持っているので、反映に時間がかかるかもしれません。

Zennサポートチームの方、社内のエンジニアさん、ありがとうございました。
Zennサポートチームの方には迅速に丁寧にご対応いただきましたし、
社内のエンジニアさんたちは業務で忙しい中、
「こうじゃないかな？」とアドバイスしてくれてとてもありがたかったです。

どなたかのお役に立てたら嬉しいです。

エムアイ・ラボでは一緒に開発に携わってくれるエンジニアを積極的に採用中です。
よかったらカジュアル面談でお話ししてみませんか。
ぜひお気軽にご連絡ください。