Changing the URL of a product page

When you are on a product page, the URL of every product always looks clean. The name in the URL makes it very SEO friendly.

In this recipe, we will explore the possibilities of URL rewrites in Magento.

Getting ready

In the backend, navigate to Products | Inventory | Catalog and look for a simple product with visibility Catalog, Search. This recipe is based on the Endeavor Daytrip Backpack product from the sample data.

How to do it

In the following steps, we will see the procedure for changing a URL of a product detail page.

1. Find the appropriate product in the frontend. You can find by navigating to Gear | Bags. If you open the product detail page, you will see the URL /endeavor-daytrip-backpack.html.
2. In the backend, change the URL key attribute to buy-now-endeavor-daytrip-backpack.
3. Reload the product in the frontend. The URL will change to the one we have just entered in the backend.

   Tip

   When you select the Create Permanent Redirect option for an old URL checkbox, Magento will create a permanent 301 redirect response for the old URL of the product. The checkbox is located in the product edit page in the backend under the URL Key attribute.

4. Empty the URL key attribute at the backend and save the product again. You will see that Magento autogenerates the URL key attribute based on the name of the product.
5. At the backend, navigate to Stores | Configuration | Catalog | Search Engine Optimizations. Clear the product URL Suffix field and save the configuration.
6. Clear the cache by navigating to System | Cache Management.
7. Reload the product in the frontend, and you will see that the .html suffix is gone.

   Note

   In Magento 1, there was a URL rewrite index, in Magento 2, this index is replaced by a new system to generate the URLs.

How it works

In Magento, there is a URL rewrite system that maps an SEO-friendly URL to the system's URL. In technical terms, this is also called routing. In the backend, you can see all the URL rewrites that are available in the installation.

You can see this by navigating to Marketing | SEO & Search | URL Rewrites in the backend. On this page, you can see the complete list of the URLs that are available in the web shop. If we search for endeavor-daytrip-backpack, we will see a list of all the URLs, which looks like this.

What we see is the following:

• Permanent 301 redirect responses (rows where the Redirect Type column is Permanent (301))
• The Product URL
• The URL of a product in every category

All the URLs are generated separately for each store views. When a product is enabled in multiple stores, it is normal that a product has more than one URL.

There's more

On the URL rewrite page, it is also possible to add custom URL rewrites. For example, a URL rewrite for the contact page.

When adding the Add new URL Rewrite button, a form shows up. The following screenshot shows us how we can create an alias from the contact-us.html URL to the /contact page:

In the Store option, you can configure the store for the URL rewrite.

The value in the Request Path field is the path that you want to rewrite; in this case, we want to rewrite something on the /contact-us.html path.

The value in the Target Path field is the path where the request will end; in this case, it is the /contact page.

If the value in Redirect Type is set to No, the target path will be rendered on the request path (so, the URL doesn't change). You also have the choice to redirect the page with a permanent (301) or temporary (302) redirect.