search

Developer-DAO / academy-turbo

D_D Academy is an open-source education platform created by and for Developer DAO.
https://academy.developerdao.com
MIT License
17 stars 10 forks source link

SEO Meta Titles and Descriptions update #214

Closed kempsterrrr closed 5 months ago

kempsterrrr commented 6 months ago

Looks like there was some awesome progress made on the SEO front from the last version though there are still some cases where the title and descriptions for the pages can be improved.

I'd like to dust of my coding chops and get a PR into academy to address these, summarised below.

As I'm going this I will take a close look at the SEO setup to see if there is anything that can be improved to make it more effective and easier for everyone. Will update and document any changes in the PR. This will likely include running an SEO crawl and fixing errors that come from this as well as maybe updating how the core SEO component a little.

I tried to start this work before sleeping this evening but couldn't get the local environment to work so need a little help.

Markkos89 commented 6 months ago

hey @kempsterrrr you may want to check this notion doc to compliment remaining info https://developerdao.notion.site/S-E-O-Friendly-Titles-Meta-Descriptions-ac7f635c3c8f43f1ae02d8c3281e4cf2 just sharing the link

kempsterrrr commented 6 months ago

Thanks @Markkos89 ! I'm still unable to build the project locally so opened up a thread on this in Discord here vs continuing in the DMs. Once I've got that sorted I'll work on this in my spare time and hope to get a PR with fixes in this week 🕺

kempsterrrr commented 6 months ago

Opened a PR to work through this, also copying in info from SEO audit below that helps to info some of the proposed changes.

image
kempsterrrr commented 6 months ago

Regarding preview meta images, we have two options:

1) Design and add each on manually 2) Create a template that creates them dynamically for each page using vercel's og-image-generation

Option two has potential to incur costs, though on our pro plan image generation limits are 5000/month and we only processed 77 in Jan so think we've got a long-time before we'd need to worry about this (see images below)

image image

In practice, what we need to make this work is a template used for meta images. I propose emulate the existing designs with the image split evenly down the middle with black background and white test on the left and image on the right.

Here an example for the home page meta image

Group 296

What it used to look like on social feeds

image

What it would look like now image

These images aren't perfect as I've just thrown them tother quick but illustrates where I am going with this. @Markkos89 what do you think about adding the library og-image-generation library? Don't want to go adding libs to the codebase without checking with the 👑

kempsterrrr commented 6 months ago

I also need some input into how we want to populate the SEO info from the lessons. In the past, I've typically done this using values from the font matter at the top of the file - the info between the two ---. Looks like we're currently doing this by adding props to the <LessonLayout /> component.

Don't think it really matters which one we use. Given the lesson layout component is already implemented happy to use that and then we can just remove the font matter at the top of reach file if they're not being used.

What do you think is best @Markkos89 ?

---
title: Getting Started with the command line interface
description: Learn the basics of using a console/terminal/shell for Ubuntu, Mac and Windows
  WSL.
icons: []
authors: ["piablo", "georgemac510"]
---

import LessonLayout from "../../components/LessonLayout";

<LessonLayout
   lessonTitle="Command Line Interface (CLI) Basics: A Beginners Guide"
   author="piablo"
   authorImage="/authors/piablo.png"
   authorPosition="D_D Academy & Mentorship"
   authorTwitter="Skruffster"
   createdDate="August 15, 2022"
>
Markkos89 commented 6 months ago

In my humble opinion I would suggest to use Next.js features the most we can, so in this case we could pass the title and description by props to the LessonLayoutComponent, and then via prop drilling we could pass those props to the PageSEOLayout which implements the next-seo package.

Markkos89 commented 6 months ago

Regarding preview meta images, we have two options:

  1. Design and add each on manually
  2. Create a template that creates them dynamically for each page using vercel's og-image-generation

Option two has potential to incur costs, though on our pro plan image generation limits are 5000/month and we only processed 77 in Jan so think we've got a long-time before we'd need to worry about this (see images below)

