BLOG-48 SEO Improvement #116

squid · 2025-08-05T11:10:29+08:00

squid commented

2025-08-05 11:10:29 +08:00

Description

Overview

This PR improves the website's SEO by:

Moving title and meta description tags from app.html to individual page components
Adding dynamic meta descriptions based on page content
Implementing structured data for blog posts using JSON-LD
Optimizing meta descriptions for better search engine visibility

Changes

app.html: Removed static title and meta description tags
HomePage.svelte: Added descriptive title parameter to generateTitle function
Terminal.svelte: Dynamically generates meta description from terminal lines
PostContentPage.svelte: Added meta description and structured data for blog posts
PostOverallPage.svelte: Added descriptive meta description for blog listing page
StructuredData.svelte: Created new component to generate JSON-LD structured data for blog posts

Benefits

Improved SEO through better metadata management
Enhanced search engine visibility with structured data
More accurate and dynamic meta descriptions
Better control over page-specific metadata

Note

Since sitemap auto generating is a little more complex, it will be solved in #117 in the future.

Package Changes

No response

Screenshots

No response

Reference

Resolves #48

Checklist

A milestone is set
The related issuse has been linked to this branch

### Description #### Overview This PR improves the website's SEO by: 1. Moving title and meta description tags from app.html to individual page components 2. Adding dynamic meta descriptions based on page content 3. Implementing structured data for blog posts using JSON-LD 4. Optimizing meta descriptions for better search engine visibility #### Changes - **app.html**: Removed static title and meta description tags - **HomePage.svelte**: Added descriptive title parameter to generateTitle function - **Terminal.svelte**: Dynamically generates meta description from terminal lines - **PostContentPage.svelte**: Added meta description and structured data for blog posts - **PostOverallPage.svelte**: Added descriptive meta description for blog listing page - **StructuredData.svelte**: Created new component to generate JSON-LD structured data for blog posts #### Benefits - Improved SEO through better metadata management - Enhanced search engine visibility with structured data - More accurate and dynamic meta descriptions - Better control over page-specific metadata > [!NOTE] > Since sitemap auto generating is a little more complex, it will be solved in #117 in the future. ### Package Changes _No response_ ### Screenshots _No response_ ### Reference Resolves #48 ### Checklist - [x] A milestone is set - [x] The related issuse has been linked to this branch

squid added this to the 0.3 milestone 2025-08-05 11:10:29 +08:00

squid added 5 commits 2025-08-05 11:10:30 +08:00

BLOG-48 feat: add short description to home page title e27be061e7

BLOG-48 feat: add meta descriptions to improve SEO across various pages 635fc40fc2

BLOG-48 feat: add structured data component for improved SEO and metadata handling

Frontend CI / build (push) Failing after 45s

Details

a81e6cf126

BLOG-48 style: run format 7c9fa460aa

BLOG-48 fix: eslint

Frontend CI / build (push) Successful in 1m10s

Details

Auto Comment On PR / add_improve_comment (pull_request) Successful in 17s

Details

PR Title Check / pr-title-check (pull_request) Successful in 17s

Details

bf2ca1056b

bot commented

2025-08-05 11:10:36 +08:00

/improve

bot commented

2025-08-05 11:10:39 +08:00

PR Code Suggestions ✨

Category	Suggestion	Impact
General	Refine page meta description for clarity The meta description should provide a concise and relevant summary of the page's content for search engines. Concatenating all terminal lines with a comma might result in a long, unreadable, or irrelevant description. Consider providing a more curated and concise summary for better SEO. frontend/src/lib/home/framework/ui/Terminal.svelte [56] `-<meta name="description" content={lines.join('，')} /> +<meta name="description" content="[A concise, curated description for the home page]" />` Suggestion importance[1-10]: 7 __ Why: The suggestion correctly identifies that concatenating all terminal lines might create an overly long or unreadable meta description, which is detrimental to SEO. Providing a concise, curated description is a good practice for search engine optimization.	Medium
	Improve page title during data loading The page title is rendered even when `state.data` might be `null` or `undefined` (e.g., during data loading). This could result in a generic or broken title in the browser tab. Consider providing a fallback value or conditionally rendering the title to ensure a meaningful title is always displayed. frontend/src/lib/post/framework/ui/PostContentPage.svelte [22] `-<title>{generateTitle(state.data?.info.title)}</title> +<title>{generateTitle(state.data?.info.title ?? 'Loading Post...')}</title>` Suggestion importance[1-10]: 7 __ Why: The suggestion correctly points out that the title might be generic or broken during data loading. Adding a fallback value like `Loading Post...` improves the user experience by providing a meaningful title while content is being fetched.	Medium
	Shorten home page title for SEO The base title provided to `generateTitle` for the home page is quite long. If `generateTitle` appends a site name, the resulting title tag might exceed recommended lengths for SEO (typically 60-70 characters), potentially leading to truncation in search results. Consider using a shorter, more concise base title. frontend/src/lib/home/framework/ui/HomePage.svelte [9] `-<title>{generateTitle('程式、科技、教學、分享')}</title> +<title>{generateTitle('程式、科技、教學')}</title>` Suggestion importance[1-10]: 7 __ Why: The suggestion is valid as a long title, especially if `generateTitle` appends a site name, can exceed recommended SEO lengths and lead to truncation in search results. Shortening the base title improves SEO and readability.	Medium

