Line breaks in page title and description meta tag lead to awkward link previews on other sites
Description
Steps to reproduce
Paste a link from AO3, e.g. a news post, onto a site like Bluesky or Tumblr that generates automatic link previews.
What happens
On some sites, the link preview has the page title broken across lines, e.g. the news post title will be on one line, the | character on the next, and then the site name after that.
On other sites, it might have extra space between parts (Bitly is good at that), like Page Title | Archive of Our Own
Additionally, some sites display the content of the description meta tag, and break that into two lines as well (as seen in the bit.ly screen shot below).
What should happen
It should be on one line that can be wrapped or truncated as needed by whoever is generating the link preview.
Notes
This happens because it’s not stripping the line breaks from the page title or the description meta tag. If you view the page source (which is what you’ll have to do on staging to test this, since you won’t be able to link to it), you see they look like this:
(Note: I do mean page source. Depending on the browser, using the inspector may strip the line breaks and display it as, e.g., <title>Admin Posts | Archive of Our Own</title> unless you edit the node.)
That happens because the code in application.html.erb is like this:
The best fix would probably involve putting the page title logic in a browser_page_title helper.
Testing notes
It would be a good idea to check that the browser page titles on the following pages display as usual in your browser:
a work, logged in and out, ideally with and & or < in the title
an admin post, ideally with an & or < in the title
Attachments
1
Activity
Ridicully
April 28, 2025 at 8:49 AM
Checked a work and and admin post - both with ampersands in the title - while logged in and out and the page titles display as usual. Double checked via source and the line breaks had been properly stripped from the title as expected.
Bilka
April 27, 2025 at 11:34 PM
Tested a work (logged in and out) and an admin post with & and < in the title, both show the title in the browser tab with exactly those symbols, as expected.
Viewed the source of those pages, the tags page, the new work page, and the content policy. All have the title tag and the meta tag with the description attribute in one line all neat and pretty. Looks good
Steps to reproduce
Paste a link from AO3, e.g. a news post, onto a site like Bluesky or Tumblr that generates automatic link previews.
What happens
On some sites, the link preview has the page title broken across lines, e.g. the news post title will be on one line, the | character on the next, and then the site name after that.
On other sites, it might have extra space between parts (Bitly is good at that), like
Page Title | Archive of Our OwnAdditionally, some sites display the content of the description meta tag, and break that into two lines as well (as seen in the bit.ly screen shot below).
What should happen
It should be on one line that can be wrapped or truncated as needed by whoever is generating the link preview.
Notes
This happens because it’s not stripping the line breaks from the page title or the description meta tag. If you view the page source (which is what you’ll have to do on staging to test this, since you won’t be able to link to it), you see they look like this:
(Note: I do mean page source. Depending on the browser, using the inspector may strip the line breaks and display it as, e.g.,
<title>Admin Posts | Archive of Our Own</title>unless you edit the node.)That happens because the code in application.html.erb is like this:
The best fix would probably involve putting the page title logic in a
browser_page_titlehelper.Testing notes
It would be a good idea to check that the browser page titles on the following pages display as usual in your browser:
a work, logged in and out, ideally with and & or < in the title
an admin post, ideally with an & or < in the title