Vue Router에서 404 응답을 얻는 방법

Vue Router에서 404 응답을 얻는 방법

SPA에는 이미 404 핸들러가 있어 동작하고 있습니다.여기서의 문제는 예를 들어 구글이 더 이상 존재하지 않는 오래된 페이지에 링크한다는 것이다.사용자는 커스텀 404 컴포넌트를 볼 수 있지만 Google은 200 OK를 획득하여 페이지가 계속 유효하다고 생각합니다.

{
  path: '*',
  name: 'not-found',
  component: NotFound // 404
}

서버가 /로 재루팅하도록 하고 vue가 History를 사용하여 루팅을 처리하도록 합니다.

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteCond %{HTTPS} off
  RewriteRule (.*) https://%{HTTP_HOST}%{REQUEST_URI} [R=301,L]
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /index.html [L]
</IfModule>

php 백엔드가 포함된 표준 Vue CLI 설치입니다.PHP는 현재 API 호출에만 사용됩니다.

이 시나리오에서 서버가 404 상태 코드를 반환하는 방법이 있습니까?

제안 솔루션서버는 프런트엔드에서 발생하는 라우팅에 대해 아무것도 모릅니다만, Webpack으로 sitemap 등을 출력해, 서버에 의해서 검증할 수 있는 것을 헤더에 404를 설정해, 404를 나타내는 SPA를 로드하도록 할 수 있습니다.이걸로 될까요, 아니면 더 나은 해결책이 있을까요?

사이트 맵을 자동으로 생성하여 루트를 사이트 맵과 대조합니다.루트가 일치하지 않으면 커스텀 404로 재루팅됩니다.이것은 꽤 잘 작동했지만, 구글은 여전히 약간 혼란스러웠다.

SPA가 검색봇 요구를 모방하거나 응답하는 방법에 대해 몇 가지 조사를 실시했습니다.이것에 대해서는, 다음의 3개의 유효한 솔루션을 소개합니다.

지원 링크:

1. Vue.js 및 vue-router를 사용한 페이지 제목 및 메타데이터 갱신

메타 태그 #1

설명:

HTTP 코드 404는 리소스가 없거나 영구적으로 제거되었음을 의미합니다.제거된 리소스는 Google Bot에 검색 인덱스에서 "사망" 링크를 제거하도록 지시하는 것을 의미합니다.좋아! 이제 우리가 대답할 수 있는 다른 질문이 있어.<meta name=”robots” content=”noindex”>

Google 문서 설명:

페이지의 HTML 코드에 noindex 메타 태그를 포함하거나 HTTP 요청에 'noindex' 헤더를 반환하여 페이지가 Google 검색에 나타나지 않도록 할 수 있습니다.다음에 구글봇이 그 페이지를 크롤하여 태그나 헤더를 볼 때, 구글봇은 다른 사이트가 그 페이지에 링크되어 있는지 여부에 관계없이 구글 검색 결과에서 그 페이지를 완전히 삭제합니다.

지원 링크:

1. https://searchengineland.com/meta-robots-tag-101-blocking-spiders-cached-pages-more-10665
2. https://support.google.com/webmasters/answer/79812?hl=en
3. https://support.google.com/webmasters/answer/93710?visit_id=636835318879056986-3786307088&rd=1

---

메타 태그 #2

설명:

서버를 사용하여 404 또는 기타 코드로 응답할 수 없는 경우(또는 원하지 않는 경우) 리다이렉트 같은 것을 실행할 수 있습니다.seo-safe리다이렉트(JS가 네이블로 되어 있지 않은 경우).

이 리다이렉트는 HTML을 사용합니다.meta- tag, 예를 들어 (즉시 example.com으로 전송)

<meta http-equiv="refresh" content="0; url=http://example.com/">

StackOverflow 답변에서 인용:

리다이렉트 실행 시 권장되는 방법은 아니지만 Google은 리다이렉트를 실행할 수 있는 다른 방법이 없기 때문에 리프레시 태그가 0으로 설정된 페이지를 받아들이고 따라갑니다.이 방법은 블로거 페이지(Google 소유)에 권장되는 방법입니다.

HTTP 코드 301은 최종적으로converted존재하지 않는 파일로 영속적으로 리다이렉트 하는 경우는, 404 로 합니다.Google Docs (301개 리다이렉트 준비):

Googlebot 및 브라우저는 여러 리다이렉트(예: 페이지 1 > 페이지 2 > 페이지 3)의 "체인"을 따를 수 있지만 최종 수신처로 리다이렉트할 것을 권장합니다.이것이 불가능할 경우 체인 내의 리다이렉트 수를 3개 이상 5개 이하로 낮게 유지합니다.리다이렉트 체인은 사용자에게 지연 시간을 증가시킵니다.모든 브라우저가 긴 리다이렉트체인을 지원하는 것은 아닙니다.

지원 링크:

1. https://en.wikipedia.org/wiki/Meta_refresh
2. META REFRESH로 리다이렉트 했을 경우의 SEO의 결과
3. http://sebastians-pamphlets.com/google-and-yahoo-treat-undelayed-meta-refresh-as-301-redirect/
4. https://developer.mozilla.org/en-US/docs/Web/HTTP/Redirections#Permanent_redirections

---

JavaScript 리다이렉트

설명:

를 실행합니다.onload- 에 대응하다window.location = '/404.html'잘못된 위치(존재하지 않는 파일) + Google Not Found Widget을 통합합니다.

지원 링크:

1. https://googleblog.blogspot.com/2008/10/helping-website-oweners-fix-broken.html

언급URL : https://stackoverflow.com/questions/54218371/how-to-get-a-404-response-in-vue-router