## PR Code Suggestions ✨  <table><thead><tr><td><strong>Category</strong></td><td align=left><strong>Suggestion                                                                                                                                    </strong></td><td align=center><strong>Impact</strong></td></tr><tbody><tr><td rowspan=3>General</td> <td> <details><summary>Refine page meta description for clarity</summary> ___ **The meta description should provide a concise and relevant summary of the page's <br>content for search engines. Concatenating all terminal lines with a comma might <br>result in a long, unreadable, or irrelevant description. Consider providing a more <br>curated and concise summary for better SEO.** [frontend/src/lib/home/framework/ui/Terminal.svelte [56]](https://git.squidspirit.com/squid/blog/src/branch/BLOG-48_seo_improve/frontend/src/lib/home/framework/ui/Terminal.svelte#L56-L56) ```diff -<meta name="description" content={lines.join('，')} /> +<meta name="description" content="[A concise, curated description for the home page]" /> ``` <details><summary>Suggestion importance[1-10]: 7</summary> __ Why: The suggestion correctly identifies that concatenating all terminal lines might create an overly long or unreadable meta description, which is detrimental to SEO. Providing a concise, curated description is a good practice for search engine optimization. </details></details></td><td align=center>Medium </td></tr><tr><td> <details><summary>Improve page title during data loading</summary> ___ **The page title is rendered even when <code>state.data</code> might be <code>null</code> or <code>undefined</code> (e.g., <br>during data loading). This could result in a generic or broken title in the browser <br>tab. Consider providing a fallback value or conditionally rendering the title to <br>ensure a meaningful title is always displayed.** [frontend/src/lib/post/framework/ui/PostContentPage.svelte [22]](https://git.squidspirit.com/squid/blog/src/branch/BLOG-48_seo_improve/frontend/src/lib/post/framework/ui/PostContentPage.svelte#L22-L22) ```diff -<title>{generateTitle(state.data?.info.title)}</title> +<title>{generateTitle(state.data?.info.title ?? 'Loading Post...')}</title> ``` <details><summary>Suggestion importance[1-10]: 7</summary> __ Why: The suggestion correctly points out that the title might be generic or broken during data loading. Adding a fallback value like `Loading Post...` improves the user experience by providing a meaningful title while content is being fetched. </details></details></td><td align=center>Medium </td></tr><tr><td> <details><summary>Shorten home page title for SEO</summary> ___ **The base title provided to <code>generateTitle</code> for the home page is quite long. If <br><code>generateTitle</code> appends a site name, the resulting title tag might exceed recommended <br>lengths for SEO (typically 60-70 characters), potentially leading to truncation in <br>search results. Consider using a shorter, more concise base title.** [frontend/src/lib/home/framework/ui/HomePage.svelte [9]](https://git.squidspirit.com/squid/blog/src/branch/BLOG-48_seo_improve/frontend/src/lib/home/framework/ui/HomePage.svelte#L9-L9) ```diff -<title>{generateTitle('程式、科技、教學、分享')}</title> +<title>{generateTitle('程式、科技、教學')}</title> ``` <details><summary>Suggestion importance[1-10]: 7</summary> __ Why: The suggestion is valid as a long title, especially if `generateTitle` appends a site name, can exceed recommended SEO lengths and lead to truncation in search results. Shortening the base title improves SEO and readability. </details></details></td><td align=center>Medium </td></tr></tr></tbody></table>

squid commented

2025-08-05 11:19:07 +08:00

The meta description should provide a concise and relevant summary of the page's
content for search engines. Concatenating all terminal lines with a comma might
result in a long, unreadable, or irrelevant description. Consider providing a more
curated and concise summary for better SEO.

