Bagaimana cara mengubah judul halaman web secara dinamis?

Saya memiliki halaman web yang mengimplementasikan satu set tab yang masing-masing menampilkan konten berbeda. Klik tab tidak menyegarkan halaman tetapi menyembunyikan / menyembunyikan konten di sisi klien.

Sekarang ada persyaratan untuk mengubah judul halaman sesuai dengan tab yang dipilih pada halaman (untuk alasan SEO). Apakah ini mungkin? Dapatkah seseorang menyarankan solusi untuk secara dinamis mengubah judul halaman melalui javascript tanpa memuat ulang halaman?

Pembaruan : sesuai komentar dan referensi pada SearchEngineLand sebagian besar perayap web akan mengindeks judul yang diperbarui. Jawaban di bawah sudah usang, tetapi kode tersebut masih berlaku.

Anda bisa melakukan sesuatu seperti document.title = "This is the new page title.";,, tetapi itu akan benar-benar mengalahkan tujuan SEO. Sebagian besar perayap tidak akan mendukung javascript sejak awal, sehingga mereka akan mengambil apa pun yang ada dalam elemen sebagai judul halaman.

Jika Anda ingin ini kompatibel dengan sebagian besar perayap penting, Anda harus benar-benar mengubah tag judul itu sendiri, yang akan melibatkan memuat ulang halaman (PHP, atau sejenisnya). Anda tidak akan bisa menyiasatinya, jika Anda ingin mengubah judul halaman dengan cara yang dapat dilihat oleh perayap.

Saya ingin menyapa dari masa depan :) Hal-hal yang terjadi baru-baru ini:

1. Google sekarang menjalankan javascript yang ada di situs web Anda ¹
2. Orang-orang sekarang menggunakan hal-hal seperti React.js, Ember dan Angular untuk menjalankan tugas-tugas javascript kompleks pada halaman dan itu masih diindeks oleh Google ¹
3. Anda dapat menggunakan api sejarah html5 (pushState, react-router, ember, angular) yang memungkinkan Anda melakukan hal-hal seperti memiliki url terpisah untuk setiap tab yang ingin Anda buka dan Google akan mengindeks bahwa ¹

Jadi untuk menjawab pertanyaan Anda, Anda dapat dengan aman mengubah judul dan tag meta lainnya dari javascript (Anda juga dapat menambahkan sesuatu seperti https://prerender.io jika Anda ingin mendukung mesin pencarian non-Google), cukup buat mereka dapat diakses sebagai url terpisah ( kalau tidak, bagaimana Google akan tahu bahwa itu adalah halaman yang berbeda untuk ditampilkan dalam hasil pencarian?). Mengubah tag terkait SEO (setelah pengguna mengubah halaman dengan mengklik sesuatu) mudah:

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

Pastikan saja css dan javascript tidak diblokir di robots.txt, Anda dapat menggunakan Ambil sebagai layanan Google di Alat Webmaster Google.

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

Saya tidak bisa melihat bagaimana mengubah judul halaman melalui Javascript akan membantu SEO. Sebagian besar (atau semua) bot pencarian tidak menjalankan Javascript dan hanya akan membaca judul yang dimuat sebelumnya yaitu mark-up.

Jika Anda ingin membantu SEO, maka Anda perlu mengubah judul halaman di back-end dan menyajikan versi halaman yang berbeda.

Gunakan document.title.

Lihat halaman ini untuk tutorial dasar juga.

Kodenya adalah
document.title = 'test'

Ada banyak cara Anda dapat mengubah judul, dua utama, seperti ini:

Metode Yang Dipertanyakan

Letakkan tag judul di HTML (misalnya <title>Hello</title>), lalu di javascript:

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

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

Metode Yang Jelas Benar

Yang paling sederhana adalah dengan benar-benar menggunakan metode yang disediakan oleh Document Object Model (DOM)

document.title = "Hello World";

Metode yang pertama umumnya adalah apa yang akan Anda lakukan untuk mengubah tag yang ditemukan di badan dokumen. Menggunakan metode ini untuk mengubah tag meta-data seperti yang ditemukan di kepala (seperti title) adalah praktik yang patut dipertanyakan, tidak idiomatik, gaya yang tidak terlalu bagus untuk memulai, dan bahkan mungkin tidak portabel. Satu hal yang dapat Anda yakini adalah bahwa hal itu akan mengganggu pengembang lain jika mereka melihat title.innerHTML = ...kode yang mereka pertahankan.

Yang ingin Anda lakukan adalah metode yang terakhir. Properti ini disediakan dalam Spesifikasi DOM khusus untuk tujuan, seperti namanya, mengubah judul.

Perhatikan juga bahwa jika Anda bekerja dengan XUL, Anda mungkin ingin memeriksa bahwa dokumen telah dimuat sebelum mencoba untuk mengatur atau mendapatkan judul, karena jika tidak Anda memohon undefined behavior(di sini menjadi naga), yang merupakan konsep menakutkan dalam dirinya sendiri. Ini mungkin atau mungkin tidak terjadi melalui JavaScript, karena dokumen pada DOM tidak selalu berkaitan dengan JavaScript. Tapi XUL adalah binatang buas nother keseluruhan, jadi saya ngelantur.

Berbicara tentang .innerHTML

Beberapa saran yang baik untuk diingat adalah bahwa menggunakan .innerHTMLumumnya ceroboh. Gunakan appendChildsebagai gantinya.

Meskipun dua kasus di mana saya masih menemukan .innerHTMLberguna termasuk memasukkan teks biasa ke dalam elemen kecil ...

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;
}());

