saicaca / fuwari

A static blog template built with Astro.
https://fuwari.vercel.app
MIT License
1.03k stars 219 forks source link

SEO-Related Issues #111

Open davidvkimball opened 2 months ago

davidvkimball commented 2 months ago

Tag Pages

Tag pages have three different issues:

  1. Duplicate pages
  2. Duplicate title tags
  3. Duplicate content

This is according to Semrush.

To circumvent this, I'd like to just exclude tag pages (and maybe category pages) from being indexed in search engines. Is there an elegant way to not index the tags pages in search engines?

I tried modifying \src\pages\archive\tag\[tag].astro but couldn't find a straightforward way to add <meta name="robots" content="noindex, follow"> to it. I'm not even sure if that's the correct approach here. 😅

Special Pages

Currently, I want to make more "normal" pages like About, but I'm doing it in a hacky way.

Is there a straightforward way to add another one? Right now I have a "Projects" and a 404 page that are just derivatives of the About page, so unfortunately they share meta descriptions.

Broken Internal JS and CSS

This last issue I can't easily explain, so here's a screenshot:

image

I'm wanting to use this full time, but until these issues are sorted I'm not sure if it's feasible yet.

Thank you in advance for your help!

davidvkimball commented 2 months ago

Alright well I made a few changes and realized I could adjust the i18n keys to add to/change the list for how it appeared, so we're good there. I realized if I made a duplicate page of an existing page but didn't specify keys for title or description it would just re-use the main page's information. So we're good there!

The mysterious _page_/DJVkkpf4.css issue though is still unanswered. Would really appreciate a push in the right direction?

saicaca commented 2 months ago

I'll look into it

davidvkimball commented 2 months ago

Appreciate that!

Something else I was wondering, is there a way I can make it so the first "page" of blog posts is still the homepage, but pages 2, 3, etc. are rendered on /page/2, /page/3, etc? This would be handy from an SEO perspective, because you can more easily exclude these pages in a sitemap and on robots.txt so they don't get indexed.

I know this is relatively niche, but figured it's worth sharing!

In my own astro.config.mjs I added this:

   sitemap({
      filter: (page) => {
        // Exclude URLs that start with /page/ or /archive/tag/
        const excludePatterns = [
          'https://davidvkimball.com/page/',
          'https://davidvkimball.com/archive/tag/',
          'https://davidvkimball.com/archive/category/'
        ];
        return !excludePatterns.some(pattern => page.startsWith(pattern));
      }
    }),

This way, it won't list any of these types of pages in search engines. Just a thought!

davidvkimball commented 2 months ago

I am struggling with this still. 😅

I tried to set a conditional noindex prop which sort of works, but not perfectly. I can get it to appear on pages I want it to, but it outputs <meta content="noindex, nofollow" name=robots> instead of <meta name="robots" content="noindex, nofollow" /> like I want.

Here are the remaining higher-priority items I'm trying to figure out:

  1. How to set the page 2, 3, 4, etc. pages to either have a rel=canonical to the homepage, or give them unique titles and descriptions (i.e. title =[website name] + [tagline] + 'Page 2' and description = [description] + 'Page 2').
  2. Give the homepage and subsequently pages 2, 3, 4, etc. their own unique H1s as currently they don't have any
  3. Set a custom OG image for each special page (i.e. "About") that differs from the siteOGImage as defined by satori

I tried using astro-seo but it didn't really work the way I expected.

Any assistance would be much appreciated, as finding solutions to these issues would help anyone else using the template as well!

davidvkimball commented 2 months ago

OK, I believe I solved this problem completely.

Basically I created two interface Props: canonicalHome and canonicalArchive which are both booleans. If set to true, a page will get rel=canonical with its respective page (either the homepage, or the archive page).

I modified [...page].astro a bit differently, so that it wouldn't appear on page 1, but on every other page.

<MainGridLayout canonicalHome={page.currentPage !== 1}>
    <PostPage page={page}></PostPage>
    <Pagination class="mx-auto onload-animation" page={page} style=`animation-delay: calc(var(--content-delay) + ${(len)*50}ms)`></Pagination>
</MainGridLayout>

I don't have pages on /page/2/, /page/3/, but that's OK for now.

Just glad the rest is resolved!

davidvkimball commented 4 weeks ago

To add on to this, it seems like every single image is lazy loaded, I wonder if there's a way to take like the top 3 blog posts and disable lazy loading on their cover images?

There's also issues with the confluent paint, which I don't quite understand nor know how to fix.

image

It added a pretty significant delay on Google's PageSpeed mobile test.