jquery で meta や link 情報を上書きする方法

jquery で meta や link 情報を上書きする方法を紹介します。

1. jquery で meta や link 情報を上書きする方法
2. 新たな情報を追加する方法

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 情報を上書きする方法を紹介しました。