1
0
mirror of https://github.com/flarum/core.git synced 2025-07-17 14:51:19 +02:00

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
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 PackageManager-controlSection">
<div className="ExtensionPage-permissions-header"> <div className="ExtensionPage-permissions-header">
<div className="container"> <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> </div>
<div className="container"> <div className="container">

View File

@@ -32,7 +32,7 @@ export default class QueueSection extends Component<{}> {
<section id="PackageManager-queueSection" className="ExtensionPage-permissions PackageManager-queueSection"> <section id="PackageManager-queueSection" className="ExtensionPage-permissions PackageManager-queueSection">
<div className="ExtensionPage-permissions-header PackageManager-queueSection-header"> <div className="ExtensionPage-permissions-header PackageManager-queueSection-header">
<div className="container"> <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 <Button
className="Button Button--icon" className="Button Button--icon"
icon="fas fa-sync-alt" icon="fas fa-sync-alt"

View File

@@ -15,9 +15,9 @@ export default class TagHero extends Component {
> >
<div className="container"> <div className="container">
<div className="containerNarrow"> <div className="containerNarrow">
<h2 className="Hero-title"> <h1 className="Hero-title">
{tag.icon() && tagIcon(tag, {}, { useColor: false })} {tag.name()} {tag.icon() && tagIcon(tag, {}, { useColor: false })} {tag.name()}
</h2> </h1>
<div className="Hero-subtitle">{tag.description()}</div> <div className="Hero-subtitle">{tag.description()}</div>
</div> </div>
</div> </div>

View File

@@ -1,7 +1,7 @@
@inject('url', 'Flarum\Http\UrlGenerator') @inject('url', 'Flarum\Http\UrlGenerator')
<div class="container"> <div class="container">
<h2>{{ $tag->name }}</h2> <h1>{{ $tag->name }}</h1>
<p>{{ $tag->description }}</p> <p>{{ $tag->description }}</p>
<ul> <ul>

View File

@@ -1,7 +1,7 @@
@inject('url', 'Flarum\Http\UrlGenerator') @inject('url', 'Flarum\Http\UrlGenerator')
<div class="container"> <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) @foreach ([$primaryTags, $secondaryTags] as $category)
<ul> <ul>

View File

@@ -7,10 +7,10 @@ export default class AdminHeader extends Component {
return [ return [
<div className={classList(['AdminHeader', this.attrs.className])}> <div className={classList(['AdminHeader', this.attrs.className])}>
<div className="container"> <div className="container">
<h2> <h1>
{icon(this.attrs.icon)} {icon(this.attrs.icon)}
{vnode.children} {vnode.children}
</h2> </h1>
<div className="AdminHeader-description">{this.attrs.description}</div> <div className="AdminHeader-description">{this.attrs.description}</div>
</div> </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) : ''} {this.extension.icon ? icon(this.extension.icon.name) : ''}
</span> </span>
<div className="ExtensionName"> <div className="ExtensionName">
<h2>{this.extension.extra['flarum-extension'].title}</h2> <h1>{this.extension.extra['flarum-extension'].title}</h1>
</div> </div>
<div className="ExtensionPage-headerTopItems"> <div className="ExtensionPage-headerTopItems">
<ul>{listItems(this.topItems().toArray())}</ul> <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">
<div className="ExtensionPage-permissions-header"> <div className="ExtensionPage-permissions-header">
<div className="container"> <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> </div>
<div className="container"> <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('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; return items;
} }

View File

@@ -49,7 +49,7 @@ export default class UserCard extends Component {
: ''} : ''}
<div className="UserCard-profile"> <div className="UserCard-profile">
<h2 className="UserCard-identity"> <h1 className="UserCard-identity">
{this.attrs.editable ? ( {this.attrs.editable ? (
[AvatarEditor.component({ user, className: 'UserCard-avatar' }), username(user)] [AvatarEditor.component({ user, className: 'UserCard-avatar' }), username(user)]
) : ( ) : (
@@ -58,7 +58,7 @@ export default class UserCard extends Component {
{username(user)} {username(user)}
</Link> </Link>
)} )}
</h2> </h1>
{badges.length ? <ul className="UserCard-badges badges">{listItems(badges)}</ul> : ''} {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"> <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 class="Hero-subtitle">{m.trust(app.forum.attribute('welcomeMessage'))}</div>
</div> </div>
</div> </div>

View File

@@ -4,7 +4,7 @@
text-align: center; text-align: center;
color: var(--contrast-color, var(--hero-color)); color: var(--contrast-color, var(--hero-color));
h2 { h1 {
margin: 0; margin: 0;
font-size: 16px; font-size: 16px;
font-weight: normal; font-weight: normal;
@@ -34,7 +34,7 @@
@media @tablet-up { @media @tablet-up {
.Hero { .Hero {
h2 { h1 {
font-size: 22px; font-size: 22px;
} }
.container { .container {

View File

@@ -7,7 +7,7 @@
<header id="header" class="App-header"> <header id="header" class="App-header">
<div id="header-navigation" class="Header-navigation"></div> <div id="header-navigation" class="Header-navigation"></div>
<div class="container"> <div class="container">
<h1 class="Header-title"> <div class="Header-title">
<a href="{{ $forum['baseUrl'] }}"> <a href="{{ $forum['baseUrl'] }}">
@if ($forum['logoUrl']) @if ($forum['logoUrl'])
<img src="{{ $forum['logoUrl'] }}" alt="{{ $forum['title'] }}" class="Header-logo"> <img src="{{ $forum['logoUrl'] }}" alt="{{ $forum['title'] }}" class="Header-logo">
@@ -15,7 +15,7 @@
{{ $forum['title'] }} {{ $forum['title'] }}
@endif @endif
</a> </a>
</h1> </div>
<div id="header-primary" class="Header-primary"></div> <div id="header-primary" class="Header-primary"></div>
<div id="header-secondary" class="Header-secondary"></div> <div id="header-secondary" class="Header-secondary"></div>
</div> </div>

View File

@@ -9,7 +9,7 @@
<header id="header" class="App-header"> <header id="header" class="App-header">
<div id="header-navigation" class="Header-navigation"></div> <div id="header-navigation" class="Header-navigation"></div>
<div class="container"> <div class="container">
<h1 class="Header-title"> <div class="Header-title">
<a href="{{ $forum['baseUrl'] }}" id="home-link"> <a href="{{ $forum['baseUrl'] }}" id="home-link">
@if ($forum['logoUrl']) @if ($forum['logoUrl'])
<img src="{{ $forum['logoUrl'] }}" alt="{{ $forum['title'] }}" class="Header-logo"> <img src="{{ $forum['logoUrl'] }}" alt="{{ $forum['title'] }}" class="Header-logo">
@@ -17,7 +17,7 @@
{{ $forum['title'] }} {{ $forum['title'] }}
@endif @endif
</a> </a>
</h1> </div>
<div id="header-primary" class="Header-primary"></div> <div id="header-primary" class="Header-primary"></div>
<div id="header-secondary" class="Header-secondary"></div> <div id="header-secondary" class="Header-secondary"></div>
</div> </div>