如何在网站上设置HTML重定向

Jamie Juviler
Jamie Juviler

Updated:

发布:

If you make frequent updates to your business website, you’re probably familiar with redirecting. A redirect essentially tells the user’s browser, “Hey, the content you’re looking for isn’t at this URL. But don’t worry, we’ll send you to the right place.”

在笔记本电脑上设置HTML重定向的人

虽然最好在可能的情况下避免重定向,但大多数网站所有者通常都需要在某个时候,无论是重新安置页面,重新安排网站结构,移动域还是将URL从HTTP更新为HTTPS。正确重定向确保访问者和搜索引擎都不会遇到死胡同404页,这可能会损害您的用户体验和SEO排名。

无论您进行重定的原因是什么,都有几种方法可以解决。在这篇文章中,您将学习一种常见方法,即HTML重定向。我们将讨论what an HTML redirect isandhow to add them to your website, even if you don’t have in-depth knowledge ofhtml。We'll also look at some替代方法for better accessibility. Let’s get started.

Download Now: Free HTML & CSS Hacks

什么是HTML重定向?

HTML重定向(有时也称为元刷新或元重定向)是将一个HTML页面重定向到HTML源代码中的另一个HTML页面的方法。HTML重定向在该文档的部分告诉Web浏览器自动刷新不同的页面,并在刷新之前具有可选的时间延迟。

htmlredirects are the simplest way to redirect a URL. They only involve a small modification to the source code of the old HTML page, and can be made easily and quickly. A HTML redirect will send both human users and search engines to the page you want them to see.

Additionally, an HTML redirect lets you set a delay time (in seconds) before the user orsearch engine bot被发送到新页面。如果您想在重定向发生之前显示简短消息,则此延迟会派上用场。

如何重定向到HTML中的另一页

将一个HTML页面重定向到另一个页面,你娘家姓的d to add a在内部标记section of the old HTML page. Thesection of an HTML document contains metadata that is useful for the browser, but invisible to users viewing the page.

这个语法tag is as follows:



In an HTML redirect, thetag contains two attributes,http-equivandcontent。The value ofhttp-equiv总是refresh— this tells the browser that you want to automatically refresh the page.

Next, thecontent属性需要两个值:

  • delay_timeis a numeric value that sets the delay before the browser loads the new web page. For instance, a value of3would make the browser wait three seconds on the old page before redirecting.
  • new_website_urlis the URL of the web page you want to redirect to.

Be sure to place these two values forcontent在一对双引号中,被半洛克隔开。否则,重定向将不起作用。

If you want to instantly send users to the new web pages, simply set your delay time to0。然而,there may be instances when you want to set a delay before redirecting. The most common reason is to inform users that the current page no longer exists and that they will be redirected soon. This message usually includes a link to send users to the new page if they are not redirected within a set amount of time.

If a visitor is using an older web browser, it’s also possible that the标签将无法正确读取,并且重定向不会发生。如果发生这种情况,设置延迟允许用户单击旧页面上的超链接并将其发送到新页面。

该视频更详细地解释了所有这些步骤。

重定向HTML代码示例

Now, let’s look at a code example for an HTML redirect to better understand how they work.

Here’s the code for an HTML page that redirects users tohubspot.com延迟三秒钟后。请注意标签放在of the document.


<!doctype html>


旧页面




This page has been moved. If you are not redirected within 3 seconds, click here to go to the HubSpot homepage.




此代码是如何编写HTML重定向的一个很好的例子,原因有两个。首先,延迟足够短,不会对用户体验造成太多破坏,同时仍为大多数用户提供足够的时间阅读屏幕上的消息。

其次,该消息为用户提供了立即进入新页面的选项。如果由于浏览器不兼容,HTML刷新不起作用,它还为用户提供了一个,这些访问者可以单击锚点链接即可转到新页面。

HTML重定向问题和替代方案

While HTML redirects are the simplest way to implement a redirect, they also present可访问性问题。一些较旧的浏览器不会渲染正确标记,这会导致旧页面在新页面加载之前在屏幕上闪烁(即使您设置了超过0的延迟),或者页面根本没有刷新。

如果您预见到许多用户的问题,则可以将延迟时间设置为0and, in case the browser does not automatically load the new page, include an anchor link to the new page in thesection as shown in the example above.

To avoid these problems, consider using another redirect method on your website. The most common redirect method today is an HTTP redirect. HTTP redirects are configured on the server hosting the website, and can be either a 301 (permanent) redirect or a 302 (temporary) redirect.

看我们设置301个重定向的指南for more help here — your process will depend on what specific technologies you use to power your website. For example, if you run a WordPress website, your best bet is to use aWordPress重定向插件, which will take care of the back-end stuff for you and allows you to manage and track all redirects on your site from your dashboard.

JavaScript redirects are another common alternative, although this requires some knowledge of JavaScript programming and likely more trial-and-error to get right. To learn more about JavaScript redirects, you can refer to这个初学者的教程

htmlRedirects: Send users to the right place.

对于您很快需要将用户从一个页面引导到另一页的情况,HTML重定向派上用场,是任何网站所有者都可以在其后袋中拥有的好工具。

然而,this kind of redirect probably shouldn’t be your go-to every time. It’s often better for all users to implement a standard HTTP 301 (permanent) redirect. When in doubt, reach out to your platform support team to get their opinion on what’s best for your users and your SEO.

New Call-to-action

Topics: html

Related Articles

我们致力于您的隐私。HubSpot使用您提供给我们的信息来与您联系有关我们的相关内容,产品和服务。您可以随时退订这些通信。有关更多信息,请查看我们的隐私政策

Learn more about HTML and CSS and how to use them to improve your website.