image image

In practice, what we need to make this work is a template used for meta images. I propose emulate the existing designs with the image split evenly down the middle with black background and white test on the left and image on the right.

Here an example for the home page meta image

Group 296

What it used to look like on social feeds

image

What it would look like now image

These images aren't perfect as I've just thrown them tother quick but illustrates where I am going with this. @Markkos89 what do you think about adding the library og-image-generation library? Don't want to go adding libs to the codebase without checking with the 👑

Sounds great kemps! Thanks for asking you can move forward with it? Do you need any kind of help? Let me know! I'm about to research about the og-image-generation lib just in case. Also will take a good look to the sitemap generation

kempsterrrr commented 6 months ago

Sounds great kemps! Thanks for asking you can move forward with it? Do you need any kind of help? Let me know! I'm about to research about the og-image-generation lib just in case. Also will take a good look to the sitemap generation

I'll find some time to have an initial pass at the og stuff and report back 🫡 - regarding sitemaps, I did some research yesterday and linked this library next to the todo but I don't know if that is the best/easiest way.

Any thing you discover on the og image lib or on sitemaps lmk! happy to share the work on the pr ofc!

If you're ok with it, I'll update the <LessonLayout /> component to include descriptions and meta images. I believe this will mean the font matter no longer has any use so I can delete that at the same or not. lmk what you'd prefer !

Markkos89 commented 6 months ago

Yes that sitemap library is the one I'm used to use. Alright I will push a commit later then 😀 Thank you very much

El jue, 29 de feb de 2024, 21:09, Will Kempster @.***> escribió:

Sounds great kemps! Thanks for asking you can move forward with it? Do you need any kind of help? Let me know! I'm about to research about the og-image-generation lib just in case. Also will take a good look to the sitemap generation

I'll find some time to have an initial pass at the og stuff and report back 🫡 - regarding sitemaps, I did some research yesterday and linked this library https://www.npmjs.com/package/next-sitemap#getting-started next to the todo but I don't know if that is the best/easiest way.

Any thing you discover on the og image lib or on sitemaps lmk! happy to share the work on the pr ofc!

— Reply to this email directly, view it on GitHub https://github.com/Developer-DAO/academy-turbo/issues/214#issuecomment-1972185350, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAVJM5EVWAKA7YJZ75SSOVLYV7BLFAVCNFSM6AAAAABD3YWX3CVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMYTSNZSGE4DKMZVGA . You are receiving this because you were mentioned.Message ID: @.***>

kempsterrrr commented 6 months ago

Ok I started to do the task of updating the <LessonLayout /> component to add in the meta descriptions and then I realised there is a duplication of data across the app happening.

Some of the lesson .mdx files have a description in them which I can use. Some do not. I then realised there is also this file called allLessonData.ts which has another implementation of titles and description.

It looks like the data inside allLessonData is the master file for titles and description but it is not currently being used to populate the meta titles or descriptions for each individual lesson page. I need to understand the architecture better to understand how/if we can make this work, but either wa I would suggest we try to avoid having data that needs to be kept in sync in two separate places where it's manually maintained as it is inevitable we'll forget to update both places every time the data changes.

The only commit on that file is feat: more code snippets used for seeding db so I'm assuming this means it's a seed script for populating a database.

@Markkos89 can you help me understand this? What article data is stored in the database vs not?

In my experience building markdown powered content sites. The metadata for each piece of content is stored in the font-matter at the top of the md/mdx file and then this is data is used to populate titles, descriptions etc. everywhere else in the app. Happy to have a call if easier so I can understand the direction/architecture choice here better before I move forward and break things :)

My cal link - https://cal.com/kempsterrrr

Markkos89 commented 6 months ago

What you see on allLessonData (and allTracksDaa, etc) are just the first export from the database to have them as files. Was part of changing from static arrays to start using the database and now we store the latest updated info in the database.

