Jak dynamicznie zmieniać tytuł strony internetowej?

Mam stronę internetową, która implementuje zestaw kart, z których każda pokazuje inną treść. Kliknięcia karty nie odświeżają strony, ale ukrywają / odkrywają zawartość po stronie klienta.

Teraz trzeba zmienić tytuł strony zgodnie z zakładką wybraną na stronie (z powodów SEO). czy to możliwe? Czy ktoś może zaproponować rozwiązanie umożliwiające dynamiczną zmianę tytułu strony za pomocą javascript bez ponownego ładowania strony?

Aktualizacja : zgodnie z komentarzami i odniesieniami do SearchEngineLand większość robotów indeksujących indeksuje zaktualizowany tytuł. Poniższa odpowiedź jest nieaktualna, ale kod nadal obowiązuje.

Możesz po prostu zrobić coś takiego, document.title = "This is the new page title.";ale to całkowicie zniweczy cel SEO. Większość robotów przede wszystkim nie obsługuje javascript, więc jako tytuł strony wezmą wszystko, co jest w elemencie.

Jeśli chcesz, aby było to zgodne z większością ważnych robotów indeksujących, będziesz musiał zmienić sam tag tytułowy, co wiązałoby się z przeładowaniem strony (PHP lub podobnym). Nie będziesz w stanie tego obejść, jeśli chcesz zmienić tytuł strony w sposób widoczny dla robota.

Chcę się przywitać z przyszłości :) Rzeczy, które wydarzyły się ostatnio:

1. Google uruchamia teraz JavaScript w Twojej witrynie ¹
2. Ludzie używają teraz takich rzeczy jak React.js, Ember i Angular do uruchamiania złożonych zadań javascript na stronie, a Google wciąż indeksuje je ¹
3. możesz użyć interfejsu API historii HTML5 (pushState, React-Router, Ember, Angular), który pozwala robić rzeczy takie jak mieć osobne adresy URL dla każdej karty, którą chcesz otworzyć, a Google zindeksuje to ¹