... dan membersihkan wadah ...

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

Menggunakan document.title adalah bagaimana Anda akan mencapainya dalam JavaScript, tetapi bagaimana ini seharusnya membantu dengan SEO? Bot umumnya tidak mengeksekusi kode javascript saat mereka melintasi halaman.

Perayap modern dapat mem-parsing konten yang dihasilkan secara dinamis di DOM, jadi menggunakan document.title = ...itu tidak masalah.

Anda harus menayangkan ulang halaman dengan judul baru agar setiap perayap memperhatikan perubahan. Melakukannya melalui javascript hanya akan menguntungkan pembaca manusia, crawler tidak akan mengeksekusi kode itu.

bagi mereka yang mencari versi npm itu, ada seluruh perpustakaan untuk ini:

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'));

Mungkin Anda dapat memuat pada judul Anda semua judul tab dalam satu string, dan kemudian setelah Anda memuat salah satu tab mengubah judul melalui javascript

mis: set pertama pada judul Anda

my app | description | contact | about us | 

setelah Anda memuat salah satu tab yang dijalankan:

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

Salah satu cara yang muncul dalam pikiran yang dapat membantu dengan SEO dan masih memiliki halaman tab Anda seperti mereka akan menggunakan jangkar bernama yang sesuai dengan setiap tab, seperti pada:

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

Anda harus memiliki pemrosesan sisi server untuk mengurai url dan mengatur judul halaman awal saat browser membuat halaman. Saya juga akan melanjutkan dan menjadikan tab itu "aktif". Setelah halaman dimuat dan pengguna yang sebenarnya beralih tab Anda akan menggunakan javascript untuk berubah document.titleseperti yang dinyatakan pengguna lain.

Anda bisa menggunakan JavaScript. Beberapa bot, termasuk Google, akan mengeksekusi JavaScript untuk kepentingan SEO (menunjukkan judul yang benar di SERP).

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

Namun, ini lebih rumit karena Anda menampilkan dan menyembunyikan tab tanpa menyegarkan halaman atau mengubah URL. Mungkin menambahkan jangkar akan membantu seperti yang dinyatakan oleh orang lain. Saya mungkin perlu menarik kembali jawaban saya.

Artikel yang menunjukkan hasil positif: 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

Jangan selalu menganggap bot tidak akan menjalankan JavaScript. http://searchengineland.com/tested-googlebot-crawls-javascript-heres-learned-220157 Google dan mesin pencari lainnya tahu bahwa hasil terbaik untuk mengindeks adalah hasil yang akan dilihat oleh pengguna akhir yang sebenarnya di browser mereka, termasuk JavaScript.

Gunakan document.title. Ini akan berguna untuk sebagian besar hal, tetapi itu akan menghancurkan SEO di situs web Anda.

Contoh:

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>

Karena mesin pencari mengabaikan sebagian besar javascript, Anda harus membuatnya agar mesin pencari dapat merangkak menggunakan tab tanpa menggunakan Ajax. Jadikan setiap tab tautan dengan href yang memuat seluruh halaman dengan tab itu dipilih. Kemudian halaman tersebut dapat memiliki judul itu di dalam tag.

Handler event onclick masih dapat memuat halaman melalui ajax untuk pemirsa manusia.

Untuk melihat halaman seperti yang dilihat oleh kebanyakan mesin pencari, matikan Javascript di browser Anda, dan cobalah membuatnya sehingga mengklik tab akan memuat halaman dengan tab yang dipilih dan judul yang benar.

Jika Anda memuat melalui ajax dan Anda ingin secara dinamis mengubah judul halaman hanya dengan Javascript, maka lakukan:

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

Namun, mesin pencari tidak akan melihat perubahan ini dilakukan dalam javascript.

Tetapi untuk mendapatkan SEO layaknya

Anda perlu melakukan ulang halaman ketika halaman berubah sehingga mesin pencari melihat judul yang berbeda dll.

Jadi pastikan memuat ulang halaman berfungsi terlebih dahulu kemudian tambahkan perubahan document.title

Saya hanya ingin menambahkan sesuatu di sini: mengubah judul melalui JavaScript sebenarnya berguna jika Anda memperbarui database melalui AJAX, jadi judulnya berubah tanpa Anda harus me-refresh halaman. Judul sebenarnya berubah melalui bahasa scripting sisi server Anda, tetapi mengubahnya melalui JavaScript hanyalah kegunaan dan hal UI yang membuat pengalaman pengguna lebih menyenangkan dan lancar.

Sekarang, jika Anda mengubah judul melalui JavaScript hanya untuk itu, maka Anda seharusnya tidak melakukan itu.

Google menyebutkan bahwa semua file js dirender tetapi secara nyata, saya telah kehilangan judul dan meta tag lain yang telah disediakan oleh Reactjs di situs web ini dan benar-benar kehilangan posisi saya di Google! Saya telah mencari banyak tetapi tampaknya semua halaman harus memiliki pra-render atau menggunakan SSR (Server Side Rendering) untuk memiliki protocole ramah-SEO mereka!
Itu meluas ke Reactjs, Angularjs, dll.
Singkatnya, Setiap halaman yang memiliki sumber halaman tampilan di browser diindeks oleh semua robot, jika tidak mungkin Google dapat mengindeks tetapi orang lain melewatkan pengindeksan!

Cara paling sederhana adalah dengan menghapus <title>tag dari index.html, dan sertakan

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

di setiap halaman di web. Laba-laba akan menemukan ini dan akan ditampilkan di hasil pencarian :)