frontend/src/lib/home/framework/ui/Terminal.svelte [56]
-<meta name="description" content={lines.join('，')} />
+<meta name="description" content="[A concise, curated description for the home page]" />

The lines are the introduction of this website. Ignore this comment.

> **The meta description should provide a concise and relevant summary of the page's <br>content for search engines. Concatenating all terminal lines with a comma might <br>result in a long, unreadable, or irrelevant description. Consider providing a more <br>curated and concise summary for better SEO.** > > [frontend/src/lib/home/framework/ui/Terminal.svelte [56]](https://git.squidspirit.com/squid/blog/src/branch/BLOG-48_seo_improve/frontend/src/lib/home/framework/ui/Terminal.svelte#L56-L56) > > ```diff > -<meta name="description" content={lines.join('，')} /> > +<meta name="description" content="[A concise, curated description for the home page]" /> > ``` The `lines` are the introduction of this website. Ignore this comment.

squid commented

2025-08-05 11:24:21 +08:00

The page title is rendered even when state.data might be null or undefined (e.g.,
during data loading). This could result in a generic or broken title in the browser
tab. Consider providing a fallback value or conditionally rendering the title to
ensure a meaningful title is always displayed.

frontend/src/lib/post/framework/ui/PostContentPage.svelte [22]
-<title>{generateTitle(state.data?.info.title)}</title>
+<title>{generateTitle(state.data?.info.title ?? 'Loading Post...')}</title>

generateTitle can be passed a null object, and it will display the main title normally.

export default function generateTitle(pageTitle?: string): string {
	if (!pageTitle) return Strings.APP_NAME;
	return `${Strings.APP_NAME} - ${pageTitle}`;
}

Ignore this comment.

> **The page title is rendered even when <code>state.data</code> might be <code>null</code> or <code>undefined</code> (e.g., <br>during data loading). This could result in a generic or broken title in the browser <br>tab. Consider providing a fallback value or conditionally rendering the title to <br>ensure a meaningful title is always displayed.** > > [frontend/src/lib/post/framework/ui/PostContentPage.svelte [22]](https://git.squidspirit.com/squid/blog/src/branch/BLOG-48_seo_improve/frontend/src/lib/post/framework/ui/PostContentPage.svelte#L22-L22) > > ```diff > -<title>{generateTitle(state.data?.info.title)}</title> > +<title>{generateTitle(state.data?.info.title ?? 'Loading Post...')}</title> > ``` `generateTitle` can be passed a null object, and it will display the main title normally. ```typescript export default function generateTitle(pageTitle?: string): string { if (!pageTitle) return Strings.APP_NAME; return `${Strings.APP_NAME} - ${pageTitle}`; } ``` Ignore this comment.

squid commented

2025-08-05 11:25:30 +08:00

The base title provided to generateTitle for the home page is quite long. If
generateTitle appends a site name, the resulting title tag might exceed recommended
lengths for SEO (typically 60-70 characters), potentially leading to truncation in
search results. Consider using a shorter, more concise base title.

frontend/src/lib/home/framework/ui/HomePage.svelte [9]
-<title>{generateTitle('程式、科技、教學、分享')}</title>
+<title>{generateTitle('程式、科技、教學')}</title>

The original one isn't too long. Ignore this comment.

> **The base title provided to <code>generateTitle</code> for the home page is quite long. If <br><code>generateTitle</code> appends a site name, the resulting title tag might exceed recommended <br>lengths for SEO (typically 60-70 characters), potentially leading to truncation in <br>search results. Consider using a shorter, more concise base title.** > > [frontend/src/lib/home/framework/ui/HomePage.svelte [9]](https://git.squidspirit.com/squid/blog/src/branch/BLOG-48_seo_improve/frontend/src/lib/home/framework/ui/HomePage.svelte#L9-L9) > > ```diff > -<title>{generateTitle('程式、科技、教學、分享')}</title> > +<title>{generateTitle('程式、科技、教學')}</title> > ``` The original one isn't too long. Ignore this comment.

squid merged commit 171410e115 into main

2025-08-05 11:25:40 +08:00

squid deleted branch BLOG-48_seo_improve

2025-08-05 11:25:40 +08:00

squid referenced this issue from a commit

2025-08-05 11:25:42 +08:00

BLOG-48 SEO Improvement (#116)

Sign in to join this conversation.

2 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: squid/blog#116