Welcome to Fabric, FINN’s Design System

Fabric provides components and tools to our product teams, to help them work more efficiently in creating simple, intuitive, and beautiful experiences for FINN users.

Page titles

Although not visible on the page itself, well-formed <title> tags make it easier to navigate to a webpage from outside our own UI, like browser features or links from external websites. The <title> tag is displayed in places like:

  • Browser tab
  • Bookmarks
  • History
  • Back/forward button
  • Facebook/Twitter
  • Google (sometimes modified)
  • Task bar

To provide a predictable navigation with these tools, we need to be consistent on how we form the titles on different pages.

The philosophy

The most relevant phrase for the page's content should be put early in the title, then fill out with more details or a slogan/sales pitch if there's space for it. What the most important phrase is, may differ from market to market. Market front pages and pages not belonging to a specific market should have the extension - FINN.no, while other pages shall have | FINN <market name>.

A title should not be more than 60 characters to avoid cropping. The exception is for pages where we have limited control on the title length, like on the ad pages. We should NOT crop such titles, as we have little control on how that will be handled on different websites or features.

The formula

Front pages

<market name> (slogan/sales pitch) | FINN.no

Sub pages

<content title> | FINN <market name>

Examples

MarketFrontpageSearch pageSearch with filtersAd page
HomepageFINN.no - Mulighetenes marked
TorgetTorget - FINN.noNytt og brukt til salgs | FINN torgetDyr og utstyr til salgs | FINN torget<ad title> | FINN torget
EiendomEiendom - FINN.noBolig til salgs | FINN eiendomBolig til salgs i Nordstrand | FINN eiendom<ad title> | FINN eiendom
BilBil & næring - FINN.noBiler til salgs | FINN bilAudi e-tron - Biler til salgs | FINN bil<ad title> | FINN bil
JobbJobb - FINN.noLedige stillinger | FINN jobbLedige stillinger - Ingeniør i Oslo | FINN jobb<ad title> | FINN jobb
ReiseBillige flybilletter | FINN reiseFlybilletter | FINN reiseFlybilletter - Oslo til Riga | FINN reise
ReiseBillige hotell | FINN reiseHotell - sammenlign pris | FINN reiseHotell i Riga | FINN reise<hotel name> | FINN reise
ReiseBillige leiebiler | FINN reise
ReiseBillige pakkereiser | FINN reisePakkereiser - sammenlign pris | FINN reisePakkereiser til Riga | FINN reisePakkereiser til <hotel name>, <city?> | FINN reise
ReiseHytter og feriehus til leie | FINN reiseFeriehus og hytter - sammenlign pris | FINN reiseFeriehus og hytter til leie i Tønsberg | FINN reise<ad title> | FINN reise
ØkonomiLån og forsikring til bil | FINN økonomiTilbud på billån | FINN økonomi
ØkonomiLån og forsikring til bolig | FINN økonomiTilbud på boliglån | FINN økonomi
ØkonomiLån og forsikring til båt | FINN økonomiTilbud på båtlån | FINN økonomi
ØkonomiLån og forsikring til MC | FINN økonomiTilbud på MC-lån | FINN økonomi
NettbilSelg bil til forhandler | FINN.no
BilabonnementBilabonnement - Velg blant flere tilbydere | FINN.noSøk etter bilabonnement | FINN bilabonnementSøk etter bilabonnement i Trondheim | FINN bilabonnement<car model> fra <dealer> | FINN bilabonnement

Comments and questions

The above examples are suggestions. If you think your page will work better with a different title, feel free to use that as long as you follow the philosophy. For questions, ask on FINN seo.