웹 페이지 제목을 동적으로 변경하는 방법은 무엇입니까?

각기 다른 내용을 보여주는 일련의 탭을 구현하는 웹 페이지가 있습니다. 탭 클릭은 페이지를 새로 고치지 않지만 클라이언트 측에서 내용을 숨기거나 숨기기 해제합니다.

이제 페이지에서 선택한 탭에 따라 페이지 제목을 변경해야합니다 (SEO 이유로). 이것이 가능한가? 누군가 페이지를 다시로드하지 않고 자바 스크립트를 통해 페이지 제목을 동적으로 변경하는 솔루션을 제안 할 수 있습니까?

업데이트 : SearchEngineL 에 대한 의견과 참조에 따라 대부분의 웹 크롤러는 업데이트 된 제목을 색인합니다. 아래 답변은 더 이상 사용되지 않지만 코드는 여전히 적용 가능합니다.

, 같은 일을 할 수 document.title = "This is the new page title.";있지만 SEO의 목적을 완전히 상실합니다. 대부분의 크롤러는 처음에 자바 스크립트를 지원하지 않으므로 요소에있는 모든 것을 페이지 제목으로 가져갑니다.

이것이 대부분의 중요한 크롤러와 호환되도록하려면 실제로 제목 태그 자체를 변경해야합니다. 여기에는 페이지 다시로드 (PHP 등)가 포함됩니다. 크롤러가 볼 수있는 방식으로 페이지 제목을 변경하려는 경우이 문제를 해결할 수 없습니다.

나는 미래에서 인사하고 싶다 :) 최근에 일어난 일들 :

1. 구글은 이제 귀하의 웹 사이트에있는 자바 스크립트를 실행 ¹
2. 사람들은 이제 페이지에서 복잡한 자바 스크립트 작업을 실행하기 위해 React.js, Ember 및 Angular와 같은 것을 사용하며 여전히 Google에서 색인을 생성합니다 ¹
3. html5 기록 API (pushState, react-router, ember, angular)를 사용하면 열려는 각 탭에 대해 별도의 URL을 갖는 것과 같은 작업을 수행 할 수 있으며 Google은 색인을 생성합니다 ¹

