Apple Devices Hiding Parts of the Page Title

While working on a client website, I discovered an odd design decision on Apple devices—a bug or user experience improvement, depending on your point of view. Apple is removing part of the page title.

When a portion of the web page title (the <title> element) roughly matches a portion of the URL, and a separator character is present, the matching part of the page title is hidden in Share previews. That is, if the page is titled “Example | My Company” and the url is “https://example.com”, then the displayed title, in certain locations, will only show “My Company”.

The reality of when this happens is more complex (and I’m sure I haven’t found the edges of this scenario), so let’s pick it apart. I’ve set up a simple website called Safari Title Test on Netlify to help with testing, with a repository for it on Github.

The website is a very simple collection of pages, each containing the text “Safari Title Test” and “Company Name”, with a different character separating them, as the page title. The url also contains “safari-title-test”. The separator characters are just ones I thought that might be commonly used by a site, though I’m sure I’ve missed others. As you can see on the site, I’ve found 5 that trigger this hiding behaviour: pipe (|), dash (-), en-dash (–), em-dash (—), and colon (:).

The simplest way to see this issue in action is with Safari. Click the Share button and in the menu that pops up, you’ll see that only “Company Name” is shown along with the URL. This seems to hold true for any place MacOS and iOS create an embed for the page: the share menu, links copied to iMessage, Apple Mail, and other Apple apps. Adding a bookmark doesn’t do this, nor do third party apps like Signal.

While this isn’t a bug per-se (it’s intentional), it falls into the same dubious category as Safari hiding the full URL by default. But unlike that change, and as innocuous as it may be, it goes directly against what an author specified when they coded the website. Hopefully this helps future me and others trying to figure out why part of the page title has disappeared.