Làm cách nào để tự động thay đổi tiêu đề của một trang web?

Tôi có một trang web thực hiện một tập hợp các tab hiển thị nội dung khác nhau. Các nhấp chuột tab không làm mới trang nhưng ẩn / bỏ ẩn nội dung ở phía máy khách.

Bây giờ có một yêu cầu để thay đổi tiêu đề trang theo tab được chọn trên trang (vì lý do SEO). Điều này có thể không? Ai đó có thể đề xuất một giải pháp để tự động thay đổi tiêu đề trang thông qua javascript mà không cần tải lại trang không?

Cập nhật : theo nhận xét và tham chiếu trên SearchEngineLand hầu hết các trình thu thập dữ liệu web sẽ lập chỉ mục tiêu đề được cập nhật. Câu trả lời dưới đây đã lỗi thời, nhưng mã vẫn được áp dụng.

Bạn chỉ có thể làm một cái gì đó như document.title = "This is the new page title.";, nhưng điều đó sẽ hoàn toàn đánh bại mục đích của SEO. Hầu hết các trình thu thập thông tin sẽ không hỗ trợ javascript ở vị trí đầu tiên, vì vậy họ sẽ lấy bất cứ thứ gì có trong phần tử làm tiêu đề trang.

Nếu bạn muốn điều này tương thích với hầu hết các trình thu thập thông tin quan trọng, bạn sẽ thực sự cần phải thay đổi chính thẻ tiêu đề, điều này sẽ liên quan đến việc tải lại trang (PHP hoặc tương tự). Bạn sẽ không thể khắc phục điều đó, nếu bạn muốn thay đổi tiêu đề trang theo cách mà trình thu thập thông tin có thể nhìn thấy.

Tôi muốn nói lời chào từ tương lai :) Những điều xảy ra gần đây:

1. Google hiện chạy javascript trên trang web của bạn ¹
2. Mọi người hiện sử dụng những thứ như React.js, Ember và Angular để chạy các tác vụ javascript phức tạp trên trang và nó vẫn được Google ¹ lập chỉ mục
3. bạn có thể sử dụng api lịch sử html5 (pushState, Reac-router, ember, angular) cho phép bạn làm những việc như có các url riêng biệt cho mỗi tab bạn muốn mở và Google sẽ lập chỉ mục đó ¹