따라서 귀하의 질문에 대답하기 위해 자바 스크립트에서 제목 및 기타 메타 태그를 안전하게 변경할 수 있습니다 ( Google 검색 엔진 이외의 엔진을 지원하려면 https://prerender.io 와 같은 것을 추가 할 수 있음 ), 별도의 URL로 액세스 할 수있게하십시오 ( 그렇지 않으면 Google이 검색 결과에 표시 할 다른 페이지임을 어떻게 알 수 있습니까?). SEO 관련 태그 변경 (사용자가 무언가를 클릭하여 페이지를 변경 한 후)은 간단합니다.

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

robots.txt에서 CSS와 자바 스크립트가 차단되지 않도록 하세요. Google 웹 마스터 도구에서 Fetch as Google 서비스를 사용할 수 있습니다 .

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

Javascript를 통해 페이지 제목을 변경하면 SEO에 어떻게 도움이되는지 알 수 없습니다. 대부분의 (또는 모든) 검색 봇은 Javascript를 실행하지 않으며 마크 업인 처음로드 된 제목 만 읽습니다.

SEO를 돕고 싶다면 백엔드에서 페이지 제목을 변경하고 다른 버전의 페이지를 제공해야합니다.

사용하십시오 document.title.

기초 튜토리얼 도이 페이지 를 참조하십시오 .

코드는
document.title = 'test'

제목을 변경할 수있는 방법은 여러 가지가 있습니다. 주요 두 가지는 다음과 같습니다.

의심스러운 방법

HTML (예 <title>Hello</title>:)에 자바 스크립트에 제목 태그를 넣습니다 .

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

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

분명히 올바른 방법

가장 간단한 방법은 DOM (Document Object Model)에서 제공하는 방법을 실제로 사용하는 것입니다

document.title = "Hello World";

전자의 방법은 일반적으로 문서 본문 에있는 태그를 변경하기 위해 수행하는 방법입니다 . 이 방법을 사용하여 머리에서 발견되는 것과 같은 메타 데이터 태그를 수정하는 title것은 기껏해야 의심스러운 관행이 아니며, 관용적이지 않으며, 스타일이 좋지 않으며, 휴대하기가 쉽지 않을 수도 있습니다. 그러나 당신이 확신 할 수있는 한 가지는 다른 개발자 title.innerHTML = ...들이 그들이 관리하고있는 코드에서 볼 경우 성가 시게된다는 것입니다 .

당신 이 가고 싶은 것은 후자의 방법입니다. 이 속성은 이름에서 알 수 있듯이 제목을 변경하기 위해 DOM 사양에 구체적으로 제공됩니다 .

XUL로 작업하는 경우 제목을 설정하거나 가져 오기 전에 문서가로드되었는지 확인해야합니다. 그렇지 않으면 undefined behavior자체적으로 무서운 개념 인 호출 (여기서는 용)이 있습니다. DOM의 문서가 반드시 JavaScript와 관련이있는 것은 아니므로 JavaScript를 통해 발생할 수도 있고 그렇지 않을 수도 있습니다. 그러나 XUL은 완전히 다른 짐승이므로 난처합니다.

말하기 .innerHTML

명심해야 할 좋은 충고는 사용 .innerHTML이 일반적으로 느슨 하다는 것 입니다. appendChild대신 사용하십시오 .

여전히 .innerHTML유용하다고 생각되는 두 가지 경우 는 일반 텍스트를 작은 요소에 삽입하는 것입니다 ...

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

... 컨테이너 청소 ...

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

document.title을 사용하는 것이 JavaScript에서이를 수행하는 방법이지만 SEO를 어떻게 지원합니까? 봇은 일반적으로 페이지를 통과 할 때 자바 스크립트 코드를 실행하지 않습니다.

최신 크롤러 는 DOM에서 동적으로 생성 된 컨텐츠를 구문 분석 할 수 있으므로 사용하는 document.title = ...것이 좋습니다.

크롤러가 변경 사항을 알 수 있도록 새 제목으로 페이지를 예약해야합니다. 자바 스크립트를 통해 그것을하는 것은 인간 독자에게만 이익이되며 크롤러는 해당 코드를 실행하지 않을 것입니다.

npm 버전을 찾는 사람들을 위해 전체 라이브러리가 있습니다.

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

어쩌면 제목에 모든 탭 제목을 하나의 문자열로로드 한 다음 탭 중 하나를로드하면 자바 스크립트를 통해 제목을 변경하십시오

예 : 처음에 제목을

my app | description | contact | about us | 

탭 중 하나를로드하면 다음을 실행하십시오.

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

SEO에 도움이되고 탭 페이지가있는 것처럼 생각할 수있는 한 가지 방법은 다음과 같이 각 탭에 해당하는 명명 된 앵커를 사용하는 것입니다.

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

브라우저가 페이지를 렌더링 할 때 URL을 구문 분석하고 초기 페이지 제목을 설정하려면 서버 측 처리가 필요합니다. 또한 그 탭을 "활성"탭으로 만듭니다. 페이지가로드되고 실제 사용자가 탭을 전환하면 document.title다른 사용자가 언급 한대로 javascript를 사용하여 변경 합니다.

사용하십시오 document.title. 대부분의 경우 유용하지만 웹 사이트에서 SEO를 파괴합니다.

예:

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>

JavaScript를 사용할 수 있습니다. Google을 포함한 일부 봇은 SEO를 위해 JavaScript를 실행합니다 (SERP에 올바른 제목 표시).

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

그러나 페이지를 새로 고치거나 URL을 변경하지 않고 탭을 표시하거나 숨기므로 더 복잡합니다. 앵커를 추가하면 다른 사람들이 말한 것처럼 도움이 될 수 있습니다. 답을 철회해야 할 수도 있습니다.

긍정적 인 결과를 보여주는 기사 : 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

봇이 항상 JavaScript를 실행하지 않는다고 가정하지 마십시오. http://searchengineland.com/tested-googlebot-crawls-javascript-heres-learned-220157 Google 및 기타 검색 엔진은 색인을 생성하는 가장 좋은 결과가 JavaScript를 포함하여 브라우저에서 실제 최종 사용자가 볼 수있는 결과라는 것을 알고 있습니다.

검색 엔진은 대부분의 자바 스크립트를 무시하므로 검색 엔진이 Ajax를 사용하지 않고 탭을 사용하여 크롤링 할 수 있도록해야합니다. 각 탭을 해당 탭이 선택된 전체 페이지를로드하는 href와의 링크로 만듭니다. 그런 다음 페이지는 태그에 해당 제목을 가질 수 있습니다.

onclick 이벤트 핸들러는 여전히 사람 뷰어를 위해 ajax를 통해 페이지를로드 할 수 있습니다.

대부분의 검색 엔진에서 보는 것처럼 페이지를 보려면 브라우저에서 Javascript를 끄고 탭을 클릭하면 해당 탭이 선택된 페이지와 제목이 올바른 페이지가로드되도록하십시오.

ajax를 통해로드하고 Javascript만으로 페이지 제목을 동적으로 변경하려면 다음을 수행하십시오.

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

그러나 검색 엔진에는 이러한 변경 사항이 자바 스크립트로 표시되지 않습니다.

그러나 SEO의 이익을 얻으려면

검색 엔진이 다른 제목 등을 볼 수 있도록 페이지가 변경되면 페이지를 다시로드해야합니다.

따라서 페이지 새로 고침이 먼저 작동하는지 확인한 다음 document.title 변경 사항을 추가하십시오.

여기에 무언가를 추가하고 싶습니다 .AJAX를 통해 데이터베이스를 업데이트하는 경우 JavaScript를 통해 제목을 변경하면 실제로 유용하므로 페이지를 새로 고치지 않아도 제목이 변경됩니다. 제목은 실제로 서버 측 스크립팅 언어를 통해 변경되지만 JavaScript를 통해 변경되는 것은 사용자에게보다 즐겁고 유동적 인 경험을 제공하는 유용성과 UI입니다.

이제 JavaScript를 통해 제목을 변경하는 경우에는 그렇게하지 않아야합니다.

Google은 모든 js 파일이 렌더링되었지만 실제로는 이 웹 사이트에서 Reactjs가 제공 한 제목과 다른 메타 태그를 잃어 버렸으며 실제로 Google에서 내 위치를 잃어 버렸다고 언급했습니다 ! 많은 것을 검색했지만 SEO 친화적 인 프로토콜을 사용하려면 모든 페이지가 사전 렌더링되거나 SSR (Server Side Rendering)을 사용해야합니다!
Reactjs, Angularjs 등으로 확장됩니다.
간단히 말해, 브라우저에서 페이지 소스보기 페이지 가있는 모든 페이지는 Google이 색인을 생성 할 수는 없지만 다른 사람은 색인을 건너 뛰는 경우 모든 로봇에 의해 색인됩니다!

가장 간단한 방법은 <title>index.html에서 태그 를 삭제 하고 포함하는 것입니다.

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

웹의 모든 페이지에서 거미는 이것을 찾아서 검색 결과에 표시됩니다 :)