Apakah mungkin menggunakan JavaScript untuk mengubah meta-tag halaman?

114

Jika saya meletakkan div di head dan display: none, daripada menggunakan JavaScript untuk menampilkannya, apakah ini akan berhasil?

Edit:

Saya memiliki barang yang dimuat di AJAX. Dan saat AJAX saya mengubah bagian "utama" situs, saya juga ingin mengubah meta-tagnya.

javascript jquery meta-tags TIMEX
sumber
47
itu seperti memakai sepatu sebagai topi
Ben
8
atau menggunakan editor teks sebagai ide. Tidak tunggu, itu dianggap keren.
Dan Rosenstark
23
Anda benar, saya bodoh
TIMEX
2
Hai TIMEX, mungkinkah ada perubahan jawaban yang diterima? Jika tidak ada alasan lain selain memberi Byron jeda pada suara negatif untuk jawaban yang sudah ketinggalan zaman.
Alex
1
Saya ingin melakukan ini agar saya dapat mengelola tag meta (khususnya og) dengan kerangka kerja javascript saya, kemudian meminta mesin prapenguraian saya menulis / menyimpan ini untuk perayap. Jika tidak, saya memerlukan middleware tambahan untuk menentukan tag dari API saya sebelum merender indeks SPA saya, yang akan memperlambat pemuatan, untuk satu hal ...
Soft Bullets

Jawaban:

161

Ya, Anda bisa melakukannya.

Ada beberapa kasus penggunaan yang menarik: Beberapa browser dan plugin mengurai elemen meta dan mengubah perilakunya untuk nilai yang berbeda.

Contoh

Skype: Matikan pengurai nomor telepon

<meta name="SKYPE_TOOLBAR" content="SKYPE_TOOLBAR_PARSER_COMPATIBLE">

iPhone: Matikan pengurai nomor telepon

<meta name="format-detection" content="telephone=no">

Google Chrome Frame

<meta http-equiv="X-UA-Compatible" content="chrome=1">

Definisi viewport untuk perangkat seluler

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Yang ini bisa diubah dengan JavaScript. Lihat: Perbaikan untuk bug skala viewport iPhone

Deskripsi meta

Beberapa agen pengguna (Opera misalnya) menggunakan deskripsi untuk bookmark. Anda dapat menambahkan konten yang dipersonalisasi di sini. Contoh:

<!DOCTYPE html>
<title>Test</title>
<meta name="description" content="this is old">
<script type='text/javascript' src='http://code.jquery.com/jquery-1.8.2.js'></script>

<button>Change description</button>

<script type='text/javascript'>
$('button').on('click', function() {
    // Just replacing the value of the 'content' attribute will not work.
    $('meta[name=description]').remove();
    $('head').append( '<meta name="description" content="this is new">' );
});
</script>

Jadi, ini bukan hanya tentang mesin pencari.

fuxia.dll
sumber
9
Saya menduga kebanyakan meta seperti ini memiliki efek yang tidak dapat diubah setelah halaman dimuat. Tapi ya, meta jauh lebih dari sekadar keywordsdan description.
bobince
2
@bobince: Sebenarnya, SKYPE_TOOLBAR masih berlaku jika Anda memasukkannya dengan js (yang berguna karena validator html5 tidak menyukai tag meta itu).
DaedalusFall
1
@DaedalusFall: ya, saya pikir Anda hanya dapat melakukan itu dengan document.writedi header, sudah terlambat untuk mengubahnya setelah halaman dimuat karena Skype sudah merusak DOM, hal yang mengerikan!
sejak
1
Ini sangat berguna dengan berbagi sosial ke layanan seperti Facebook. Misalnya, untuk mengubah elemen og: title: $('meta[property="og:title"]').replaceWith('<meta property="og:title" content="New Title">');
bdanin
2
Anda dapat melakukan beberapa hal keren dengan ini. Saya mengubah warna bilah alamat Chrome saat slide di header berubah. const meta = document.querySelector('meta[name=theme-color]'); meta.setAttribute("content", colors[slideIndex]);Chrome di Android mendeteksi pembaruan dan mengubah warna
Dominic Bartl
149

Ya itu.

Misalnya untuk mengatur meta-description:

