From aa0b3288d5f37382777a507e5dbec183e967e3d6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Dani=C3=ABl=20Klabbers?= <luceos@users.noreply.github.com>
Date: Sat, 11 Feb 2023 13:27:46 +0100
Subject: [PATCH] feat(seo): shift h1 tag from logo to discussion title (#3724)

* feat(seo): shift h1 tag from logo to discussion title

Many times have we seen opponents of using h2 as the discussion title. Although
my own SEO knowledge is limited, I have seen the importance of structuring pages
according to the content you wish to prioritize. If we only take that into consideration
there is zero reason for the app-wide identical logo to take precedence over any
other heading.

This change makes the logo a standard (visually identical) element, and
makes the discussion hero title a h1.

* feat(seo): rewrite remainder of hero titles and subtitles
---
 .../js/src/admin/components/ControlSection.tsx                | 2 +-
 .../package-manager/js/src/admin/components/QueueSection.tsx  | 2 +-
 extensions/tags/js/src/forum/components/TagHero.js            | 4 ++--
 extensions/tags/views/frontend/content/tag.blade.php          | 2 +-
 extensions/tags/views/frontend/content/tags.blade.php         | 2 +-
 framework/core/js/src/admin/components/AdminHeader.js         | 4 ++--
 framework/core/js/src/admin/components/ExtensionPage.tsx      | 4 ++--
 framework/core/js/src/forum/components/DiscussionHero.js      | 2 +-
 framework/core/js/src/forum/components/UserCard.js            | 4 ++--
 framework/core/js/src/forum/components/WelcomeHero.tsx        | 2 +-
 framework/core/less/forum/Hero.less                           | 4 ++--
 framework/core/views/frontend/admin.blade.php                 | 4 ++--
 framework/core/views/frontend/forum.blade.php                 | 4 ++--
 13 files changed, 20 insertions(+), 20 deletions(-)

diff --git a/extensions/package-manager/js/src/admin/components/ControlSection.tsx b/extensions/package-manager/js/src/admin/components/ControlSection.tsx
index 946ba1b27..ad5557aab 100644
--- a/extensions/package-manager/js/src/admin/components/ControlSection.tsx
+++ b/extensions/package-manager/js/src/admin/components/ControlSection.tsx
@@ -17,7 +17,7 @@ export default class ControlSection extends Component<ComponentAttrs> {
       <div className="ExtensionPage-permissions PackageManager-controlSection">
         <div className="ExtensionPage-permissions-header">
           <div className="container">
-            <h2 className="ExtensionTitle">{app.translator.trans('flarum-package-manager.admin.sections.control.title')}</h2>
+            <h1 className="ExtensionTitle">{app.translator.trans('flarum-package-manager.admin.sections.control.title')}</h1>
           </div>
         </div>
         <div className="container">
diff --git a/extensions/package-manager/js/src/admin/components/QueueSection.tsx b/extensions/package-manager/js/src/admin/components/QueueSection.tsx
index 69f8830d9..d3247c786 100644
--- a/extensions/package-manager/js/src/admin/components/QueueSection.tsx
+++ b/extensions/package-manager/js/src/admin/components/QueueSection.tsx
@@ -32,7 +32,7 @@ export default class QueueSection extends Component<{}> {
       <section id="PackageManager-queueSection" className="ExtensionPage-permissions PackageManager-queueSection">
         <div className="ExtensionPage-permissions-header PackageManager-queueSection-header">
           <div className="container">
-            <h2 className="ExtensionTitle">{app.translator.trans('flarum-package-manager.admin.sections.queue.title')}</h2>
+            <h1 className="ExtensionTitle">{app.translator.trans('flarum-package-manager.admin.sections.queue.title')}</h1>
             <Button
               className="Button Button--icon"
               icon="fas fa-sync-alt"
diff --git a/extensions/tags/js/src/forum/components/TagHero.js b/extensions/tags/js/src/forum/components/TagHero.js
index 77b0721d5..e1ff645f2 100644
--- a/extensions/tags/js/src/forum/components/TagHero.js
+++ b/extensions/tags/js/src/forum/components/TagHero.js
@@ -15,9 +15,9 @@ export default class TagHero extends Component {
       >
         <div className="container">
           <div className="containerNarrow">
-            <h2 className="Hero-title">
+            <h1 className="Hero-title">
               {tag.icon() && tagIcon(tag, {}, { useColor: false })} {tag.name()}
-            </h2>
+            </h1>
             <div className="Hero-subtitle">{tag.description()}</div>
           </div>
         </div>
diff --git a/extensions/tags/views/frontend/content/tag.blade.php b/extensions/tags/views/frontend/content/tag.blade.php
index ea137afe9..fb3a62225 100644
--- a/extensions/tags/views/frontend/content/tag.blade.php
+++ b/extensions/tags/views/frontend/content/tag.blade.php
@@ -1,7 +1,7 @@
 @inject('url', 'Flarum\Http\UrlGenerator')
 
 <div class="container">
-    <h2>{{ $tag->name }}</h2>
+    <h1>{{ $tag->name }}</h1>
     <p>{{ $tag->description }}</p>
 
     <ul>
diff --git a/extensions/tags/views/frontend/content/tags.blade.php b/extensions/tags/views/frontend/content/tags.blade.php
index 5d4c0c2d3..4b1f9f7f8 100644
--- a/extensions/tags/views/frontend/content/tags.blade.php
+++ b/extensions/tags/views/frontend/content/tags.blade.php
@@ -1,7 +1,7 @@
 @inject('url', 'Flarum\Http\UrlGenerator')
 
 <div class="container">
-    <h2>{{ $translator->trans('flarum-tags.forum.index.tags_link') }}</h2>
+    <h1>{{ $translator->trans('flarum-tags.forum.index.tags_link') }}</h1>
 
     @foreach ([$primaryTags, $secondaryTags] as $category)
         <ul>
diff --git a/framework/core/js/src/admin/components/AdminHeader.js b/framework/core/js/src/admin/components/AdminHeader.js
index 5472a8064..920721246 100644
--- a/framework/core/js/src/admin/components/AdminHeader.js
+++ b/framework/core/js/src/admin/components/AdminHeader.js
@@ -7,10 +7,10 @@ export default class AdminHeader extends Component {
     return [
       <div className={classList(['AdminHeader', this.attrs.className])}>
         <div className="container">
-          <h2>
+          <h1>
             {icon(this.attrs.icon)}
             {vnode.children}
-          </h2>
+          </h1>
           <div className="AdminHeader-description">{this.attrs.description}</div>
         </div>
       </div>,
diff --git a/framework/core/js/src/admin/components/ExtensionPage.tsx b/framework/core/js/src/admin/components/ExtensionPage.tsx
index 43657d29d..772fc6346 100644
--- a/framework/core/js/src/admin/components/ExtensionPage.tsx
+++ b/framework/core/js/src/admin/components/ExtensionPage.tsx
@@ -82,7 +82,7 @@ export default class ExtensionPage<Attrs extends ExtensionPageAttrs = ExtensionP
               {this.extension.icon ? icon(this.extension.icon.name) : ''}
             </span>
             <div className="ExtensionName">
-              <h2>{this.extension.extra['flarum-extension'].title}</h2>
+              <h1>{this.extension.extra['flarum-extension'].title}</h1>
             </div>
             <div className="ExtensionPage-headerTopItems">
               <ul>{listItems(this.topItems().toArray())}</ul>
@@ -115,7 +115,7 @@ export default class ExtensionPage<Attrs extends ExtensionPageAttrs = ExtensionP
       <div className="ExtensionPage-permissions">
         <div className="ExtensionPage-permissions-header">
           <div className="container">
-            <h2 className="ExtensionTitle">{app.translator.trans('core.admin.extension.permissions_title')}</h2>
+            <h1 className="ExtensionTitle">{app.translator.trans('core.admin.extension.permissions_title')}</h1>
           </div>
         </div>
         <div className="container">
diff --git a/framework/core/js/src/forum/components/DiscussionHero.js b/framework/core/js/src/forum/components/DiscussionHero.js
index 659cf1a71..5e5f2534a 100644
--- a/framework/core/js/src/forum/components/DiscussionHero.js
+++ b/framework/core/js/src/forum/components/DiscussionHero.js
@@ -34,7 +34,7 @@ export default class DiscussionHero extends Component {
       items.add('badges', <ul className="DiscussionHero-badges badges">{listItems(badges)}</ul>, 10);
     }
 
-    items.add('title', <h2 className="DiscussionHero-title">{discussion.title()}</h2>);
+    items.add('title', <h1 className="DiscussionHero-title">{discussion.title()}</h1>);
 
     return items;
   }
diff --git a/framework/core/js/src/forum/components/UserCard.js b/framework/core/js/src/forum/components/UserCard.js
index 3f3100edc..6a43666b9 100644
--- a/framework/core/js/src/forum/components/UserCard.js
+++ b/framework/core/js/src/forum/components/UserCard.js
@@ -49,7 +49,7 @@ export default class UserCard extends Component {
               : ''}
 
             <div className="UserCard-profile">
-              <h2 className="UserCard-identity">
+              <h1 className="UserCard-identity">
                 {this.attrs.editable ? (
                   [AvatarEditor.component({ user, className: 'UserCard-avatar' }), username(user)]
                 ) : (
@@ -58,7 +58,7 @@ export default class UserCard extends Component {
                     {username(user)}
                   </Link>
                 )}
-              </h2>
+              </h1>
 
               {badges.length ? <ul className="UserCard-badges badges">{listItems(badges)}</ul> : ''}
 
diff --git a/framework/core/js/src/forum/components/WelcomeHero.tsx b/framework/core/js/src/forum/components/WelcomeHero.tsx
index 55ec04682..1ab9ec0f8 100644
--- a/framework/core/js/src/forum/components/WelcomeHero.tsx
+++ b/framework/core/js/src/forum/components/WelcomeHero.tsx
@@ -39,7 +39,7 @@ export default class WelcomeHero extends Component<IWelcomeHeroAttrs> {
           />
 
           <div class="containerNarrow">
-            <h2 class="Hero-title">{app.forum.attribute('welcomeTitle')}</h2>
+            <h1 class="Hero-title">{app.forum.attribute('welcomeTitle')}</h1>
             <div class="Hero-subtitle">{m.trust(app.forum.attribute('welcomeMessage'))}</div>
           </div>
         </div>
diff --git a/framework/core/less/forum/Hero.less b/framework/core/less/forum/Hero.less
index d335f019d..55980cf25 100644
--- a/framework/core/less/forum/Hero.less
+++ b/framework/core/less/forum/Hero.less
@@ -4,7 +4,7 @@
   text-align: center;
   color: var(--contrast-color, var(--hero-color));
 
-  h2 {
+  h1 {
     margin: 0;
     font-size: 16px;
     font-weight: normal;
@@ -34,7 +34,7 @@
 
 @media @tablet-up {
   .Hero {
-    h2 {
+    h1 {
       font-size: 22px;
     }
     .container {
diff --git a/framework/core/views/frontend/admin.blade.php b/framework/core/views/frontend/admin.blade.php
index 351acd8cf..d4bd21084 100644
--- a/framework/core/views/frontend/admin.blade.php
+++ b/framework/core/views/frontend/admin.blade.php
@@ -7,7 +7,7 @@
         <header id="header" class="App-header">
             <div id="header-navigation" class="Header-navigation"></div>
             <div class="container">
-                <h1 class="Header-title">
+                <div class="Header-title">
                     <a href="{{ $forum['baseUrl'] }}">
                         @if ($forum['logoUrl'])
                             <img src="{{ $forum['logoUrl'] }}" alt="{{ $forum['title'] }}" class="Header-logo">
@@ -15,7 +15,7 @@
                             {{ $forum['title'] }}
                         @endif
                     </a>
-                </h1>
+                </div>
                 <div id="header-primary" class="Header-primary"></div>
                 <div id="header-secondary" class="Header-secondary"></div>
             </div>
diff --git a/framework/core/views/frontend/forum.blade.php b/framework/core/views/frontend/forum.blade.php
index 595345ab3..c0b0c1d17 100644
--- a/framework/core/views/frontend/forum.blade.php
+++ b/framework/core/views/frontend/forum.blade.php
@@ -9,7 +9,7 @@
         <header id="header" class="App-header">
             <div id="header-navigation" class="Header-navigation"></div>
             <div class="container">
-                <h1 class="Header-title">
+                <div class="Header-title">
                     <a href="{{ $forum['baseUrl'] }}" id="home-link">
                         @if ($forum['logoUrl'])
                             <img src="{{ $forum['logoUrl'] }}" alt="{{ $forum['title'] }}" class="Header-logo">
@@ -17,7 +17,7 @@
                             {{ $forum['title'] }}
                         @endif
                     </a>
-                </h1>
+                </div>
                 <div id="header-primary" class="Header-primary"></div>
                 <div id="header-secondary" class="Header-secondary"></div>
             </div>