Aby odpowiedzieć na pytanie, możesz bezpiecznie zmienić tytuł i inne metatagi z javascript (możesz także dodać coś takiego jak https://prerender.io, jeśli chcesz obsługiwać wyszukiwarki inne niż Google), po prostu udostępnij je jako osobne adresy URL ( w przeciwnym razie skąd Google wiedziałby, że są to różne strony wyświetlane w wynikach wyszukiwania?). Zmiana tagów związanych z SEO (po zmianie strony przez kliknięcie czegoś) jest prosta:

if (document.title != newTitle) {
    document.title = newTitle;
}
$('meta[name="description"]').attr("content", newDescription);

Tylko upewnij się, że css i javascript nie są zablokowane w pliku robots.txt, możesz użyć Fetch jako usługi Google w Narzędziach Google dla webmasterów.

1: http://searchengineland.com/tested-googlebot-crawls-javascript-heres-learned-220157

Nie widzę, jak zmiana tytułu strony za pomocą Javascript pomoże SEO. Większość (lub wszystkie) botów wyszukiwania nie uruchamia Javascript i odczytuje tylko początkowo załadowany tytuł, którym jest narzut.

Jeśli chcesz pomóc SEO, musisz zmienić tytuł strony w zapleczu i obsługiwać różne wersje strony.

Zastosowanie document.title.

Zobacz także tę stronę, aby poznać podstawowy samouczek.

Kod jest
document.title = 'test'

Istnieje wiele sposobów zmiany tytułu, dwa główne są takie:

Wątpliwa metoda

Umieść tag tytułu w HTML (np. <title>Hello</title>), A następnie w javascript:

let title_el = document.querySelector("title");

if(title_el)
    title_el.innerHTML = "World";

Oczywiście poprawna metoda

Najprościej jest użyć metody dostarczonej przez Document Object Model (DOM)

document.title = "Hello World";

Ta pierwsza metoda służy do zmiany znaczników znajdujących się w treści dokumentu. Używanie tej metody do modyfikowania znaczników meta-danych, takich jak te znalezione w głowie (jak title), jest co najmniej wątpliwą praktyką, nie jest idiomatyczne, na początku niezbyt dobry styl, a może nawet nie jest przenośne. Jedną z rzeczy, których możesz być pewien, jest to, że będzie drażnić innych programistów, jeśli zobaczą title.innerHTML = ...w utrzymywanym kodzie.

To, co chcesz iść, to ta druga metoda. Ta właściwość jest podana w specyfikacji DOM specjalnie w celu, jak sugeruje nazwa, zmiany tytułu.

Zauważ również, że jeśli pracujesz z XUL, możesz chcieć sprawdzić, czy dokument został załadowany, zanim spróbujesz ustawić lub uzyskać tytuł, ponieważ w przeciwnym razie wywołujesz undefined behavior(tutaj są smoki), co jest przerażającą samą koncepcją. Może się to zdarzyć lub nie przez JavaScript, ponieważ dokumenty w DOM nie muszą koniecznie dotyczyć JavaScript. Ale XUL jest całą inną bestią, więc dygresuję.

Mówiąc o .innerHTML

Dobrą radą, o której należy pamiętać, jest to, że używanie .innerHTMLjest na ogół niechlujne. Użyj appendChildzamiast tego.

Chociaż dwa przypadki, w których nadal uważam .innerHTMLsię za przydatne, obejmują wstawienie zwykłego tekstu do małego elementu ...

label.innerHTML = "Hello World";
// as opposed to... 
label.appendChild(document.createTextNode("Hello World"));
// example:
el.appendChild(function(){
    let el = document.createElement("span");
    el.className = "label";
    el.innerHTML = label_text;
    return el;
}());

... i opróżnianie pojemnika ...

container.innerHTML = "";
// as opposed to... umm... okay, I guess I'm rolling my own
[...container.childNodes].forEach(function(child){
    container.removeChild(child);
});

Korzystanie z document.title to sposób na osiągnięcie tego w JavaScript, ale jak to ma pomóc w SEO? Boty zazwyczaj nie wykonują kodu javascript podczas przeglądania stron.

Nowoczesne roboty indeksujące są w stanie analizować dynamicznie generowane treści w DOM, więc korzystanie z nich document.title = ...jest całkowicie w porządku.

Będziesz musiał ponownie wyświetlić stronę z nowym tytułem, aby każdy robot mógł zauważyć zmianę. Robiąc to za pomocą javascript, przyniesie korzyść tylko ludzkiemu czytelnikowi, roboty nie zamierzają wykonać tego kodu.

dla tych, którzy szukają wersji npm, jest do tego cała biblioteka:

npm install --save react-document-meta

import React from 'react';
import DocumentMeta from 'react-document-meta';

class Example extends React.Component {
  render() {
    const meta = {
      title: 'Some Meta Title',
      description: 'I am a description, and I can create multiple tags',
      canonical: 'http://example.com/path/to/page',
      meta: {
        charset: 'utf-8',
        name: {
          keywords: 'react,meta,document,html,tags'
        }
      }
    };

    return (
      <div>
        <DocumentMeta {...meta} />
        <h1>Hello World!</h1>
      </div>
    );
  }
}

React.render(<Example />, document.getElementById('root'));

Być może możesz załadować do tytułu wszystkie tytuły zakładek w jednym ciągu, a następnie po załadowaniu jednej z zakładek zmień tytuł za pomocą javascript

np .: najpierw ustaw tytuł

my app | description | contact | about us | 

po załadowaniu jednej z kart uruchom:

document.title = "my app | tab title";

Jednym ze sposobów, który przychodzi na myśl, który może pomóc w SEO i nadal ma strony kart, ponieważ są, to użycie nazwanych kotwic, które odpowiadają każdej karcie, jak w:

http://www.example.com/mypage#tab1, http://www.example.com/mypage#tab2, etc.

Trzeba będzie mieć przetwarzanie po stronie serwera, aby przeanalizować adres URL i ustawić początkowy tytuł strony, gdy przeglądarka wyświetli stronę. Chciałbym też zrobić tę kartę „aktywną”. Gdy strona zostanie załadowana, a rzeczywisty użytkownik przełącza karty, możesz użyć javascript do zmiany, document.titlejak stwierdzili inni użytkownicy.

Zastosowanie document.title. Przyda się w większości rzeczy, ale zniszczy SEO na twojej stronie.

Przykład:

document.write("title - " + document.title + "<br>");
document.title = "New title here!";
// Notice: this will defeat purpose of SEO. Not useful for SEO-friendly sites.
document.write("title - " + document.title + "<br>");

body {
  font-family: Consolas, 'Courier New', monospace;
}

<!DOCTYPE html>
<html>
  <head><title>Old title</title></head>
  <body><p>
    Lorem ipsum dolor sit amet, at movet detraxit mediocritatem eam, nam iusto abhorreant ne. Ei pro          debet adolescens voluptaria, eu minim scaevola conceptam vel. Vim ea torquatos constituto                complectitur, usu eu civibus insolens eleifend. Ex ubique quaerendum his.

  </p></body>
</html>

Możesz użyć JavaScript. Niektóre boty, w tym Google, wykonają JavaScript dla korzyści SEO (pokazując poprawny tytuł w SERP).

document.title = "Google will run this JS and show the title in the search results!";

Jest to jednak bardziej skomplikowane, ponieważ wyświetlasz i ukrywasz karty bez odświeżania strony lub zmiany adresu URL. Może dodanie kotwicy pomoże, jak twierdzą inni. Może być konieczne cofnięcie mojej odpowiedzi.

Artykuły przedstawiające pozytywne wyniki: http://www.aukseo.co.uk/use-javascript-to-generate-seo-friendly-title-tags-1275/ http://www.ifinity.com.au/2012/10 / 04 / Changing_a_Page_Title_with_Javascript_to_update_a_Google_SERP_Entry

Nie zawsze zakładaj, że bot nie uruchomi JavaScript. http://searchengineland.com/tested-googlebot-crawls-javascript-heres-learned-220157 Google i inne wyszukiwarki wiedzą, że najlepsze wyniki do indeksowania to wyniki, które zobaczy rzeczywisty użytkownik końcowy w przeglądarce, w tym JavaScript.

Ponieważ wyszukiwarki ignorują większość skryptów javascript, musisz to zrobić, aby wyszukiwarki mogły indeksować się przy użyciu kart bez użycia Ajax. Ustaw każdą kartę jako link z odnośnikiem, który ładuje całą stronę z wybraną kartą. Wtedy strona może mieć ten tytuł w tagu.

Program obsługi zdarzeń onclick może nadal ładować strony za pośrednictwem ajax dla osób przeglądających.

Aby zobaczyć strony tak, jak je widzą większość wyszukiwarek, wyłącz Javascript w swojej przeglądarce i postaraj się, aby klikanie kart powodowało załadowanie strony z wybraną kartą i poprawnym tytułem.

Jeśli ładujesz za pośrednictwem ajax i chcesz dynamicznie zmienić tytuł strony za pomocą samego Javascript, to:

document.title = 'Put the new title here';

Jednak wyszukiwarki nie zobaczą tej zmiany w javascript.

Ale w celu uzyskania SEO pasuje

Musisz przeładować stronę, gdy strona się zmieni, aby wyszukiwarka zobaczyła różne tytuły itp.

Upewnij się więc, że przeładowanie strony działa najpierw, a następnie dodaj zmiany document.title

Chcę tylko coś tutaj dodać: zmiana tytułu za pomocą JavaScript jest faktycznie przydatna, jeśli aktualizujesz bazę danych za pomocą AJAX, więc tytuł zmienia się bez konieczności odświeżania strony. Tytuł faktycznie zmienia się za pomocą języka skryptowego po stronie serwera, ale zmiana go za pomocą JavaScript jest tylko użytecznością i interfejsem użytkownika, który sprawia, że ​​użytkownik jest bardziej przyjemny i płynny.

Teraz, jeśli zmieniasz tytuł za pomocą JavaScript tylko do cholery, nie powinieneś tego robić.

Google wspomniał, że wszystkie pliki js są renderowane, ale w rzeczywistości straciłem tytuł i inne metatagi, które zostały dostarczone przez Reactjs na tej stronie i faktycznie straciłem pozycję w Google! Dużo szukałem, ale wydaje się, że wszystkie strony muszą być wstępnie renderowane lub za pomocą SSR (renderowania po stronie serwera), aby mieć przyjazny dla SEO protokół!
Rozwija się do Reactjs, Angularjs itp.
Krótko mówiąc, każda strona, która ma źródło widoku strony w przeglądarce, jest indeksowana przez wszystkie roboty, jeśli prawdopodobnie Google nie może indeksować, ale inni pomijają indeksowanie!

Najprostszym sposobem jest usunięcie <title>tagu z index.html i dołączenie

<head>
<title> Website - The page </title></head>

na każdej stronie w sieci. Pająki to znajdą i będą wyświetlane w wynikach wyszukiwania :)