document.querySelector('meta[name="description"]').setAttribute("content", _desc);
jayms
sumber
23
Senang seseorang memberikan jawaban di js murni (seperti yang diminta dalam pertanyaan)!
Soft Bullets
Hai jayms. Terima kasih atas tipnya. Tetapi saya mencoba metode ini untuk mencoba mengubah og: tag judul, tetapi tidak berhasil. Begini cara saya melakukannya: document.querySelector ('meta [name = "og: title"]'). SetAttribute ("content", "Example with title meta tag"); Ada ide?
Jorge Mauricio
1
Tampaknya Anda perlu menanyakan propertyatributnya, bukan nameatributnya, yaitumeta[property="og:title"]
jayms
69

Anda akan menggunakan sesuatu seperti (dengan jQuery):

$('meta[name=author]').attr('content', 'New Author Name');

Tetapi itu sebagian besar tidak ada gunanya karena tag meta biasanya hanya dihapus saat dokumen dimuat, biasanya tanpa menjalankan JavaScript apa pun.

MiffTheFox
sumber
7
Ia bahkan bekerja dengan penyeleksi seperti $('meta[property=og:somestuff]'), yang saya curigai akan berbenturan dengan sintaks pemilihan jQuery karena titik dua.
pau.moreno
8
Jika ada orang lain yang mencari solusi yang tepat ini, Anda perlu memberi tanda kutip di sekitar og: somestuff - Saya memerlukan konten tag gambar, ini kode saya: var imgurl = $ ("meta [property = 'og: image) '] "). attr (" konten ");
Daniel
2
Dikonfirmasi bahwa ini berfungsi untuk pengaturan area pandang meta (diperlukan ini untuk mengaktifkan / menonaktifkan zoom untuk subhalaman tertentu di jQuery Mobile). Terima kasih!
NPC
1
@stealthcopter Saya dapat memverifikasi bahwa ini tidak :( tunggu, memang demikian, tetapi perubahan tidak terlihat di jendela "lihat sumber"
FFox
1
@yPhil Ini adalah javascript (atau jQuery) jadi setiap dan semua perubahan yang Anda buat ke DOM tidak tercermin saat melihat kode sumber dari browser. Ini akan terlihat ketika Anda menggunakan Alat Pengembang untuk melihat sumber. Sumber browser dimuat hanya sekali ketika halaman dimuat .. Permintaan permintaan ajax tidak memuat halaman.
Zubair1
34

Anda dapat mengubah meta dengan, misalnya, panggilan jQuery, seperti ini:

$('meta[name=keywords]').attr('content', new_keywords);
$('meta[name=description]').attr('content', new_description);

Saya pikir itu tidak masalah untuk saat ini, karena google mengatakan bahwa mereka akan mengindeks konten ajax via #!hashesdan _escaped_fragment_panggilan. Dan sekarang mereka dapat memverifikasinya (bahkan secara otomatis, dengan browser tanpa kepala, lihat link 'Membuat Snapshot HTML' di halaman yang disebutkan di atas), jadi menurut saya ini adalah cara untuk orang-orang SEO hardcore.

eyedmax
sumber
3
Terima kasih untuk ini. Baru saja memecahkan masalah saya. Karena facebook memiliki grafik terbuka. Situs yang saya kembangkan memiliki plugin jQuery History dan tag hash. Jadi url dan deskripsi grafik terbuka FB perlu diubah jika ada perubahan hash. +1 untuk jawaban yang bagus dan tidak bersikap negatif terhadap pertanyaan yang adil.
Damien Keitel
5
Sebenarnya, sekarang google juga dapat menjalankan javascript tanpa perlu membuat cuplikan halaman, jadi sekarang metatag dinamis sangat penting!
Francesco Abbruzzese
33

Sangat mungkin untuk menggunakan Javascript untuk mengubah tag meta halaman. Berikut adalah pendekatan hanya Javascript:

document.getElementsByTagName('meta')["keywords"].content = "My new page keywords!!";
document.getElementsByTagName('meta')["description"].content = "My new page description!!";
document.title = "My new Document Title!!";

Saya telah memverifikasi bahwa Google mengindeks perubahan sisi klien ini untuk kode di atas.

Tim Moses
sumber
3
Menarik! Terima kasih telah membuat saya mengetahui element = collection[name]sintaksnya.
jayms
11

meta-tag adalah bagian dari dom dan dapat diakses dan -saya tebak- diubah, tetapi mesin pencari (konsumen utama meta-tag) tidak akan melihat perubahan karena javascript tidak akan dijalankan. Jadi, kecuali Anda mengubah meta-tag (menyegarkan kembali dalam pikiran) yang memiliki implikasi pada browser, ini mungkin sedikit berguna?

futtta
sumber
3
+1 - Saya mendapatkan pertanyaan ini karena saya bertanya-tanya secara khusus tentang penyegaran meta. Saya membuat aplikasi yang menggunakan polling ajax untuk menyegarkan data di layar dan saya ingin memberikan penggantian mentah untuk browser yang tidak mengaktifkan javascript. Saya berpikir bahwa saya dapat melakukannya dengan membuat tag meta refresh secara default dan jika javascript diaktifkan, hapus saja meta tag tersebut. - Sekarang untuk melihat apakah itu benar-benar bekerja ...
jessegavin
@futtta, tag deskripsi meta digunakan untuk deskripsi bookmark di Opera, jadi sebenarnya ada keuntungan bagi pengguna bahwa deskripsi meta Anda dapat diubah.
XP1
11

Seharusnya bisa seperti ini (atau gunakan jQuery seperti $('meta[name=author]').attr("content");):

<html>
<head>
<title>Meta Data</title>
<meta name="Author" content="Martin Webb">
<meta name="Author" content="A.N. Other">
<meta name="Description" content="A sample html file for extracting meta data">
<meta name="Keywords" content="JavaScript, DOM, W3C">

</head>

<body>
<script language="JavaScript"><!--
if (document.getElementsByName) {
  var metaArray = document.getElementsByName('Author');
  for (var i=0; i<metaArray.length; i++) {
    document.write(metaArray[i].content + '<br>');
  }

  var metaArray = document.getElementsByName('Description');
  for (var i=0; i<metaArray.length; i++) {
    document.write(metaArray[i].content + '<br>');
  }

  var metaArray = document.getElementsByName('Keywords');
  for (var i=0; i<metaArray.length; i++) {
    document.write(metaArray[i].content + '<br>');
  }
}
//--></script>
</body>

</html>
Mikael Svenson
sumber
10 
$(document).ready(function() {
  $('meta[property="og:title"]').remove();
  $('meta[property="og:description"]').remove();
  $('meta[property="og:url"]').remove();
  $("head").append('<meta property="og:title" content="blubb1">');
  $("head").append('<meta property="og:description" content="blubb2">');
  $("head").append('<meta property="og:url" content="blubb3">');
});
pengguna3320390
sumber
6
Saya memulai dengan contoh Anda tetapi menyadari bahwa Anda tidak perlu menghapus dan menambahkan kembali meta-tag. Anda cukup mengubah atribut-konten seperti ini:jQuery('meta[property="og:title"]').attr('content', "blubb1");
Tobias Beuving
Anda benar @ user3320390. Ini berbeda dengan menghapus tag daripada mengubahnya. FB bertindak untuk apa yang ditulis HTML dan BUKAN untuk nilai tag.
Pedro Ferreira
5 
var metaTag = document.getElementsByTagName('meta');
for (var i=0; i < metaTag.length; i++) {
    if (metaTag[i].getAttribute("http-equiv")=='refresh')
        metaTag[i].content = '666';
    if (metaTag[i].getAttribute("name")=='Keywords')
        metaTag[i].content = 'js, solver';
}
LanPartacz
sumber
5

Anda dapat menggunakan solusi yang lebih sederhana dan ringan:

document.head.querySelector('meta[name="description"]').content = _desc
Ali Seyfollahi
sumber
2

tambahkan sederhana dan atribut div untuk setiap contoh tag meta

<meta id="mtlink" name="url" content="">
<meta id="mtdesc" name="description" content="" />
<meta id="mtkwrds" name="keywords" content="" />

sekarang seperti perubahan div normal untuk ex. n klik

<a href="#" onClick="changeTags(); return false;">Change Meta Tags</a>

fungsi mengubah tag dengan jQuery

function changeTags(){
   $("#mtlink").attr("content","http://albup.com");
   $("#mtdesc").attr("content","music all the time");
   $("#mtkwrds").attr("content","mp3, download music, ");

}
Burhan Ibrahimi
sumber
2

Jika kita tidak memiliki meta tag sama sekali, maka kita dapat menggunakan yang berikut ini:

var _desc = 'Out description';
var meta = document.createElement('meta');
meta.setAttribute('name', 'description');
meta.setAttribute('content', _desc);
document.getElementsByTagName('head')[0].appendChild(meta);
Roma
sumber
2

Untuk siapa pun yang mencoba mengubah tag meta og: title (atau lainnya). Saya berhasil melakukannya dengan cara ini:

document.querySelector('meta[property="og:title"]').setAttribute("content", "Example with og title meta tag");

Perhatikan bahwa 'meta [property = "og: title"]' berisi kata PROPERTI, bukan NAMA.

Jorge Mauricio
sumber
1

Tidak, div adalah elemen body, bukan elemen head

EDIT: Maka satu-satunya hal yang akan didapat SE adalah HTML dasar, bukan yang dimodifikasi ajax.

Ben
sumber
Saya harap ini tidak benar.
David Spector
1

Ya, Anda dapat menambahkan metatag dengan Javascript. Saya lakukan dalam contoh saya

Android tidak menghormati penghapusan metatag?

Tapi, saya tidak tahu bagaimana mengubahnya selain menghapusnya. Btw, dalam contoh saya .. ketika Anda mengklik tombol 'TAMBAH' itu menambahkan tag dan viewport berubah masing-masing tetapi saya tidak tahu cara mengembalikannya kembali (hapus, di Android) .. Saya berharap ada firebug untuk Android jadi Saya melihat apa yang terjadi. Firefox memang menghapus tag tersebut. jika ada yang punya ide tentang ini harap dicatat jadi dalam pertanyaan saya.

Keluarga
sumber
0

memiliki ini di indeks

<link rel="opengraph" href="{http://yourPage.com/subdomain.php}"/>

miliki ini di ajaxfiles og: ketik "og: title" og: description dan og: image

dan tambahkan ini juga

<link rel="origin" href={http://yourPage.com}/>

lalu tambahkan js setelah ajaxCall

FB.XFBML.parse();

Sunting: Anda kemudian dapat menampilkan judul dan gambar yang benar untuk facebook di dokumen txt / php (milik saya hanya bernama .php sebagai ekstensi, tetapi lebih banyak file txt). Saya kemudian memiliki tag meta di file ini, dan tautan kembali ke indeks di setiap dokumen, juga tautan meta di file indeks untuk setiap subfile ..

jika ada yang tahu cara yang lebih baik untuk melakukan ini, saya akan menghargai tambahan apa pun :)

sunto
sumber
Ini sepertinya bukan jawaban untuk pertanyaan tentang bagaimana menambahkan meta-tag secara dinamis?
Alex
0

Ini tampaknya berfungsi untuk aplikasi yang disetel secara geometris secara kaku yang perlu dijalankan di browser seluler dan lainnya dengan sedikit perubahan, jadi perlu menemukan status browser seluler / non-seluler dan untuk seluler yang menyetel viewport ke lebar perangkat. Karena skrip dapat dijalankan dari header, js di bawah header tampaknya mengubah metatag untuk lebar perangkat Sebelum halaman dimuat. Orang mungkin mencatat bahwa penggunaan navigator.userAgent ditetapkan sebagai eksperimental. Skrip harus mengikuti entri metatag untuk diubah, jadi seseorang harus memilih beberapa konten awal, dan kemudian mengubah pada beberapa kondisi. 

<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script>  
  var userAgentHeader = navigator.userAgent ; 
  var browserIsMobileOrNot = "mobileNOT" ; 
  if( userAgentHeader.includes( "Mobi" ) ) { 
    browserIsMobileOrNot = "mobileYES" ; 
    //document.querySelector('meta[name="viewport"]').setAttribute( "content", "width=device-width, initial-scale=1.0" );
  } else { 
    browserIsMobileOrNot = "mobileNOT" ;  
    document.querySelector('meta[name="viewport"]').setAttribute( "content", "");
  }
</script>

<link rel="stylesheet" href="css/index.css">

. . . . . .

jcj52436999
sumber