TwitterカードのURLを自動取得にしたい

作成日:2020/07/23 更新日:----/--/--

BMW and more(デジタル)のインデックスページ
Mastodon(お一人様インスタンス)

人気ブログランキング

ブログランキング・にほんブログ村へにほんブログ村

PVアクセスランキング にほんブログ村

自動取得にしたい動機

うちのサイト、テキストエディタで更新をしている。タイトル等は一括で変換すればいいのだがTwitterカードのURLだけは手動で書き換える必要があり更新漏れが多くて何とかならないかと考えていた。要はmetaタグを動的に書き出せればいいので。

自動取得の対応方法

検索したところ以下のサイトが参考になった。
headタグ内のmeta情報を取得・書き換えを行う。Javascript・jQuery! | | ルディの脳内ブログ
HEADタグ内にスクリプトからMETAタグを追加する: maggothand.blog
ひとつ目のサイトにあったように検索して置き換えでもいいが処理的にはダイレクトに追加の方が速いかなと思いふたつ目のサイトの方法に。タイトルも自動で取れるが一括変換で対応出来るのでそこはやめておいた。なるべく軽くしておきたい。

また書き換えが上手くいっているかはソースの表示ではわからなく、ブラウザの開発機能の要素の確認でチェックする必要がある。それでTwitterカード、ちゃんと認識するかな?とりあえず試してみよう。

おまけ

ついでにhead内のタグの順序も少し気にしてみたがcharsetを先頭にスクリプト系を後方にという以外はあまり気にしなくてもよさそうであった。titleを前の方に持っていこうかと思ったが(スクリプトで拾う場合はスクリプトの前にある必要がありそう)metaの中にtitleが入ってきて綺麗ではないのでやめた。