URL Design

Try to think through and plan for the URL structure when you are designing your product. Don’t let frameworks or chance affect the result.


DO'S & DON'TS

  • Provide canonical links on all pages.
  • Write URLs for humans.
  • Write descriptive URLs.
  • Make URLs hackable.
  • Use hyphens instead of underscore.
  • Use lowercase letters.
  • Don't change URLs without redirects.
  • Don't rely on hash-bangs.
  • Don't use unsafe characters.
  • Don't write too long URLs.
  • Don't use trailing slash.
  • Don't include file extensions.

Design URLs for people

The URL is a navigation element and a promise to the user about which content she will come to and how it is organised in a possible hierarchical structure.

Even if URLs are affecting SEO, you should first and foremost design them for people. From a SEO perspective, the most important is that URLs don’t change, that redirections are done for moved pages, and that duplicated indexation is avoided.

Always use real URLs, never rely on hash-bangs

Use progressive enhancement, never rely solely on Javascript to show content. In single page applications, always push a valid URL via the HTML5 History API when navigation and/or loading of content occurs.

Don’t use JavaScript dependent URLs like hash-bangs #!. The fragment identifier introduced by the hash mark # is an optional last part of a URL for a document. It doesn’t get sent to the server and should only be used to identify a portion of a document.

Write descriptive URLs

URL:s should describe what the page/view is about. A starting point should be to use the heading as the last part of the URL (so called slug). Avoid nonsense characters like ID:s and parameters.

Example of a non-descriptive URL

https://www.svt.se/nyhetsklipp/nyheter/article5811002.svt

Recommended

https://www.svt.se/nyhetsklipp/sverige-och-norge-i-sopbrak

Avoid too long URLs

URLs should not be longer than 70-75 characters. Longer URLs usually have bad readability. Also, the SEO is suffering and some old email clients might have problems displaying long URLs.

Example of a long URL

https://www.svt.se/melodifestivalen/fran-samir-och-viktor-till-molly-sanden-startordningen-i-melodifestivalen-2016-oscar-zia-far-unik-plats

Recommended

https://www.svt.se/melodifestivalen/startordningen-i-melodifestivalen

Avoid URLs with trailing slash ("/")

It doesn’t really matter if the URL ends with "/" or not, but we should be consistent over all products. Semantically speaking, you could argue that URLs shouldn’t end with a trailing slash as they are not proper folders.

Example of trailing slash URL

https://www.svt.se/melodifestivalen/

Recommended

https://www.svt.se/melodifestivalen

Avoid file extensions in URLs

Avoid file extensions in URLs as they risk not being future compatible, which means we would have to redirect them all very thoroughly.

Example of URL with file extension

https://vader.svt.se/Pollen.aspx

Recommended

https://vader.svt.se/pollen

Avoid parameters in URLs except for search, filtering, sorting and pagination

Parameters can be difficult to understand by the user, and are bad from a SEO perspective. URLs with parameters often get punished by Google as they are seen as "dynamic" content instead of editorial content.

Example of URL with parameters

https://vader.svt.se/vaer.aspx?lat=49.7666330&lon=6.6567553&m=10

Recommended

https://vader.svt.se/tyskland/kurenz

Search should always use the q parameter, while filters, sort options and pagination can use any parameter name. Keep in mind to block Google from indexing sort, filter and pagination-URLs with canonical and/or robots.txt. There could be an enormous amount of combinations to index otherwise, which could lead to duplicated indexed content as well as too many indexed list pages compared to content pages.

Examples of URLs indexed by mistake

https://www.svtplay.se/video/1332366/sommarlagret/avsnitt-23?start=autohttps://www.svtplay.se/video/5187280/langdskidor-varldscupen-lillehammer/langdskidor-varldscupen-lillehammer-06-12-10-00?tab=helaprogram

If pagination is used, rel="next" and rel="prev" should be used in the links between pages as explained on Google’s Webmaster Central Blog.

Pages with parameters in the URL should work without parameters

Don’t break pages that use parameters in URLs. Just make them work without sort, filter or pagination.

Make sure that pages using parameters have correct canonical links. Usually, the canonical link should be without parameters. This is to avoid that many versions of the same page get indexed. Exception: paginated pages should not provide canonical links to first page in the series.

Example

https://www.svtplay.se/dokumentar?rattigheter=mobil&tab=senaste

Canonical link

https://www.svtplay.se/dokumentar

URLs should always be hackable

A clever user should be able to figure out how the URLs are structured and change the URL manually to navigate.

Example

https://www.svt.se/melodifestivalen/deltavling-1/bidrag

If this page shows all contestants for the first Eurovision final, the user shold be able to figure out that: https://www.svt.se/melodifestivalen/deltavling-2/bidrag will show the contestants for the second final.

Furthermore, the user should be able to reach an overview page for the final by removing the last part from the URL: https://www.svt.se/melodifestivalen/deltavling-1

And reach the first page for the eurovision song contest by removing the last part again: https://www.svt.se/melodifestivalen

Use hyphens instead of underscore

Hyphens benefit from better SEO value and give slightly better readability compared to underscore. Use hyphens to separate words in the URL. Make sure that hyphens aren’t repeated after each other (Often the case when the heading contains non-standard characters)

Example of URL lacking hyphen

https://www.oppetarkiv.se/etikett/ovrigt/Caisa%20Westling/

Recommended

https://www.oppetarkiv.se/etikett/ovrigt/caisa-westling

Example of URL containing underscore instead of hyphen

https://www.oppetarkiv.se/etikett/medverkande/Torsten_Lilliecrona/

Recommended

https://www.oppetarkiv.se/etikett/medverkande/torsten-lilliecrona

Example of URL containing repeated hyphens

https://www.svt.se/gentlemen--gangsters/

Recommended

https://www.svt.se/gentlemen-och-gangsters/

Avoid too many levels/folders in the URL structure

Example of URL with unnecessary folder https://www.oppetarkiv.se/etikett/ovrigt/caisa-westling Recommended https://www.oppetarkiv.se/etikett/caisa-westling

Avoid spaces and "unsafe" characters in URLs

Although modern web browsers better support unsafe characters in URLs, it’s still recommended to avoid them. Using unsafe characters may result in bad readability.

Safe characters include alphanumerics [0-9a-zA-Z], special characters $-_.+!*'(), and reserved characters used for their reserved purposes (e.g., question mark used to denote a query string).

Example of a URL that contains unsafe letters https://www.oppetarkiv.se/etikett/medverkande/G%C3%B6rel%20Crona/ Recommended https://www.oppetarkiv.se/etikett/medverkande/gorel-crona

Always use lowercase letters in URLs

Some web servers (Unix/linux) distinguish between different cases in URLs, and some (Windows) don’t. To make sure that our URLs stay unique in all environments now and in the future, we should keep them lowercase.

Avoid changing URLs

Cool URLs never change. If you change URLs, make sure to create proper 301 redirects to take care of both users and link power.

When URLs collide, add number at the end of the slug

When two URLs would collide we append a dash followed by a number at the end of the new URL. Numbers should be as short as possible, which means we use -1 for the first duplicate, -2 for the next etc.

Example of existing URL

https://www.svt.se/recept/pannkakor

Example of colliding URL with number at the end

https://www.svt.se/recept/pannkakor-1

Guidelines on canonical links

  • Always provide a canonical link in <head>. This will minimize the risk of Google indexing duplicated versions of the same page.
  • Lowercase characters
  • No trailing slash
  • No parameters (except search)
  • Make sure that Open Graph, Twitter card and canonical URL:s are exactly the same.
  • Canonical links should always be absolute
  • Don't use canonical on paginated pages, just the first page