kempsterrrr commented 6 months ago

Ok, so the source of truth for article meta data (title, description, authors etc.) is now stored in the DB? If yes, how is the info loaded into the database cc @Markkos89 and kept up to date/edited

..and if the source of truth for the data is stored there it makes most sense to populate the meta data for <LessonLayout /> component from the DB too, rather than hard coding it into each lesson .mdx file

Markkos89 commented 6 months ago

Ok, so the source of truth for article meta data (title, description, authors etc.) is now stored in the DB? If yes, how is the info loaded into the database cc @Markkos89 and kept up to date/edited

For now is being populated hand-made via Prisma DB seed scripts: https://developerdao.notion.site/DB-Seed-Scripts-aa34eaf9f08440399596b577075fa779

..and if the source of truth for the data is stored there it makes most sense to populate the meta data for component from the DB too, rather than hard coding it into each lesson .mdx file

Yes, totally agree. That way we also are going to be able to apply some optimization techniques using Next.js features

kempsterrrr commented 6 months ago

ok yea, so I can't figure out a way to pipe the meta data from the db into the <LessonLayout /> component for each lesson with needing to duplicate at least one piece of data in the local .mdx file.

I believe I can bring in the DB data from allLessonData into the <LessonLayout /> component via the <AppContext /> but if I do that I'll need some way to filter the data to only provide the data for each individual lesson and as far as I can tell the only way to do that would be to hard code a unique value into the mdx file that matches a unique value in the db (allLessonData) which means we have the duplicated data problem as we're trying to combine remote and local data (used to having all data for a page coming from one place - local file / headless cms)

I'm probably missing something here re the architecture and how mdx files are being rendered so love to chat on this before moving ahead with any more updates.

kempsterrrr commented 6 months ago

Sharing an update here. Finalise the pr here #215

From conversations with @Markkos89 we decided to ship a reduced version of this PR. What it gives us is meta titles, descriptions and images for each page of the site with the following compromises.

  1. We're using the same meta image on every page when we ideally want unique meta images for most pages
  2. We're using a default meta description for the lessons rather than unique ones as everything is hardcoded and wasn't sure it was worth the effort to do this update if the data will be coming from the DB soon

I would also recommend changes to some of the lesson titles and descriptions to make them more SEO friendly / more aligned with both keywords and search terms that user search on but that felt out of scope of this PR so I didn't push any of these :)

I think it's probably better to open two new issues to for each of the points of above so we can keep track of them indapendantly vs keeping this big issue open. wdyt @Markkos89 ?

Markkos89 commented 6 months ago

Sharing an update here. Finalise the pr here #215

From conversations with @Markkos89 we decided to ship a reduced version of this PR. What it gives us is meta titles, descriptions and images for each page of the site with the following compromises.

  1. We're using the same meta image on every page when we ideally want unique meta images for most pages
  2. We're using a default meta description for the lessons rather than unique ones as everything is hardcoded and wasn't sure it was worth the effort to do this update if the data will be coming from the DB soon

I would also recommend changes to some of the lesson titles and descriptions to make them more SEO friendly / more aligned with both keywords and search terms that user search on but that felt out of scope of this PR so I didn't push any of these :)

I think it's probably better to open two new issues to for each of the points of above so we can keep track of them indapendantly vs keeping this big issue open. wdyt @Markkos89 ?

Amazing! Yeah I also agree to open two new issues.. you can tag them there after created and close this one, so we have the reference with a text flag like related to #333 etc

Amazing contribution Kemps, thank you very much :raised_hands:

kempsterrrr commented 6 months ago

Done, feel free to close this once #215 is merged in 🚀

Markkos89 commented 5 months ago

Done, feel free to close this once #215 is merged in 🚀

mate this should go to main/production, right?

Markkos89 commented 5 months ago

Closing this issue as the update was successfully merged to production