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
This commit is contained in:
Daniël Klabbers 2023-02-11 13:27:46 +01:00 committed by GitHub
parent 153bb1a53c
commit aa0b3288d5
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
13 changed files with 20 additions and 20 deletions

View File

@ -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">

View File

@ -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"

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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>,

View File

@ -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">

View File

@ -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;
}

View File

@ -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> : ''}

View File

@ -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>

View File

@ -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 {

View File

@ -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>

View File

@ -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>