Czy można użyć JavaScript do zmiany metatagów strony?

114

Jeśli umieszczę element div w nagłówku i wyświetlę: none, niż użyj JavaScript, aby go wyświetlić, czy to zadziała?

Edytować:

Mam rzeczy załadowane w AJAX. Ponieważ mój AJAX zmienia „główną” część witryny, chcę również zmienić metatagi.

javascript jquery meta-tags TIMEX
źródło
47
to jak noszenie buta jako kapelusza
Ben
8
lub używając edytora tekstu jako ide. Nie czekaj, to jest uważane za fajne.
Dan Rosenstark
23
Masz rację, jestem głupi
TIMEX
2
Cześć TIMEX, może w jego miejsce jest zmiana zaakceptowanej odpowiedzi? Jeśli nie ma innego powodu, jak dać Byronowi przerwę w głosowaniu przeciw jego przestarzałej odpowiedzi.
Alex
1
Chcę to zrobić, aby móc zarządzać metatagami (w szczególności) za pomocą mojego środowiska javascript, a następnie pozwolić mojemu silnikowi prerenderowania zapisać / buforować to dla robotów indeksujących. W przeciwnym razie potrzebowałbym dodatkowego oprogramowania pośredniczącego, aby określić tagi z mojego interfejsu API przed renderowaniem indeksu mojego SPA, co spowolniłoby ładowanie, po pierwsze ...
Soft Bullets

Odpowiedzi:

161

Tak, możesz to zrobić.

Istnieje kilka interesujących przypadków użycia: niektóre przeglądarki i wtyczki analizują elementy meta i zmieniają ich zachowanie dla różnych wartości.

Przykłady

Skype: wyłącz parser numeru telefonu

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

iPhone: wyłącz parser numeru telefonu

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

Google Chrome Frame

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

Definicja widocznego obszaru dla urządzeń mobilnych

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

Ten można zmienić za pomocą JavaScript. Zobacz: Poprawka dotycząca błędu skali rzutni iPhone'a

Opis meta

Niektóre programy użytkownika (na przykład Opera) używają opisu zakładek. Tutaj możesz dodać spersonalizowane treści. Przykład:

<!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>

Nie chodzi więc tylko o wyszukiwarki.

fuxia
źródło
9
Podejrzewam, że większość takich meta ma efekty, których nie można zmienić po załadowaniu strony. Ale tak, meta to znacznie więcej niż tylko keywordsi description.
bobince
2
@bobince: Właściwie, pasek SKYPE_TOOLBAR nadal działa, jeśli wstawisz go za pomocą js (co jest przydatne, ponieważ walidator html5 nie lubi tego metatagu).
Daedalus Fall
1
@DaedalusFall: tak, myślę, że możesz to zrobić tylko z document.writenagłówkiem, jest za późno, aby to zmienić po załadowaniu strony, ponieważ Skype już zniekształcił DOM, okropna rzecz!
bobince
1
Jest to bardzo przydatne przy udostępnianiu w serwisach takich jak Facebook. Na przykład, aby zmienić element og: title: $('meta[property="og:title"]').replaceWith('<meta property="og:title" content="New Title">');
bdanin
2
Możesz z tym zrobić fajne rzeczy. Zmieniam kolor paska adresu Chrome, gdy zmienia się slajd w nagłówku. const meta = document.querySelector('meta[name=theme-color]'); meta.setAttribute("content", colors[slideIndex]);Chrome na Androida wykrywa aktualizację i zmienia kolor
Dominic Bartl
150

Tak to jest.

Np. Aby ustawić opis meta:

document.querySelector('meta[name="description"]').setAttribute("content", _desc);
jayms
źródło
23
Cieszę się, że ktoś udzielił odpowiedzi w czystym js (zgodnie z prośbą w pytaniu)!
Miękkie kule
Cześć jayms. Dzięki za wskazówkę. Ale próbowałem tej metody, aby spróbować zmienić tag og: title, ale nie zadziałało. Oto jak to zrobiłem: document.querySelector ('meta [name = "og: title"]'). SetAttribute ("content", "Przykład z metatagiem tytułu"); Jakieś pomysły?
Jorge Mauricio
1
Wygląda na to, że musisz zapytać o propertyatrybut, a nie nameatrybut, np.meta[property="og:title"]
jayms
69

