{"id":3106,"date":"2026-01-09T09:59:40","date_gmt":"2026-01-09T09:59:40","guid":{"rendered":"http:\/\/echopx.com\/blog\/?p=3106"},"modified":"2026-04-06T17:30:15","modified_gmt":"2026-04-06T12:00:15","slug":"how-to-do-javascript-redirect-for-seo","status":"publish","type":"post","link":"https:\/\/echopx.com\/blog\/how-to-do-javascript-redirect-for-seo\/","title":{"rendered":"How to do JavaScript Redirect for SEO\u00a0"},"content":{"rendered":"<div id=\"bsf_rt_marker\"><\/div><h2>How to do JavaScript Redirect for SEO<\/h2>\n<p><img decoding=\"async\" src=\"https:\/\/www.rockstarmarketing.co.uk\/wp-content\/uploads\/HTTP-redirects.png\" alt=\"Are JavaScript Redirects SEO-Friendly? | Rockstar Marketing\" \/><\/p>\n<p><span style=\"font-weight: 400;\">JavaScript redirects are one of the methods available to webmasters for <a href=\"http:\/\/echopx.com\">informing<\/a> both users and <a href=\"https:\/\/echopx.com\/blog\/terms-of-service\">search<\/a> engines that the requested URL is temporarily or permanently unavailable. The URL served to you should be regarded as an alternative or new permanent. Typically, best practice suggests using server-side 301s, 302s, or 307s. Nginx servers are typically used to host JavaScript (JS) applications, with configuration files that allow for server-side redirects, which Google recommends. However, let&#8217;s take a look at the increasingly popular headless website architectures. We&#8217;ve noticed that not all headless builds support server-side redirects and instead rely on client-side implementation &#8211; specifically, JavaScript redirects.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">One benefit of switching to a headless design is that you are no longer running a monolith but a microservices model, even if certain headless CMS solutions allow you to configure redirects at the server or application level. As a result, developers will seek to reduce dependencies and increase stack flexibility.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">JavaScript redirects are typically implemented using the window. location. replace function, and they work well for users. However, how well search engines interpret them is debatable.<\/span><\/p>\n<h2><b>JAVASCRIPT REDIRECTIONS, AND HOW TO USE THEM<\/b><\/h2>\n<p><img decoding=\"async\" src=\"https:\/\/www.codingem.com\/wp-content\/uploads\/2022\/03\/redirect-javascript.png\" alt=\"How to Redirect a Web Page (Theory &amp; Examples) - codingem.com\" \/><\/p>\n<p>JavaScript redirections are a method of automatically redirecting users from one webpage to another. This technique is commonly used for various purposes, such as redirecting to a different page after a form submission, handling outdated URLs, or navigating based on user interactions. This guide will cover the basics of JavaScript redirections, including different methods and practical examples.<\/p>\n<h2>Methods for JavaScript Redirections<\/h2>\n<h3>1. Using <code>window.location<\/code><\/h3>\n<h4><code>window.location.href<\/code><\/h4>\n<p>This method sets the URL of the current window to the specified URL, effectively redirecting the user to a new page.<\/p>\n<div class=\"dark bg-gray-950 rounded-md border-[0.5px] border-token-border-medium\">\n<div class=\"flex items-center relative text-token-text-secondary bg-token-main-surface-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md\">javascript<\/p>\n<div class=\"flex items-center\"><span class=\"\" data-state=\"closed\"><button class=\"flex gap-1 items-center\">Copy code<\/button><\/span><\/div>\n<\/div>\n<div class=\"overflow-y-auto p-4\" dir=\"ltr\"><code class=\"!whitespace-pre hljs language-javascript\"><span class=\"hljs-variable language_\">window<\/span>.<span class=\"hljs-property\">location<\/span>.<span class=\"hljs-property\">href<\/span> = <span class=\"hljs-string\">\"https:\/\/www.example.com\"<\/span>;<br \/>\n<\/code><\/div>\n<\/div>\n<h4><code>window.location.replace<\/code><\/h4>\n<p>This method is similar to <code>window.location.href<\/code>, but it does not keep the originating page in the session history, which means the user cannot navigate back to it using the browser&#8217;s back button.<\/p>\n<div class=\"dark bg-gray-950 rounded-md border-[0.5px] border-token-border-medium\">\n<div class=\"flex items-center relative text-token-text-secondary bg-token-main-surface-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md\">javascript<\/p>\n<div class=\"flex items-center\"><span class=\"\" data-state=\"closed\"><button class=\"flex gap-1 items-center\">Copy code<\/button><\/span><\/div>\n<\/div>\n<div class=\"overflow-y-auto p-4\" dir=\"ltr\"><code class=\"!whitespace-pre hljs language-javascript\"><span class=\"hljs-variable language_\">window<\/span>.<span class=\"hljs-property\">location<\/span>.<span class=\"hljs-title function_\">replace<\/span>(<span class=\"hljs-string\">\"https:\/\/www.example.com\"<\/span>);<br \/>\n<\/code><\/div>\n<\/div>\n<h4><code>window.location.assign<\/code><\/h4>\n<p>This method also changes the current URL to a new one but keeps the originating page in the session history, allowing the user to navigate back.<\/p>\n<div class=\"dark bg-gray-950 rounded-md border-[0.5px] border-token-border-medium\">\n<div class=\"flex items-center relative text-token-text-secondary bg-token-main-surface-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md\">javascript<\/p>\n<div class=\"flex items-center\"><span class=\"\" data-state=\"closed\"><button class=\"flex gap-1 items-center\">Copy code<\/button><\/span><\/div>\n<\/div>\n<div class=\"overflow-y-auto p-4\" dir=\"ltr\"><code class=\"!whitespace-pre hljs language-javascript\"><span class=\"hljs-variable language_\">window<\/span>.<span class=\"hljs-property\">location<\/span>.<span class=\"hljs-title function_\">assign<\/span>(<span class=\"hljs-string\">\"https:\/\/www.example.com\"<\/span>);<br \/>\n<\/code><\/div>\n<\/div>\n<h3>2. Using <code>window.location.pathname<\/code><\/h3>\n<p>This method redirects to a new path on the same domain.<\/p>\n<div class=\"dark bg-gray-950 rounded-md border-[0.5px] border-token-border-medium\">\n<div class=\"flex items-center relative text-token-text-secondary bg-token-main-surface-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md\">javascript<\/p>\n<div class=\"flex items-center\"><span class=\"\" data-state=\"closed\"><button class=\"flex gap-1 items-center\">Copy code<\/button><\/span><\/div>\n<\/div>\n<div class=\"overflow-y-auto p-4\" dir=\"ltr\"><code class=\"!whitespace-pre hljs language-javascript\"><span class=\"hljs-variable language_\">window<\/span>.<span class=\"hljs-property\">location<\/span>.<span class=\"hljs-property\">pathname<\/span> = <span class=\"hljs-string\">\"\/newpage\"<\/span>;<br \/>\n<\/code><\/div>\n<\/div>\n<h3>3. Using <code>window.location.search<\/code><\/h3>\n<p>This method changes the query string of the current URL.<\/p>\n<div class=\"dark bg-gray-950 rounded-md border-[0.5px] border-token-border-medium\">\n<div class=\"flex items-center relative text-token-text-secondary bg-token-main-surface-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md\">javascript<\/p>\n<div class=\"flex items-center\"><span class=\"\" data-state=\"closed\"><button class=\"flex gap-1 items-center\">Copy code<\/button><\/span><\/div>\n<\/div>\n<div class=\"overflow-y-auto p-4\" dir=\"ltr\"><code class=\"!whitespace-pre hljs language-javascript\"><span class=\"hljs-variable language_\">window<\/span>.<span class=\"hljs-property\">location<\/span>.<span class=\"hljs-property\">search<\/span> = <span class=\"hljs-string\">\"?newquery=example\"<\/span>;<br \/>\n<\/code><\/div>\n<\/div>\n<h3>4. Using <code>window.location.hash<\/code><\/h3>\n<p>This method changes the anchor part of the URL (everything after the <code>#<\/code> symbol).<\/p>\n<div class=\"dark bg-gray-950 rounded-md border-[0.5px] border-token-border-medium\">\n<div class=\"flex items-center relative text-token-text-secondary bg-token-main-surface-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md\">javascript<\/p>\n<div class=\"flex items-center\"><span class=\"\" data-state=\"closed\"><button class=\"flex gap-1 items-center\">Copy code<\/button><\/span><\/div>\n<\/div>\n<div class=\"overflow-y-auto p-4\" dir=\"ltr\"><code class=\"!whitespace-pre hljs language-javascript\"><span class=\"hljs-variable language_\">window<\/span>.<span class=\"hljs-property\">location<\/span>.<span class=\"hljs-property\">hash<\/span> = <span class=\"hljs-string\">\"#newsection\"<\/span>;<br \/>\n<\/code><\/div>\n<\/div>\n<h3>5. Using <code>window.history<\/code><\/h3>\n<h4><code>window.history.pushState<\/code><\/h4>\n<p>This method changes the URL without reloading the page. It is often used in single-page applications (SPAs) to manage navigation.<\/p>\n<div class=\"dark bg-gray-950 rounded-md border-[0.5px] border-token-border-medium\">\n<div class=\"flex items-center relative text-token-text-secondary bg-token-main-surface-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md\">javascript<\/p>\n<div class=\"flex items-center\"><span class=\"\" data-state=\"closed\"><button class=\"flex gap-1 items-center\">Copy code<\/button><\/span><\/div>\n<\/div>\n<div class=\"overflow-y-auto p-4\" dir=\"ltr\"><code class=\"!whitespace-pre hljs language-javascript\"><span class=\"hljs-variable language_\">window<\/span>.<span class=\"hljs-property\">history<\/span>.<span class=\"hljs-title function_\">pushState<\/span>({}, <span class=\"hljs-string\">\"\"<\/span>, <span class=\"hljs-string\">\"\/newpage\"<\/span>);<br \/>\n<\/code><\/div>\n<\/div>\n<h4><code>window.history.replaceState<\/code><\/h4>\n<p>This method works like <code>pushState<\/code>, but it replaces the current history entry instead of adding a new one.<\/p>\n<div class=\"dark bg-gray-950 rounded-md border-[0.5px] border-token-border-medium\">\n<div class=\"flex items-center relative text-token-text-secondary bg-token-main-surface-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md\">javascript<\/p>\n<div class=\"flex items-center\"><span class=\"\" data-state=\"closed\"><button class=\"flex gap-1 items-center\">Copy code<\/button><\/span><\/div>\n<\/div>\n<div class=\"overflow-y-auto p-4\" dir=\"ltr\"><code class=\"!whitespace-pre hljs language-javascript\"><span class=\"hljs-variable language_\">window<\/span>.<span class=\"hljs-property\">history<\/span>.<span class=\"hljs-title function_\">replaceState<\/span>({}, <span class=\"hljs-string\">\"\"<\/span>, <span class=\"hljs-string\">\"\/newpage\"<\/span>);<br \/>\n<\/code><\/div>\n<\/div>\n<h2>Practical Examples<\/h2>\n<h3>Example 1: Simple Redirection<\/h3>\n<p>Redirect users to another website after a certain period (e.g., 3 seconds).<\/p>\n<div class=\"dark bg-gray-950 rounded-md border-[0.5px] border-token-border-medium\">\n<div class=\"flex items-center relative text-token-text-secondary bg-token-main-surface-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md\">html<\/p>\n<div class=\"flex items-center\"><span class=\"\" data-state=\"closed\"><button class=\"flex gap-1 items-center\">Copy code<\/button><\/span><\/div>\n<\/div>\n<div class=\"overflow-y-auto p-4\" dir=\"ltr\"><code class=\"!whitespace-pre hljs language-html\"><span class=\"hljs-meta\">&lt;!DOCTYPE <span class=\"hljs-keyword\">html<\/span>&gt;<\/span><br \/>\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">html<\/span> <span class=\"hljs-attr\">lang<\/span>=<span class=\"hljs-string\">\"en\"<\/span>&gt;<\/span><br \/>\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">head<\/span>&gt;<\/span><br \/>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">meta<\/span> <span class=\"hljs-attr\">charset<\/span>=<span class=\"hljs-string\">\"UTF-8\"<\/span>&gt;<\/span><br \/>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">title<\/span>&gt;<\/span>Redirect Example<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">title<\/span>&gt;<\/span><br \/>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">script<\/span>&gt;<\/span><span class=\"javascript\"><br \/>\n        <span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title function_\">redirect<\/span>() {<br \/>\n            <span class=\"hljs-variable language_\">window<\/span>.<span class=\"hljs-property\">location<\/span>.<span class=\"hljs-property\">href<\/span> = <span class=\"hljs-string\">\"https:\/\/www.example.com\"<\/span>;<br \/>\n        }<\/p>\n<p>        <span class=\"hljs-built_in\">setTimeout<\/span>(redirect, <span class=\"hljs-number\">3000<\/span>); <span class=\"hljs-comment\">\/\/ Redirect after 3 seconds<\/span><br \/>\n    <\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">script<\/span>&gt;<\/span><br \/>\n<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">head<\/span>&gt;<\/span><br \/>\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">body<\/span>&gt;<\/span><br \/>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">p<\/span>&gt;<\/span>You will be redirected in 3 seconds...<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">p<\/span>&gt;<\/span><br \/>\n<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">body<\/span>&gt;<\/span><br \/>\n<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">html<\/span>&gt;<\/span><br \/>\n<\/code><\/div>\n<\/div>\n<h3>Example 2: Conditional Redirection<\/h3>\n<p>Redirect users based on a condition (e.g., user login status).<\/p>\n<div class=\"dark bg-gray-950 rounded-md border-[0.5px] border-token-border-medium\">\n<div class=\"flex items-center relative text-token-text-secondary bg-token-main-surface-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md\">html<\/p>\n<div class=\"flex items-center\"><span class=\"\" data-state=\"closed\"><button class=\"flex gap-1 items-center\">Copy code<\/button><\/span><\/div>\n<\/div>\n<div class=\"overflow-y-auto p-4\" dir=\"ltr\"><code class=\"!whitespace-pre hljs language-html\"><span class=\"hljs-meta\">&lt;!DOCTYPE <span class=\"hljs-keyword\">html<\/span>&gt;<\/span><br \/>\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">html<\/span> <span class=\"hljs-attr\">lang<\/span>=<span class=\"hljs-string\">\"en\"<\/span>&gt;<\/span><br \/>\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">head<\/span>&gt;<\/span><br \/>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">meta<\/span> <span class=\"hljs-attr\">charset<\/span>=<span class=\"hljs-string\">\"UTF-8\"<\/span>&gt;<\/span><br \/>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">title<\/span>&gt;<\/span>Conditional Redirect Example<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">title<\/span>&gt;<\/span><br \/>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">script<\/span>&gt;<\/span><span class=\"javascript\"><br \/>\n        <span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title function_\">checkLogin<\/span>() {<br \/>\n            <span class=\"hljs-keyword\">var<\/span> isLoggedIn = <span class=\"hljs-literal\">false<\/span>; <span class=\"hljs-comment\">\/\/ This would typically come from your app logic<\/span><\/p>\n<p>            <span class=\"hljs-keyword\">if<\/span> (isLoggedIn) {<br \/>\n                <span class=\"hljs-variable language_\">window<\/span>.<span class=\"hljs-property\">location<\/span>.<span class=\"hljs-property\">href<\/span> = <span class=\"hljs-string\">\"\/dashboard\"<\/span>;<br \/>\n            } <span class=\"hljs-keyword\">else<\/span> {<br \/>\n                <span class=\"hljs-variable language_\">window<\/span>.<span class=\"hljs-property\">location<\/span>.<span class=\"hljs-property\">href<\/span> = <span class=\"hljs-string\">\"\/login\"<\/span>;<br \/>\n            }<br \/>\n        }<\/p>\n<p>        <span class=\"hljs-variable language_\">window<\/span>.<span class=\"hljs-property\">onload<\/span> = checkLogin;<br \/>\n    <\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">script<\/span>&gt;<\/span><br \/>\n<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">head<\/span>&gt;<\/span><br \/>\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">body<\/span>&gt;<\/span><br \/>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">p<\/span>&gt;<\/span>Checking login status...<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">p<\/span>&gt;<\/span><br \/>\n<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">body<\/span>&gt;<\/span><br \/>\n<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">html<\/span>&gt;<\/span><br \/>\n<\/code><\/div>\n<\/div>\n<h3>Example 3: Redirection After Form Submission<\/h3>\n<p>Redirect users to a thank-you page after submitting a form.<\/p>\n<div class=\"dark bg-gray-950 rounded-md border-[0.5px] border-token-border-medium\">\n<div class=\"flex items-center relative text-token-text-secondary bg-token-main-surface-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md\">html<\/p>\n<div class=\"flex items-center\"><span class=\"\" data-state=\"closed\"><button class=\"flex gap-1 items-center\">Copy code<\/button><\/span><\/div>\n<\/div>\n<div class=\"overflow-y-auto p-4\" dir=\"ltr\"><code class=\"!whitespace-pre hljs language-html\"><span class=\"hljs-meta\">&lt;!DOCTYPE <span class=\"hljs-keyword\">html<\/span>&gt;<\/span><br \/>\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">html<\/span> <span class=\"hljs-attr\">lang<\/span>=<span class=\"hljs-string\">\"en\"<\/span>&gt;<\/span><br \/>\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">head<\/span>&gt;<\/span><br \/>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">meta<\/span> <span class=\"hljs-attr\">charset<\/span>=<span class=\"hljs-string\">\"UTF-8\"<\/span>&gt;<\/span><br \/>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">title<\/span>&gt;<\/span>Form Submission Redirect<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">title<\/span>&gt;<\/span><br \/>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">script<\/span>&gt;<\/span><span class=\"javascript\"><br \/>\n        <span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title function_\">submitForm<\/span>(<span class=\"hljs-params\">event<\/span>) {<br \/>\n            event.<span class=\"hljs-title function_\">preventDefault<\/span>(); <span class=\"hljs-comment\">\/\/ Prevent the default form submission<\/span><br \/>\n            <span class=\"hljs-comment\">\/\/ Form submission logic goes here<\/span><br \/>\n            <span class=\"hljs-variable language_\">window<\/span>.<span class=\"hljs-property\">location<\/span>.<span class=\"hljs-property\">href<\/span> = <span class=\"hljs-string\">\"\/thank-you\"<\/span>;<br \/>\n        }<br \/>\n    <\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">script<\/span>&gt;<\/span><br \/>\n<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">head<\/span>&gt;<\/span><br \/>\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">body<\/span>&gt;<\/span><br \/>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">form<\/span> <span class=\"hljs-attr\">onsubmit<\/span>=<span class=\"hljs-string\">\"submitForm(event)\"<\/span>&gt;<\/span><br \/>\n        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">label<\/span> <span class=\"hljs-attr\">for<\/span>=<span class=\"hljs-string\">\"name\"<\/span>&gt;<\/span>Name:<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">label<\/span>&gt;<\/span><br \/>\n        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">input<\/span> <span class=\"hljs-attr\">type<\/span>=<span class=\"hljs-string\">\"text\"<\/span> <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\">\"name\"<\/span> <span class=\"hljs-attr\">name<\/span>=<span class=\"hljs-string\">\"name\"<\/span> <span class=\"hljs-attr\">required<\/span>&gt;<\/span><br \/>\n        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">button<\/span> <span class=\"hljs-attr\">type<\/span>=<span class=\"hljs-string\">\"submit\"<\/span>&gt;<\/span>Submit<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">button<\/span>&gt;<\/span><br \/>\n    <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">form<\/span>&gt;<\/span><br \/>\n<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">body<\/span>&gt;<\/span><br \/>\n<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">html<\/span>&gt;<\/span><br \/>\n<\/code><\/div>\n<\/div>\n<h3>Example 4: SPA Navigation<\/h3>\n<p>Use <code>history.pushState<\/code> for navigating within a single-page application without reloading the page.<\/p>\n<div class=\"dark bg-gray-950 rounded-md border-[0.5px] border-token-border-medium\">\n<div class=\"flex items-center relative text-token-text-secondary bg-token-main-surface-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md\">html<\/p>\n<div class=\"flex items-center\"><span class=\"\" data-state=\"closed\"><button class=\"flex gap-1 items-center\">Copy code<\/button><\/span><\/div>\n<\/div>\n<div class=\"overflow-y-auto p-4\" dir=\"ltr\"><code class=\"!whitespace-pre hljs language-html\"><span class=\"hljs-meta\">&lt;!DOCTYPE <span class=\"hljs-keyword\">html<\/span>&gt;<\/span><br \/>\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">html<\/span> <span class=\"hljs-attr\">lang<\/span>=<span class=\"hljs-string\">\"en\"<\/span>&gt;<\/span><br \/>\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">head<\/span>&gt;<\/span><br \/>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">meta<\/span> <span class=\"hljs-attr\">charset<\/span>=<span class=\"hljs-string\">\"UTF-8\"<\/span>&gt;<\/span><br \/>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">title<\/span>&gt;<\/span>SPA Navigation Example<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">title<\/span>&gt;<\/span><br \/>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">script<\/span>&gt;<\/span><span class=\"javascript\"><br \/>\n        <span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title function_\">navigate<\/span>(<span class=\"hljs-params\">path<\/span>) {<br \/>\n            <span class=\"hljs-variable language_\">window<\/span>.<span class=\"hljs-property\">history<\/span>.<span class=\"hljs-title function_\">pushState<\/span>({}, <span class=\"hljs-string\">\"\"<\/span>, path);<br \/>\n            <span class=\"hljs-variable language_\">document<\/span>.<span class=\"hljs-title function_\">getElementById<\/span>(<span class=\"hljs-string\">\"content\"<\/span>).<span class=\"hljs-property\">innerHTML<\/span> = <span class=\"hljs-string\">\"You are now at \"<\/span> + path;<br \/>\n        }<\/p>\n<p>        <span class=\"hljs-variable language_\">window<\/span>.<span class=\"hljs-property\">onpopstate<\/span> = <span class=\"hljs-keyword\">function<\/span>() {<br \/>\n            <span class=\"hljs-variable language_\">document<\/span>.<span class=\"hljs-title function_\">getElementById<\/span>(<span class=\"hljs-string\">\"content\"<\/span>).<span class=\"hljs-property\">innerHTML<\/span> = <span class=\"hljs-string\">\"You are now at \"<\/span> + <span class=\"hljs-variable language_\">window<\/span>.<span class=\"hljs-property\">location<\/span>.<span class=\"hljs-property\">pathname<\/span>;<br \/>\n        }<br \/>\n    <\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">script<\/span>&gt;<\/span><br \/>\n<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">head<\/span>&gt;<\/span><br \/>\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">body<\/span>&gt;<\/span><br \/>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">button<\/span> <span class=\"hljs-attr\">onclick<\/span>=<span class=\"hljs-string\">\"navigate('\/home')\"<\/span>&gt;<\/span>Home<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">button<\/span>&gt;<\/span><br \/>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">button<\/span> <span class=\"hljs-attr\">onclick<\/span>=<span class=\"hljs-string\">\"navigate('\/about')\"<\/span>&gt;<\/span>About<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">button<\/span>&gt;<\/span><br \/>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">button<\/span> <span class=\"hljs-attr\">onclick<\/span>=<span class=\"hljs-string\">\"navigate('\/contact')\"<\/span>&gt;<\/span>Contact<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">button<\/span>&gt;<\/span><br \/>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\">\"content\"<\/span>&gt;<\/span>You are now at \/<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span><br \/>\n<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">body<\/span>&gt;<\/span><br \/>\n<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">html<\/span>&gt;<\/span><\/code><\/div>\n<\/div>\n<p><span style=\"font-weight: 400;\">JavaScript provides many features that transform the web into a powerful application platform, JavaScript is an important component of the web platform. Making your JavaScript-powered web applications searchable via Google Search can help you find new users and re-engage existing users who are looking for the content your web app provides. While Google Search uses an evergreen version of Chromium to run JavaScript, there are a few things you can optimize.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">This guide describes how Google Search processes JavaScript and best practices for improving Google Search JavaScript web apps.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">How Google handles JavaScript web apps in three stages:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Crawling\u00a0<\/span><\/li>\n<\/ul>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Rendering\u00a0<\/span><\/li>\n<\/ul>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Indexing<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">Googlebot queues pages for crawling as well as rendering. It is not always clear when a page is awaiting crawling and when it is awaiting rendering. When Googlebot requests an HTTP to retrieve a URL from the crawling queue, it first checks to see if you allow crawling. Googlebot reads the robots.txt file. If it marks the URL as disallowed, Googlebot will skip making an HTTP request to this URL and will skip the URL. Googlebot then parses the response for other URLs in HTML links&#8217; href attribute and adds them to the crawl queue. Use the no follow mechanism to prevent link discovery.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Crawling a URL and parsing the HTML response works well for traditional websites or server-side rendered pages where the HTML in the HTTP response contains all content. Some JavaScript sites may use the app shell model, in which the initial HTML does not contain the actual content and Google must execute JavaScript before seeing the actual page content that JavaScript generates.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Googlebot queues all pages for rendering unless a robot meta tag or header instructs Google not to index the page. The carrier may remain in this queue for a few seconds, but it may take longer. When Google&#8217;s resources permit, a headless Chromium renders the page and executes the JavaScript. Googlebot parses the rendered HTML for links once more and queues the URLs discovered for crawling.\u00a0 Google indexes the page using the rendered HTML as well. Remember that server-side or pre-rendering is still a good idea because it speeds up your website for users and crawlers alike, and not all bots can run JavaScript.<\/span><\/p>\n<h2><b>HOW TO DO JAVASCRIPT REDIRECT<\/b><b><\/b><\/h2>\n<p><img fetchpriority=\"high\" decoding=\"async\" class=\"alignnone\" src=\"https:\/\/www.codingem.com\/wp-content\/uploads\/2022\/03\/redirect-javascript.png\" alt=\"How to do JavaScript Redirect for SEO\" width=\"1407\" height=\"609\" \/><\/p>\n<p>JavaScript redirection is a common technique used to automatically redirect users from one webpage to another. This can be useful in various scenarios, such as redirecting users after a form submission, handling outdated URLs, or navigating based on user interactions. Here\u2019s a comprehensive guide on how to implement JavaScript redirects using different methods.<\/p>\n<h2>Methods for JavaScript Redirections<\/h2>\n<h3>1. Using <code>window.location.href<\/code><\/h3>\n<p>The <code>window.location.href<\/code> property sets the URL of the current window to the specified URL, effectively redirecting the user to a new page.<\/p>\n<h4>Example:<\/h4>\n<div class=\"dark bg-gray-950 rounded-md border-[0.5px] border-token-border-medium\">\n<div class=\"flex items-center relative text-token-text-secondary bg-token-main-surface-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md\">javascript<\/p>\n<div class=\"flex items-center\"><span class=\"\" data-state=\"closed\"><button class=\"flex gap-1 items-center\">Copy code<\/button><\/span><\/div>\n<\/div>\n<div class=\"overflow-y-auto p-4\" dir=\"ltr\"><code class=\"!whitespace-pre hljs language-javascript\"><span class=\"hljs-variable language_\">window<\/span>.<span class=\"hljs-property\">location<\/span>.<span class=\"hljs-property\">href<\/span> = <span class=\"hljs-string\">\"https:\/\/www.example.com\"<\/span>;<br \/>\n<\/code><\/div>\n<\/div>\n<h3>2. Using <code>window.location.replace<\/code><\/h3>\n<p>The <code>window.location.replace<\/code> method replaces the current document with a new one. Unlike <code>window.location.href<\/code>, this does not keep the originating page in the session history, meaning the user cannot navigate back to it using the browser\u2019s back button.<\/p>\n<h4>Example:<\/h4>\n<div class=\"dark bg-gray-950 rounded-md border-[0.5px] border-token-border-medium\">\n<div class=\"flex items-center relative text-token-text-secondary bg-token-main-surface-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md\">javascript<\/p>\n<div class=\"flex items-center\"><span class=\"\" data-state=\"closed\"><button class=\"flex gap-1 items-center\">Copy code<\/button><\/span><\/div>\n<\/div>\n<div class=\"overflow-y-auto p-4\" dir=\"ltr\"><code class=\"!whitespace-pre hljs language-javascript\"><span class=\"hljs-variable language_\">window<\/span>.<span class=\"hljs-property\">location<\/span>.<span class=\"hljs-title function_\">replace<\/span>(<span class=\"hljs-string\">\"https:\/\/www.example.com\"<\/span>);<br \/>\n<\/code><\/div>\n<\/div>\n<h3>3. Using <code>window.location.assign<\/code><\/h3>\n<p>The <code>window.location.assign<\/code> method loads a new document, similar to <code>window.location.href<\/code>, but keeps the current page in the session history.<\/p>\n<h4>Example:<\/h4>\n<div class=\"dark bg-gray-950 rounded-md border-[0.5px] border-token-border-medium\">\n<div class=\"flex items-center relative text-token-text-secondary bg-token-main-surface-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md\">javascript<\/p>\n<div class=\"flex items-center\"><span class=\"\" data-state=\"closed\"><button class=\"flex gap-1 items-center\">Copy code<\/button><\/span><\/div>\n<\/div>\n<div class=\"overflow-y-auto p-4\" dir=\"ltr\"><code class=\"!whitespace-pre hljs language-javascript\"><span class=\"hljs-variable language_\">window<\/span>.<span class=\"hljs-property\">location<\/span>.<span class=\"hljs-title function_\">assign<\/span>(<span class=\"hljs-string\">\"https:\/\/www.example.com\"<\/span>);<br \/>\n<\/code><\/div>\n<\/div>\n<h3>4. Using <code>window.location.pathname<\/code><\/h3>\n<p>The <code>window.location.pathname<\/code> property sets the path of the current URL, effectively redirecting to a new path on the same domain.<\/p>\n<h4>Example:<\/h4>\n<div class=\"dark bg-gray-950 rounded-md border-[0.5px] border-token-border-medium\">\n<div class=\"flex items-center relative text-token-text-secondary bg-token-main-surface-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md\">javascript<\/p>\n<div class=\"flex items-center\"><span class=\"\" data-state=\"closed\"><button class=\"flex gap-1 items-center\">Copy code<\/button><\/span><\/div>\n<\/div>\n<div class=\"overflow-y-auto p-4\" dir=\"ltr\"><code class=\"!whitespace-pre hljs language-javascript\"><span class=\"hljs-variable language_\">window<\/span>.<span class=\"hljs-property\">location<\/span>.<span class=\"hljs-property\">pathname<\/span> = <span class=\"hljs-string\">\"\/newpage\"<\/span>;<br \/>\n<\/code><\/div>\n<\/div>\n<h3>5. Using <code>window.location.search<\/code><\/h3>\n<p>The <code>window.location.search<\/code> property sets the query string of the current URL, which can be used to redirect to a URL with specific query parameters.<\/p>\n<h4>Example:<\/h4>\n<div class=\"dark bg-gray-950 rounded-md border-[0.5px] border-token-border-medium\">\n<div class=\"flex items-center relative text-token-text-secondary bg-token-main-surface-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md\">javascript<\/p>\n<div class=\"flex items-center\"><span class=\"\" data-state=\"closed\"><button class=\"flex gap-1 items-center\">Copy code<\/button><\/span><\/div>\n<\/div>\n<div class=\"overflow-y-auto p-4\" dir=\"ltr\"><code class=\"!whitespace-pre hljs language-javascript\"><span class=\"hljs-variable language_\">window<\/span>.<span class=\"hljs-property\">location<\/span>.<span class=\"hljs-property\">search<\/span> = <span class=\"hljs-string\">\"?newquery=example\"<\/span>;<br \/>\n<\/code><\/div>\n<\/div>\n<h3>6. Using <code>window.location.hash<\/code><\/h3>\n<p>The <code>window.location.hash<\/code> property sets the anchor part of the URL (everything after the <code>#<\/code> symbol).<\/p>\n<h4>Example:<\/h4>\n<div class=\"dark bg-gray-950 rounded-md border-[0.5px] border-token-border-medium\">\n<div class=\"flex items-center relative text-token-text-secondary bg-token-main-surface-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md\">javascript<\/p>\n<div class=\"flex items-center\"><span class=\"\" data-state=\"closed\"><button class=\"flex gap-1 items-center\">Copy code<\/button><\/span><\/div>\n<\/div>\n<div class=\"overflow-y-auto p-4\" dir=\"ltr\"><code class=\"!whitespace-pre hljs language-javascript\"><span class=\"hljs-variable language_\">window<\/span>.<span class=\"hljs-property\">location<\/span>.<span class=\"hljs-property\">hash<\/span> = <span class=\"hljs-string\">\"#newsection\"<\/span>;<br \/>\n<\/code><\/div>\n<\/div>\n<h3>7. Using <code>window.history.pushState<\/code><\/h3>\n<p>The <code>window.history.pushState<\/code> method adds an entry to the browser\u2019s session history stack, changing the URL without reloading the page. This is useful for single-page applications (SPAs).<\/p>\n<h4>Example:<\/h4>\n<div class=\"dark bg-gray-950 rounded-md border-[0.5px] border-token-border-medium\">\n<div class=\"flex items-center relative text-token-text-secondary bg-token-main-surface-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md\">javascript<\/p>\n<div class=\"flex items-center\"><span class=\"\" data-state=\"closed\"><button class=\"flex gap-1 items-center\">Copy code<\/button><\/span><\/div>\n<\/div>\n<div class=\"overflow-y-auto p-4\" dir=\"ltr\"><code class=\"!whitespace-pre hljs language-javascript\"><span class=\"hljs-variable language_\">window<\/span>.<span class=\"hljs-property\">history<\/span>.<span class=\"hljs-title function_\">pushState<\/span>({}, <span class=\"hljs-string\">\"\"<\/span>, <span class=\"hljs-string\">\"\/newpage\"<\/span>);<br \/>\n<\/code><\/div>\n<\/div>\n<h3>8. Using <code>window.history.replaceState<\/code><\/h3>\n<p>The <code>window.history.replaceState<\/code> method works like <code>pushState<\/code>, but it replaces the current history entry instead of adding a new one.<\/p>\n<h4>Example:<\/h4>\n<div class=\"dark bg-gray-950 rounded-md border-[0.5px] border-token-border-medium\">\n<div class=\"flex items-center relative text-token-text-secondary bg-token-main-surface-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md\">javascript<\/p>\n<div class=\"flex items-center\"><span class=\"\" data-state=\"closed\"><button class=\"flex gap-1 items-center\">Copy code<\/button><\/span><\/div>\n<\/div>\n<div class=\"overflow-y-auto p-4\" dir=\"ltr\"><code class=\"!whitespace-pre hljs language-javascript\"><span class=\"hljs-variable language_\">window<\/span>.<span class=\"hljs-property\">history<\/span>.<span class=\"hljs-title function_\">replaceState<\/span>({}, <span class=\"hljs-string\">\"\"<\/span>, <span class=\"hljs-string\">\"\/newpage\"<\/span>);<br \/>\n<\/code><\/div>\n<\/div>\n<h2>Practical Examples<\/h2>\n<h3>Example 1: Simple Redirection<\/h3>\n<p>Redirect users to another website after 3 seconds.<\/p>\n<div class=\"dark bg-gray-950 rounded-md border-[0.5px] border-token-border-medium\">\n<div class=\"flex items-center relative text-token-text-secondary bg-token-main-surface-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md\">html<\/p>\n<div class=\"flex items-center\"><span class=\"\" data-state=\"closed\"><button class=\"flex gap-1 items-center\">Copy code<\/button><\/span><\/div>\n<\/div>\n<div class=\"overflow-y-auto p-4\" dir=\"ltr\"><code class=\"!whitespace-pre hljs language-html\"><span class=\"hljs-meta\">&lt;!DOCTYPE <span class=\"hljs-keyword\">html<\/span>&gt;<\/span><br \/>\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">html<\/span> <span class=\"hljs-attr\">lang<\/span>=<span class=\"hljs-string\">\"en\"<\/span>&gt;<\/span><br \/>\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">head<\/span>&gt;<\/span><br \/>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">meta<\/span> <span class=\"hljs-attr\">charset<\/span>=<span class=\"hljs-string\">\"UTF-8\"<\/span>&gt;<\/span><br \/>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">title<\/span>&gt;<\/span>Redirect Example<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">title<\/span>&gt;<\/span><br \/>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">script<\/span>&gt;<\/span><span class=\"javascript\"><br \/>\n        <span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title function_\">redirect<\/span>() {<br \/>\n            <span class=\"hljs-variable language_\">window<\/span>.<span class=\"hljs-property\">location<\/span>.<span class=\"hljs-property\">href<\/span> = <span class=\"hljs-string\">\"https:\/\/www.example.com\"<\/span>;<br \/>\n        }<\/p>\n<p>        <span class=\"hljs-built_in\">setTimeout<\/span>(redirect, <span class=\"hljs-number\">3000<\/span>); <span class=\"hljs-comment\">\/\/ Redirect after 3 seconds<\/span><br \/>\n    <\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">script<\/span>&gt;<\/span><br \/>\n<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">head<\/span>&gt;<\/span><br \/>\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">body<\/span>&gt;<\/span><br \/>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">p<\/span>&gt;<\/span>You will be redirected in 3 seconds...<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">p<\/span>&gt;<\/span><br \/>\n<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">body<\/span>&gt;<\/span><br \/>\n<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">html<\/span>&gt;<\/span><br \/>\n<\/code><\/div>\n<\/div>\n<h3>Example 2: Conditional Redirection<\/h3>\n<p>Redirect users based on a condition (e.g., user login status).<\/p>\n<div class=\"dark bg-gray-950 rounded-md border-[0.5px] border-token-border-medium\">\n<div class=\"flex items-center relative text-token-text-secondary bg-token-main-surface-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md\">html<\/p>\n<div class=\"flex items-center\"><span class=\"\" data-state=\"closed\"><button class=\"flex gap-1 items-center\">Copy code<\/button><\/span><\/div>\n<\/div>\n<div class=\"overflow-y-auto p-4\" dir=\"ltr\"><code class=\"!whitespace-pre hljs language-html\"><span class=\"hljs-meta\">&lt;!DOCTYPE <span class=\"hljs-keyword\">html<\/span>&gt;<\/span><br \/>\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">html<\/span> <span class=\"hljs-attr\">lang<\/span>=<span class=\"hljs-string\">\"en\"<\/span>&gt;<\/span><br \/>\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">head<\/span>&gt;<\/span><br \/>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">meta<\/span> <span class=\"hljs-attr\">charset<\/span>=<span class=\"hljs-string\">\"UTF-8\"<\/span>&gt;<\/span><br \/>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">title<\/span>&gt;<\/span>Conditional Redirect Example<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">title<\/span>&gt;<\/span><br \/>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">script<\/span>&gt;<\/span><span class=\"javascript\"><br \/>\n        <span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title function_\">checkLogin<\/span>() {<br \/>\n            <span class=\"hljs-keyword\">var<\/span> isLoggedIn = <span class=\"hljs-literal\">false<\/span>; <span class=\"hljs-comment\">\/\/ This would typically come from your app logic<\/span><\/p>\n<p>            <span class=\"hljs-keyword\">if<\/span> (isLoggedIn) {<br \/>\n                <span class=\"hljs-variable language_\">window<\/span>.<span class=\"hljs-property\">location<\/span>.<span class=\"hljs-property\">href<\/span> = <span class=\"hljs-string\">\"\/dashboard\"<\/span>;<br \/>\n            } <span class=\"hljs-keyword\">else<\/span> {<br \/>\n                <span class=\"hljs-variable language_\">window<\/span>.<span class=\"hljs-property\">location<\/span>.<span class=\"hljs-property\">href<\/span> = <span class=\"hljs-string\">\"\/login\"<\/span>;<br \/>\n            }<br \/>\n        }<\/p>\n<p>        <span class=\"hljs-variable language_\">window<\/span>.<span class=\"hljs-property\">onload<\/span> = checkLogin;<br \/>\n    <\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">script<\/span>&gt;<\/span><br \/>\n<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">head<\/span>&gt;<\/span><br \/>\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">body<\/span>&gt;<\/span><br \/>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">p<\/span>&gt;<\/span>Checking login status...<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">p<\/span>&gt;<\/span><br \/>\n<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">body<\/span>&gt;<\/span><br \/>\n<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">html<\/span>&gt;<\/span><br \/>\n<\/code><\/div>\n<\/div>\n<h3>Example 3: Redirection After Form Submission<\/h3>\n<p>Redirect users to a thank-you page after submitting a form.<\/p>\n<div class=\"dark bg-gray-950 rounded-md border-[0.5px] border-token-border-medium\">\n<div class=\"flex items-center relative text-token-text-secondary bg-token-main-surface-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md\">html<\/p>\n<div class=\"flex items-center\"><span class=\"\" data-state=\"closed\"><button class=\"flex gap-1 items-center\">Copy code<\/button><\/span><\/div>\n<\/div>\n<div class=\"overflow-y-auto p-4\" dir=\"ltr\"><code class=\"!whitespace-pre hljs language-html\"><span class=\"hljs-meta\">&lt;!DOCTYPE <span class=\"hljs-keyword\">html<\/span>&gt;<\/span><br \/>\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">html<\/span> <span class=\"hljs-attr\">lang<\/span>=<span class=\"hljs-string\">\"en\"<\/span>&gt;<\/span><br \/>\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">head<\/span>&gt;<\/span><br \/>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">meta<\/span> <span class=\"hljs-attr\">charset<\/span>=<span class=\"hljs-string\">\"UTF-8\"<\/span>&gt;<\/span><br \/>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">title<\/span>&gt;<\/span>Form Submission Redirect<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">title<\/span>&gt;<\/span><br \/>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">script<\/span>&gt;<\/span><span class=\"javascript\"><br \/>\n        <span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title function_\">submitForm<\/span>(<span class=\"hljs-params\">event<\/span>) {<br \/>\n            event.<span class=\"hljs-title function_\">preventDefault<\/span>(); <span class=\"hljs-comment\">\/\/ Prevent the default form submission<\/span><br \/>\n            <span class=\"hljs-comment\">\/\/ Form submission logic goes here<\/span><br \/>\n            <span class=\"hljs-variable language_\">window<\/span>.<span class=\"hljs-property\">location<\/span>.<span class=\"hljs-property\">href<\/span> = <span class=\"hljs-string\">\"\/thank-you\"<\/span>;<br \/>\n        }<br \/>\n    <\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">script<\/span>&gt;<\/span><br \/>\n<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">head<\/span>&gt;<\/span><br \/>\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">body<\/span>&gt;<\/span><br \/>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">form<\/span> <span class=\"hljs-attr\">onsubmit<\/span>=<span class=\"hljs-string\">\"submitForm(event)\"<\/span>&gt;<\/span><br \/>\n        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">label<\/span> <span class=\"hljs-attr\">for<\/span>=<span class=\"hljs-string\">\"name\"<\/span>&gt;<\/span>Name:<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">label<\/span>&gt;<\/span><br \/>\n        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">input<\/span> <span class=\"hljs-attr\">type<\/span>=<span class=\"hljs-string\">\"text\"<\/span> <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\">\"name\"<\/span> <span class=\"hljs-attr\">name<\/span>=<span class=\"hljs-string\">\"name\"<\/span> <span class=\"hljs-attr\">required<\/span>&gt;<\/span><br \/>\n        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">button<\/span> <span class=\"hljs-attr\">type<\/span>=<span class=\"hljs-string\">\"submit\"<\/span>&gt;<\/span>Submit<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">button<\/span>&gt;<\/span><br \/>\n    <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">form<\/span>&gt;<\/span><br \/>\n<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">body<\/span>&gt;<\/span><br \/>\n<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">html<\/span>&gt;<\/span><br \/>\n<\/code><\/div>\n<\/div>\n<h3>Example 4: SPA Navigation<\/h3>\n<p>Use <code>history.pushState<\/code> for navigating within a single-page application without reloading the page.<\/p>\n<div class=\"dark bg-gray-950 rounded-md border-[0.5px] border-token-border-medium\">\n<div class=\"flex items-center relative text-token-text-secondary bg-token-main-surface-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md\">html<\/p>\n<div class=\"flex items-center\"><span class=\"\" data-state=\"closed\"><button class=\"flex gap-1 items-center\">Copy code<\/button><\/span><\/div>\n<\/div>\n<div class=\"overflow-y-auto p-4\" dir=\"ltr\"><code class=\"!whitespace-pre hljs language-html\"><span class=\"hljs-meta\">&lt;!DOCTYPE <span class=\"hljs-keyword\">html<\/span>&gt;<\/span><br \/>\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">html<\/span> <span class=\"hljs-attr\">lang<\/span>=<span class=\"hljs-string\">\"en\"<\/span>&gt;<\/span><br \/>\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">head<\/span>&gt;<\/span><br \/>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">meta<\/span> <span class=\"hljs-attr\">charset<\/span>=<span class=\"hljs-string\">\"UTF-8\"<\/span>&gt;<\/span><br \/>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">title<\/span>&gt;<\/span>SPA Navigation Example<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">title<\/span>&gt;<\/span><br \/>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">script<\/span>&gt;<\/span><span class=\"javascript\"><br \/>\n        <span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title function_\">navigate<\/span>(<span class=\"hljs-params\">path<\/span>) {<br \/>\n            <span class=\"hljs-variable language_\">window<\/span>.<span class=\"hljs-property\">history<\/span>.<span class=\"hljs-title function_\">pushState<\/span>({}, <span class=\"hljs-string\">\"\"<\/span>, path);<br \/>\n            <span class=\"hljs-variable language_\">document<\/span>.<span class=\"hljs-title function_\">getElementById<\/span>(<span class=\"hljs-string\">\"content\"<\/span>).<span class=\"hljs-property\">innerHTML<\/span> = <span class=\"hljs-string\">\"You are now at \"<\/span> + path;<br \/>\n        }<\/p>\n<p>        <span class=\"hljs-variable language_\">window<\/span>.<span class=\"hljs-property\">onpopstate<\/span> = <span class=\"hljs-keyword\">function<\/span>() {<br \/>\n            <span class=\"hljs-variable language_\">document<\/span>.<span class=\"hljs-title function_\">getElementById<\/span>(<span class=\"hljs-string\">\"content\"<\/span>).<span class=\"hljs-property\">innerHTML<\/span> = <span class=\"hljs-string\">\"You are now at \"<\/span> + <span class=\"hljs-variable language_\">window<\/span>.<span class=\"hljs-property\">location<\/span>.<span class=\"hljs-property\">pathname<\/span>;<br \/>\n        }<br \/>\n    <\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">script<\/span>&gt;<\/span><br \/>\n<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">head<\/span>&gt;<\/span><br \/>\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">body<\/span>&gt;<\/span><br \/>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">button<\/span> <span class=\"hljs-attr\">onclick<\/span>=<span class=\"hljs-string\">\"navigate('\/home')\"<\/span>&gt;<\/span>Home<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">button<\/span>&gt;<\/span><br \/>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">button<\/span> <span class=\"hljs-attr\">onclick<\/span>=<span class=\"hljs-string\">\"navigate('\/about')\"<\/span>&gt;<\/span>About<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">button<\/span>&gt;<\/span><br \/>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">button<\/span> <span class=\"hljs-attr\">onclick<\/span>=<span class=\"hljs-string\">\"navigate('\/contact')\"<\/span>&gt;<\/span>Contact<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">button<\/span>&gt;<\/span><br \/>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\">\"content\"<\/span>&gt;<\/span>You are now at \/<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span><br \/>\n<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">body<\/span>&gt;<\/span><br \/>\n<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">html<\/span>&gt;<\/span><br \/>\n<\/code><\/div>\n<\/div>\n<h2>Conclusion<\/h2>\n<p>JavaScript redirections are a versatile tool for managing navigation and enhancing user experience on websites. By using methods such as <code>window.location.href<\/code>, <code>window.location.replace<\/code>, <code>window.history.pushState<\/code>, and others, you can effectively control how and when users are redirected. Whether you need to redirect after form submission, based on conditions, or within a single-page application, understanding these techniques will help you implement smooth and efficient redirections.<\/p>\n<ul>\n<li aria-level=\"1\"><b>\u00a0Use unique titles and snippets to describe your page<\/b><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">Unique, descriptive title&gt; elements and helpful meta descriptions assist users in quickly identifying the best result for their goal, and our guidelines explain what makes a good title&gt; element and meta description. JavaScript can be used to set or change the meta description as well as the title&gt; element.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Depending on the user&#8217;s query, Google Search may display a different title link. This occurs when the title or description is irrelevant to the page content or when we discover alternatives on the page that better match the search query. Learn why the title of a search result may differ from the title of the page.<\/span><\/p>\n<ul>\n<li aria-level=\"1\"><b>\u00a0Create code that is compatible<\/b><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">Browsers provide numerous APIs, and JavaScript is a rapidly evolving language. Google has some restrictions on the APIs and JavaScript features that it supports. Follow our JavaScript troubleshooting guidelines to ensure your code is Google-compatible. If you feature-detect a missing browser API, we recommend using differential serving and polyfills. We recommend you check the polyfill documentation for potential limitations because some browser features cannot be polyfilled.<\/span><\/p>\n<ul>\n<li aria-level=\"1\"><b>Make use of meaningful HTTP status codes<\/b><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">Googlebot uses HTTP status codes to determine whether or not something went wrong while crawling the page. Use a meaningful status code to tell Googlebot if a page can&#8217;t be crawled or indexed, such as 404 for a page that couldn&#8217;t be found or 401 for pages that require a login. HTTP status codes can be used to notify Googlebot when a page has moved to a new URL, allowing the index to be updated accordingly.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Here is a list of HTTP status codes and their impact on Google Search. Soft 404 errors should be avoided in single-page apps.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Client-side routing is commonly used in client-side rendered single-page apps. Using meaningful HTTP status codes may be impossible or impractical in this case. Use one of the following strategies to avoid soft 404 errors when using client-side rendering and routing:<\/span><\/p>\n<ul>\n<li aria-level=\"1\"><b>Instead of fragments, use the History API<\/b><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">When Googlebot searches your pages for links, it only considers URLs in the href attribute of HTML links. Use the History API to implement routing between different views of your web app in single-page applications with client-side routing. Avoid using fragments to load different page content to ensure that Googlebot can find links.<\/span><\/p>\n<ul>\n<li aria-level=\"1\"><b>Inject the rel=&#8221;canonical&#8221; link tag correctly<\/b><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">While we do not recommend using JavaScript for this, a rel=&#8221;canonical&#8221; link tag can be injected with JavaScript. When rendering the page, Google Search will use the injected canonical URL.\u00a0<\/span><\/p>\n<ul>\n<li aria-level=\"1\"><b>Use meta robots tags with caution<\/b><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">The meta robots tag can be used to prevent Google from indexing a page or following links. JavaScript can be used to add a meta robot tag to a page or change its content. When Google encounters noindex in the robots meta tag prior to running JavaScript, the page is not rendered or indexed.<\/span><\/p>\n<ul>\n<li aria-level=\"1\"><b>Use long-lasting caching<\/b><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">Googlebot caches aggressively to reduce network requests and resource consumption. WRS may disregard caching headers. As a result, WRS may use out-of-date JavaScript or CSS resources. Content fingerprinting solves this problem by creating a fingerprint of the filename&#8217;s content, such as main.2bb85551.js. Because the fingerprint is determined by the content of the file, each update generates a unique filename.<\/span><\/p>\n<ul>\n<li aria-level=\"1\"><b>Make use of structured data<\/b><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">You can create the necessary JSON-LD and inject it into the page using JavaScript if you use structured data on your pages. Make sure to test your implementation to prevent issues.<\/span><\/p>\n<ul>\n<li aria-level=\"1\"><b>Adhere to best practices for web components<\/b><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">Google provides support for web components. When Google renders a page, it flattens the content of the shadow DOM and light DOM. This means that Google can only see the content visible in the rendered HTML. Use the Mobile-Friendly Test or the URL Inspection Tool to inspect the rendered HTML to ensure that Google can still see your content after it has been rendered.\u00a0 <\/span><span style=\"font-weight: 400;\">After rendering, Google will index. <\/span><span style=\"font-weight: 400;\">Google will not be able to index the content if it is not visible in the rendered HTML.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">The example below shows how to create a web component that displays its light DOM content inside its shadow DOM. A Slot element can be used to ensure that both light and shadow DOM content is displayed in the rendered HTML.<\/span><\/p>\n<ul>\n<li aria-level=\"1\"><b>Image and lazy-loaded content should be fixed<\/b><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">Images can be quite expensive in terms of bandwidth and performance. Lazy-loading images only when the user is about to see them is a good strategy. Follow our lazy-loading guidelines to ensure you&#8217;re implementing lazy-loading in a search-friendly manner.<\/span><\/p>\n<ul>\n<li aria-level=\"1\"><b>Design for usability<\/b><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">Make pages for people, not just search engines. Consider your customers&#8217; needs when designing your website. Google will not be able to index the content if it is not visible in the rendered HTML.<\/span><\/p>\n<h2><b>CONCLUSION<\/b><\/h2>\n<p><span style=\"font-weight: 400;\">Window. location. replace is the most commonly used method for implementing JavaScript redirects,<br \/>\n<\/span><span style=\"font-weight: 400;\">for example,<\/span><span style=\"font-weight: 400;\">window. location.replace(\u201chttps:\/\/dantaylor.online\u201d); <\/span><span style=\"font-weight: 400;\">You can get to my website&#8217;s homepage by opening Dev Tools (CTRL + SHIFT + I) and entering the above line in Console.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Another approach is to use window.location.href, but this can cause issues for users.<\/span><span style=\"font-weight: 400;\">When a user clicks back with the replace method, the browser loads the previous page; however, with the href method, the browser loads and redirects the user back to the page they were just trying to leave (because it&#8217;s saved in the navigation history).<\/span><span style=\"font-weight: 400;\">This results in a UX redirect loop\/trap, which causes the user to close the tab and have a bad experience with the website.<\/span><span style=\"font-weight: 400;\">There are pre-built redirect handling and implementation methods for many popular headless platforms, such as Gatsby. You can use Gatsby to implement 1:1 redirects, wildcard redirects, and &#8220;splat&#8221; redirects by installing the gatsby-plugin-gatsby-cloud.<\/span><span style=\"font-weight: 400;\">Similarly, popular headless CMSs such as Jekyll and Strapi include prebuilt modules and plugins to make redirects easier to implement.<\/span><\/p>\n<h2><b>Avoid infinite redirect loops<\/b><\/h2>\n<p><span style=\"font-weight: 400;\">When window.location.replace is used on a specific page, that page is not saved in the session history. So, if you enter a page and are redirected, you cannot return to that page by clicking the back button. You&#8217;ll be taken to a previous page.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">That is not the case with a window.location.href. When you click back, the same page unloads again, your current URL location is overwritten, and you are redirected to the page you just wanted to leave. This is a never-ending loop. Keep that in mind if you intend to use this redirect method.<\/span><\/p>\n","protected":false},"excerpt":{"rendered":"<p>How to do JavaScript Redirect for SEO JavaScript redirects are one of the methods available to webmasters for informing both users and search engines that the requested URL is temporarily&hellip;<\/p>\n","protected":false},"author":1,"featured_media":3107,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"om_disable_all_campaigns":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"_uf_show_specific_survey":0,"_uf_disable_surveys":false,"footnotes":""},"categories":[127],"tags":[555,420,556,51],"class_list":["post-3106","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-seo","tag-javascript","tag-redirect","tag-rendering","tag-seo"],"_links":{"self":[{"href":"https:\/\/echopx.com\/blog\/wp-json\/wp\/v2\/posts\/3106","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/echopx.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/echopx.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/echopx.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/echopx.com\/blog\/wp-json\/wp\/v2\/comments?post=3106"}],"version-history":[{"count":5,"href":"https:\/\/echopx.com\/blog\/wp-json\/wp\/v2\/posts\/3106\/revisions"}],"predecessor-version":[{"id":7329,"href":"https:\/\/echopx.com\/blog\/wp-json\/wp\/v2\/posts\/3106\/revisions\/7329"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/echopx.com\/blog\/wp-json\/wp\/v2\/media\/3107"}],"wp:attachment":[{"href":"https:\/\/echopx.com\/blog\/wp-json\/wp\/v2\/media?parent=3106"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/echopx.com\/blog\/wp-json\/wp\/v2\/categories?post=3106"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/echopx.com\/blog\/wp-json\/wp\/v2\/tags?post=3106"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}