Repository: cal-itp/benefits

Issue:
Page titles contain extra spaces, characters
Our page titles (the string that shows up e.g. in the browser tab) are a little funky. They contain a bunch of extra spaces and weird formatting. For example, the `dev` site has this in the HTML source:

```html
<title>
      
        Transit Benefits: Introduction |
      
      Cal-ITP
    </title>
```

In the browser this isn't really a problem; extra spaces are truncated in the tabs:

![image](https://user-images.githubusercontent.com/1783439/197638842-440629f3-1388-460a-88ef-1b35e7b7107a.png)

However in certain situations, especially where links are expanded for previews (like in Social Media sites, comms apps like Slack, etc.), this extra spacing and weird formatting is more apparent:

![image](https://user-images.githubusercontent.com/1783439/197639119-580000b0-5e3b-4935-9ad9-690d69b01eb3.png)

## To Reproduce

Steps to reproduce the behavior:

1. Copy a link from the public facing Benefits app, e.g. https://benefits.calitp.org
2. Paste this link into an app that can expands links for previews, like Slack
3. See the weird title formatting in the expanded preview 

## Expected behavior

* There shouldn't be any extra spaces in the titles
* We should confirm this is the pattern we want (I'm thinking...probably not?) `Transit Benefits: <Page Title> | Cal-ITP`
  * Alternate suggestion: `<Page Title> | Cal-ITP Benefits`



Discussion:
I'm checking for other government sites and government site style guides for guidance on the page titles.

https://www.usa.gov/
https://www.usa.gov/benefits
https://www.usa.gov/food-help
https://login.gov/help/
https://login.gov/help/get-started/overview/

Seems like the common pattern here is `<Page Title> | <app name or app url>`. We'd have to decide whether the app name is the same across English or Spanish or different.

<img width="754" alt="image" src="https://user-images.githubusercontent.com/3673236/197644767-710c90e4-acc7-4ae6-83a6-e2fafd8ec0f4.png">

<img width="819" alt="image" src="https://user-images.githubusercontent.com/3673236/197644792-9a805a8e-d0db-4dbb-a54a-fef44bc4f922.png">

<img width="700" alt="image" src="https://user-images.githubusercontent.com/3673236/197644894-4327334d-b9a3-486b-93ed-4e44698618ba.png">
<img width="696" alt="image" src="https://user-images.githubusercontent.com/3673236/197644911-d61b2fc5-397f-43e2-b227-f789e6a7efb2.png">

> We'd have to decide whether the app name is the same across English or Spanish or different.

Good point, and I think we need to decide this anyway since we are currently not consistent (though some of the copy has been rewritten already). 

E.g. the `/eligibility/start` page (app name consistent across languages):

| English | Spanish |
| --------| ----------|
| ![image](https://user-images.githubusercontent.com/1783439/197646470-32e2bfe5-f0ea-4c84-a888-f8f45c275698.png) | ![image](https://user-images.githubusercontent.com/1783439/197646509-1cab7dbb-4e85-478d-bbc7-20a87fedd305.png) |

Vs. the `/help` page (app name changes across languages):

| English | Spanish |
| --------| ----------|
| ![image](https://user-images.githubusercontent.com/1783439/197646613-8cfdf14a-2e32-47da-91d4-a649a5ce706f.png) | ![image](https://user-images.githubusercontent.com/1783439/197646649-62555836-e556-4760-b1df-dc3dfadd03b2.png) |





Resolving patch:
diff --git a/benefits/core/viewmodels.py b/benefits/core/viewmodels.py
--- a/benefits/core/viewmodels.py
+++ b/benefits/core/viewmodels.py
@@ -143,12 +143,9 @@ class Page:
     """
 
     def __init__(self, **kwargs):
-        self.title = kwargs.get("title")
-        if self.title is None:
-            self.title = _("core.pages.index.prefix")
-        else:
-            self.title = f"{_('core.pages.index.prefix')}: {self.title}"
-
+        title = kwargs.get("title")
+        if title is not None:
+            self.title = title
         self.icon = kwargs.get("icon")
         self.headline = kwargs.get("headline")
         self.paragraphs = kwargs.get("paragraphs", [])


Test patch:
diff --git a/tests/pytest/core/test_viewmodels.py b/tests/pytest/core/test_viewmodels.py
--- a/tests/pytest/core/test_viewmodels.py
+++ b/tests/pytest/core/test_viewmodels.py
@@ -35,7 +35,7 @@ def test_ErrorPage_translations(error_page_function, title, headline, paragraphs
     translation.activate("en")
 
     error_page = error_page_function()
-    english_title = f"{_('core.pages.index.prefix')}: {_(title)}"
+    english_title = _(title)
     english_headline = _(headline)
     english_paragraphs = [_(paragraph) for paragraph in paragraphs]
 
@@ -46,7 +46,7 @@ def test_ErrorPage_translations(error_page_function, title, headline, paragraphs
     translation.activate("es")
 
     error_page = error_page_function()
-    spanish_title = f"{_('core.pages.index.prefix')}: {_(title)}"
+    spanish_title = _(title)
     spanish_headline = _(headline)
     spanish_paragraphs = [_(paragraph) for paragraph in paragraphs]