jquery で meta や link 情報を上書きする方法
最終更新日 - 公開日 2019.10.22
by
jquery で meta や link 情報を上書きする方法を紹介します。
jquery で meta や link 情報を上書きする方法
jquery で meta や link 情報を上書きするには、該当要素を見つけてその項目を上書きする処理を追加します。
例えば、description を上書きしたいときは、jquery を読み込んだ上で、次のコードを追加します。
<script>
$(function(){
$("meta[name ='description']").attr('content','ディスクリプション');
});
</script>
meta や name の値を変えれば、これ以外の値を上書することができます。
コードがきちんと上書きされているかを確認するためには「要素の検証」などの検証モードでソースコード確認してください。
例えば「ソースの表示」などでは処理が走る前のソースコードが表示されるので、「要素の検証」などでなければ上書きが確認できません。
フェイスブックの Open Graph オブジェクトデバッガーでは、情報が反映されない場合があります。ご注意ください。
新たな情報を追加する方法
上書きしたい link タグが head タグ内にない場合は追加することもできます。
この方法で、外部のスタイルシートを読み込むことが可能です。
例えば、新たな link を追加したい場合は、次のコードを追加します。
<script>
$(function(){
var style = '<link rel="stylesheet" href="https://example.com/style.css">';
$('head link:last').after(style);
});
</script>
まずは追加したい内容を変数に代入します。
次に、用意した変数をどのタイミングで表示させるかを指定します。
今回は head タグ 内の link タグの last(最後)に表示します。
この場合も、確認は「要素の検証」などの検証モードで確認してください。
まとめ
jquery で meta や link 情報を上書きする方法を紹介しました。