Użyłbyś czegoś takiego (z jQuery):

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

Byłoby to jednak w większości bezcelowe, ponieważ metatagi są zwykle pobierane tylko wtedy, gdy dokument jest ładowany, zwykle bez wykonywania kodu JavaScript.

MiffTheFox
źródło
7
Działa nawet z selektorami takimi jak $('meta[property=og:somestuff]'), które podejrzewałem, kolidowałoby ze składnią selekcji jQuery z powodu dwukropka.
pau.moreno
8
W przypadku, gdy ktoś inny szuka tego dokładnego rozwiązania, musisz umieścić cudzysłowy wokół og: somestuff - potrzebowałem zawartości tagu obrazka, to był mój kod: var imgurl = $ ("meta [property = 'og: image '] "). attr (" zawartość ");
Daniel
2
Potwierdzono, że działa dla ustawienia meta viewport (potrzebne do włączenia / wyłączenia zoomu dla niektórych podstron w jQuery Mobile). Dzięki!
NPC
1
@stealthcopter Mogę zweryfikować, że tak nie jest :( czekaj, tak, ale zmiany nie są widoczne w oknie „widoku źródła”
FFoxa
1
@yPhil To jest javascript (lub jQuery), więc wszelkie zmiany, które wprowadzasz w DOM, nie są odzwierciedlane podczas przeglądania kodu źródłowego z przeglądarki. Odzwierciedla to, gdy używasz narzędzia programisty do przeglądania źródła. Źródło przeglądarki jest ładowane tylko raz podczas ładowania strony. Żądania ajax nie są ładowane.
Zubair1
34

Możesz zmienić meta, na przykład za pomocą wywołań jQuery, takich jak te:

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

Myślę, że na razie ma to znaczenie, ponieważ Google powiedział , że zaindeksuje zawartość ajax za pośrednictwem #!hashesi _escaped_fragment_wywołań. A teraz mogą to zweryfikować (nawet automatycznie, w przeglądarkach bezgłowych, patrz link „Tworzenie migawek HTML” na wspomnianej powyżej stronie), więc myślę, że to sposób dla zapalonych specjalistów od SEO.

eyedmax
źródło
3
Dziękuję Ci za to. Właśnie rozwiązałem mój problem. Ponieważ facebook ma otwarty wykres. Witryna, którą tworzę, ma wtyczkę Historia jQuery i tagi hash. Tak więc adres URL otwartego wykresu FB i opis muszą zostać zmienione, gdy pojawi się zmiana hash. +1 za świetną odpowiedź i brak negatywnego nastawienia do uczciwego pytania.
Damien Keitel
5
Właściwie teraz Google może uruchamiać javascript bez potrzeby tworzenia migawek stron, więc teraz dynamiczne metatagi mają duże znaczenie!
Francesco Abbruzzese
33

Zdecydowanie jest możliwe użycie JavaScript do zmiany metatagów strony. Oto podejście tylko w 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!!";

Po sprawdzeniu, że Google indeksuje te zmiany po stronie klienta dla powyższego kodu.

Tim Moses
źródło
3
Ciekawy! Dziękuję za poinformowanie mnie o element = collection[name]składni.
jayms
11

meta-tagi są częścią domeny i można do nich uzyskać dostęp i zmienić domyślną opcję -i, ale wyszukiwarki (główni użytkownicy metatagów) nie zobaczą zmiany, ponieważ javascript nie zostanie wykonany. więc jeśli nie zmieniasz metatagu (przychodzi na myśl odświeżenie), co ma wpływ na przeglądarkę, może to być mało przydatne?

futtta
źródło
3
+1 - trafiłem na to pytanie, ponieważ zastanawiałem się konkretnie nad odświeżaniem meta. Tworzę aplikację, która używa odpytywania Ajax do odświeżania danych na ekranie i chcę zapewnić prostą rezerwę dla przeglądarek, które nie mają włączonego javascript. Myślę, że mógłbym to osiągnąć, tworząc domyślnie metatag odświeżania i jeśli włączony jest javascript, po prostu usuń metatag. - Teraz, żeby zobaczyć, czy to faktycznie działa ...
jessegavin
@futtta, metatag opisu jest używany do opisów zakładek w Operze, więc w rzeczywistości istnieje korzyść dla użytkownika, że ​​można zmienić meta opis.
XP1
11

Powinno to być możliwe w ten sposób (lub użyj jQuery jak $('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
źródło
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">');
});
user3320390
źródło
6
Zacząłem od twojego przykładu, ale zdałem sobie sprawę, że nie musisz usuwać i ponownie dodawać metatagów. Możesz po prostu zmienić atrybut zawartości w następujący sposób:jQuery('meta[property="og:title"]').attr('content', "blubb1");
Tobias Beuving,
Masz rację @ user3320390. Usuwanie tagu różni się od jego zmiany. FB działa na to, co jest napisane w HTML, a NIE na wartości tagów.
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
źródło
5

Możesz użyć prostszego i lżejszego rozwiązania:

document.head.querySelector('meta[name="description"]').content = _desc
Ali Seyfollahi
źródło
2

proste dodawanie i oznaczanie div do każdego przykładu metatagu

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

teraz jak normalna zmiana div na ex. n kliknij

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

tagi zmiany funkcji za pomocą jQuery

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

}
Burhan Ibrahimi
źródło
2

