[FEATURE]: Dynamic Page Titles for Consistency

s2sharpit commented 1 year ago

Detailed description

Currently, the homepage title is set as "Vibey," but when navigating to other pages, the title remains the same, lacking the necessary context. To enhance user experience and maintain consistency, it would be beneficial to dynamically update the page titles across the website.

Context

Benefits:

Improved User Experience: Dynamic page titles give users a clear understanding of their current location within the website.
Consistent Branding: By appending "Vibey" to each page's title, we reinforce the brand and maintain a cohesive identity.
SEO Optimization: Dynamic page titles with relevant keywords can positively impact search engine rankings, enhancing the website's visibility.

Possible implementation

No response

Additional information

Let's work together to enhance the website's usability and branding by implementing this simple yet effective improvement.

Code of Conduct

[X] I agree to follow this project's Code of Conduct

github-actions[bot] commented 1 year ago

To reduce notifications, issues are locked. Your issue will be unlock when we will add label as status: ready for dev. Check out the contributing guide for more information.

Deepu178 commented 1 year ago

@s2sharpit how will you update page title dynamically? Please tell me more with one example.

s2sharpit commented 1 year ago

To update the page title dynamically in Next.js, we can use the Head component from next/head.

For the homepage, we want the title to be set to 'Vibey'. However, on other pages, we'll follow the format <page title> - Vibey to ensure a consistent branding experience.

Here's an example of how we can achieve this:

import Head from 'next/head';

function IndexPage() {
  return (
    <div>
      <Head>
        <title>Vibey</title>
      </Head>
      <p>Hello world!</p>
    </div>
  );
}

export default IndexPage;

Deepu178 commented 1 year ago

Assigned @s2sharpit Good luck

UniKonf / vibey