Vì vậy, để trả lời câu hỏi của bạn, bạn có thể thay đổi tiêu đề và các thẻ meta khác một cách an toàn từ javascript (bạn cũng có thể thêm một cái gì đó như https://prerender.io nếu bạn muốn hỗ trợ các công cụ tìm kiếm không phải của Google), chỉ cần làm cho chúng có thể truy cập dưới dạng các url riêng biệt ( mặt khác, làm thế nào Google biết rằng đó là những trang khác nhau để hiển thị trong kết quả tìm kiếm?). Thay đổi thẻ liên quan đến SEO (sau khi người dùng đã thay đổi trang bằng cách nhấp vào một cái gì đó) rất đơn giản:

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

Chỉ cần đảm bảo rằng css và javascript không bị chặn trong tệp robots.txt, bạn có thể sử dụng Tìm nạp dưới dạng dịch vụ của Google trong Công cụ quản trị trang web của Google.

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

Tôi không thể thấy việc thay đổi tiêu đề trang qua Javascript sẽ giúp SEO như thế nào. Hầu hết (hoặc tất cả) các bot tìm kiếm không chạy Javascript và sẽ chỉ đọc tiêu đề được tải ban đầu là đánh dấu.

Nếu bạn muốn giúp SEO, thì bạn sẽ cần thay đổi tiêu đề trang ở back-end và phục vụ các phiên bản khác nhau của trang.

Sử dụng document.title .

Xem trang này cho một hướng dẫn thô sơ là tốt.

Mã là
document.title = 'test'

Có nhiều cách bạn có thể thay đổi tiêu đề, hai cách chính, giống như vậy:

Phương pháp nghi vấn

Đặt thẻ tiêu đề trong HTML (ví dụ <title>Hello</title>), sau đó trong javascript:

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

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

Phương pháp đúng

Đơn giản nhất trong tất cả là thực sự sử dụng phương thức được cung cấp bởi Mô hình đối tượng tài liệu (DOM)

document.title = "Hello World";

Phương pháp trước đây thường là những gì bạn sẽ làm để thay đổi các thẻ được tìm thấy trong phần thân của tài liệu. Sử dụng phương pháp này để sửa đổi các thẻ dữ liệu meta giống như các thẻ được tìm thấy trong đầu (như title) là cách thực hành tốt nhất, không phải là thành ngữ, phong cách không tốt để bắt đầu và thậm chí có thể không di động. Tuy nhiên, một điều bạn có thể chắc chắn là nó sẽ gây khó chịu cho các nhà phát triển khác nếu họ thấytitle.innerHTML = ... trong mã họ đang duy trì.

Những gì bạn muốn đi với là phương pháp sau. Thuộc tính này được cung cấp trong Đặc tả DOM cụ thể cho mục đích, như tên cho thấy, thay đổi tiêu đề.

Cũng lưu ý rằng nếu bạn đang làm việc với XUL, bạn có thể muốn kiểm tra xem tài liệu đã được tải trước khi thử đặt hoặc lấy tiêu đề chưa, nếu không bạn đang gọi undefined behavior(ở đây là rồng), đây là một khái niệm đáng sợ. Điều này có thể hoặc không thể xảy ra thông qua JavaScript, vì các tài liệu trên DOM không nhất thiết phải liên quan đến JavaScript. Nhưng XUL là một con thú hoàn toàn, nên tôi lạc đề.

Nói về .innerHTML

Một số lời khuyên tốt để ghi nhớ sẽ là việc sử dụng .innerHTMLnói chung là cẩu thả. Sử dụng appendChildthay thế.

Mặc dù hai trường hợp mà tôi vẫn thấy .innerHTMLhữu ích bao gồm chèn văn bản đơn giản vào một yếu tố nhỏ ...

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

... và dọn sạch một container ...

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

Sử dụng document.title là cách bạn sẽ hoàn thành nó trong JavaScript, nhưng làm thế nào để hỗ trợ SEO? Bots thường không thực thi mã javascript khi chúng đi qua các trang.

Trình thu thập dữ liệu hiện đại có thể phân tích cú pháp nội dung được tạo động trong DOM, vì vậy việc sử dụng document.title = ...là hoàn toàn tốt.

Bạn sẽ phải phục vụ lại trang với một tiêu đề mới để bất kỳ trình thu thập thông tin nào nhận thấy sự thay đổi. Làm điều đó thông qua javascript sẽ chỉ có lợi cho người đọc, trình thu thập thông tin sẽ không thực thi mã đó.

Đối với những người tìm kiếm phiên bản npm của nó, có toàn bộ thư viện cho việc này:

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

Có lẽ bạn có thể tải vào tiêu đề của mình tất cả các tiêu đề tab trong một chuỗi và sau đó khi bạn tải một trong các tab thay đổi tiêu đề thông qua javascript

ví dụ: lúc đầu đặt tiêu đề của bạn thành

my app | description | contact | about us | 

khi bạn tải một trong các tab chạy:

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

Một cách mà bạn nghĩ đến có thể giúp ích cho SEO và vẫn có các trang tab của bạn vì chúng sẽ là sử dụng các neo được đặt tên tương ứng với mỗi tab, như trong:

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

Bạn sẽ cần xử lý phía máy chủ để phân tích url và đặt tiêu đề trang ban đầu khi trình duyệt hiển thị trang. Tôi cũng sẽ tiếp tục và biến tab đó thành "hoạt động". Khi trang được tải và một người dùng thực tế đang chuyển đổi các tab, bạn sẽ sử dụng javascript để thay đổi document.titlenhư những người dùng khác đã nêu.

Sử dụng document.title. Nó sẽ hữu ích cho hầu hết mọi thứ, nhưng nó sẽ phá hủy SEO trên trang web của bạn.

Thí dụ:

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>

Bạn có thể sử dụng JavaScript. Một số bot, bao gồm Google, sẽ thực thi JavaScript vì lợi ích của SEO (hiển thị tiêu đề chính xác trong SERP).

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

Tuy nhiên, điều này phức tạp hơn vì bạn đang hiển thị và ẩn các tab mà không làm mới trang hoặc thay đổi URL. Có thể thêm một neo sẽ giúp như được nêu bởi những người khác. Tôi có thể cần phải rút lại câu trả lời của mình.

Các bài viết cho thấy kết quả tích cực: http://www.aukseo.co.uk/use-javascript-to-generate-seo-friendly-title-tags-1275/ http://www.ifinity.com.au/2012/10 / 04 / Change_a_Page_Title_with_Javascript_to_update_a_Google_SERP_Entry

Đừng luôn cho rằng một bot sẽ không thực thi JavaScript. http://searchengineland.com/tested-googlebot-crawls-javascript-heres-learned-220157 Google và các công cụ tìm kiếm khác biết rằng kết quả tốt nhất để lập chỉ mục là kết quả mà người dùng cuối thực tế sẽ thấy trong trình duyệt của họ, bao gồm cả JavaScript.

Vì các công cụ tìm kiếm bỏ qua hầu hết các javascript, bạn sẽ cần phải làm cho nó để các công cụ tìm kiếm có thể thu thập dữ liệu bằng cách sử dụng các tab mà không cần sử dụng Ajax. Đặt mỗi tab thành một liên kết với một href tải toàn bộ trang với tab đó được chọn. Sau đó, trang có thể có tiêu đề đó trong thẻ.

Trình xử lý sự kiện onclick vẫn có thể tải các trang thông qua ajax cho người xem.

Để xem các trang như hầu hết các công cụ tìm kiếm nhìn thấy chúng, hãy tắt Javascript trong trình duyệt của bạn và cố gắng làm cho nó để nhấp vào các tab sẽ tải trang với tab đó được chọn và tiêu đề chính xác.

Nếu bạn đang tải qua ajax và bạn muốn tự động thay đổi tiêu đề trang chỉ bằng Javascript, thì hãy làm:

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

Tuy nhiên, các công cụ tìm kiếm sẽ không thấy thay đổi này được thực hiện trong javascript.

Nhưng để có được trang phục SEO

Bạn cần thực hiện tải lại trang khi trang thay đổi để công cụ tìm kiếm thấy các tiêu đề khác nhau, v.v.

Vì vậy, hãy đảm bảo trang tải lại hoạt động trước sau đó thêm tài liệu. Thay đổi tiêu đề

Tôi chỉ muốn thêm một cái gì đó ở đây: thay đổi tiêu đề qua JavaScript thực sự hữu ích nếu bạn đang cập nhật cơ sở dữ liệu qua AJAX, do đó, tiêu đề sẽ thay đổi mà bạn không phải làm mới trang. Tiêu đề thực sự thay đổi thông qua ngôn ngữ kịch bản phía máy chủ của bạn, nhưng việc thay đổi nó thông qua JavaScript chỉ là một tính khả dụng và giao diện người dùng giúp trải nghiệm người dùng thú vị và trôi chảy hơn.

Bây giờ, nếu bạn thay đổi tiêu đề thông qua JavaScript chỉ vì mục đích xấu, thì bạn không nên làm điều đó.

Google đã đề cập rằng tất cả các tệp js được hiển thị nhưng thực tế, tôi đã mất tiêu đề và các thẻ meta khác đã được Reactjs cung cấp trên trang web này và thực sự đã mất vị trí của tôi trên Google! Tôi đã tìm kiếm rất nhiều nhưng dường như tất cả các trang phải được kết xuất trước hoặc sử dụng SSR (Kết xuất phía máy chủ) để có protocole thân thiện với SEO của họ!
Nó mở rộng thành Reactjs, Angularjs, v.v.
Tóm lại, mọi trang có nguồn xem trang trên trình duyệt đều được lập chỉ mục bởi tất cả các robot, nếu không có lẽ Google có thể lập chỉ mục nhưng những người khác bỏ qua việc lập chỉ mục!

Cách đơn giản nhất là xóa <title>thẻ khỏi index.html và bao gồm

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

trong mỗi trang trên web. Nhện sẽ tìm thấy điều này và sẽ được hiển thị trong kết quả tìm kiếm :)