Jeśli w ogóle nie mamy metatagu, możemy użyć następującego:

var _desc = 'Out description';
var meta = document.createElement('meta');
meta.setAttribute('name', 'description');
meta.setAttribute('content', _desc);
document.getElementsByTagName('head')[0].appendChild(meta);
rzymski
źródło
2

Dla każdego, kto próbuje zmienić metatagi og: title (lub jakiekolwiek inne). Udało mi się to zrobić w ten sposób:

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

Zwróć uwagę, że „meta [property =" og: title "]” zawiera słowo PROPERTY, a nie NAME.

Jorge Mauricio
źródło
1

Nie, element div jest elementem body, a nie elementem head

EDYCJA: Wtedy jedyne, co otrzymają SE, to podstawowy HTML, a nie zmodyfikowany przez Ajax.

Ben
źródło
Mam nadzieję, że to nieprawda.
David Spector,
1

Tak, możliwe jest dodawanie metatagów za pomocą JavaScript. Zrobiłem w moim przykładzie

Android nie respektuje usuwania metatagów?

Ale nie wiem, jak to zmienić, a potem usunąć. Btw, w moim przykładzie ... po kliknięciu przycisku „DODAJ” dodaje tag i zmienia się odpowiednio widoczny obszar, ale nie wiem, jak go cofnąć (usunąć, w Androidzie) .. Chciałbym, aby był firebug dla Androida, więc Widziałem, co się dzieje. Firefox usuwa tag. jeśli ktoś ma jakieś pomysły na ten temat, proszę zanotować to w moim pytaniu.

Chamilyan
źródło
0

mają to w indeksie

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

mają to w plikach ajaxfiles og: type "og: title" og: description i og: image

i dodaj to również

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

następnie dodaj js po ajaxCall

FB.XFBML.parse();

Edycja: Możesz następnie wyświetlić prawidłowy tytuł i obraz na Facebooku w douments txt / php (moje mają po prostu nazwy .php jako rozszerzenia, ale są to bardziej pliki txt). Mam wtedy metatagi w tych plikach i łącze z powrotem do indeksu w każdym dokumencie, a także łącze meta w pliku indeksu dla każdego podpliku.

jeśli ktoś zna lepszy sposób na zrobienie tego, byłbym wdzięczny za wszelkie dodatki :)

sunto
źródło
To nie wydaje się być odpowiedzią na pytanie, jak dynamicznie dodawać metatagi?
Alex
0

Wydaje się, że działa to w przypadku małej sztywno geometrycznie ustawionej aplikacji, w której musi działać zarówno w przeglądarkach mobilnych, jak i innych z niewielkimi zmianami, więc konieczne jest znalezienie stanu przeglądarki mobilnej / niemobilnej oraz ustawienie obszaru roboczego na szerokość urządzenia w przypadku telefonów komórkowych. Ponieważ skrypty można uruchamiać z nagłówka, poniższy js w nagłówku wydaje się zmieniać metatag dla device-width przed załadowaniem strony. Można zauważyć, że użycie navigator.userAgent jest określone jako eksperymentalne. Skrypt musi podążać za wpisem metatagu, aby został zmieniony, więc należy wybrać jakąś początkową zawartość, a następnie zmienić pod pewnymi warunkami. 

<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
źródło