mirror of https://github.com/mroxso/zelo-news.git synced 2026-04-08 22:46:57 +02:00

Files

Copilot 568f10761e Add comprehensive SEO optimization with dynamic meta tags and social sharing support (#23 )

* Initial plan

* Add SEO optimization with dynamic meta tags for all pages

Co-authored-by: mroxso <24775431+mroxso@users.noreply.github.com>

* Fix SEO meta tags to use useSeoMeta correctly without useEffect

Co-authored-by: mroxso <24775431+mroxso@users.noreply.github.com>

* Add SEO verification documentation

Co-authored-by: mroxso <24775431+mroxso@users.noreply.github.com>

* Add comprehensive SEO examples documentation

Co-authored-by: mroxso <24775431+mroxso@users.noreply.github.com>

* Refactor routing to use HomePage component and update blog post fetching limit

---------

Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com>
Co-authored-by: mroxso <24775431+mroxso@users.noreply.github.com>
Co-authored-by: highperfocused <highperfocused@pm.me>

2025-10-19 14:20:46 +02:00

6.1 KiB

Raw Permalink Blame History

SEO Optimization Verification

This document describes the SEO optimizations implemented in zelo.news and how to verify they work correctly.

What Was Implemented

1. Dynamic Page Titles

Each page now has a unique, descriptive title that updates based on content:

Article Pages: [Article Title] - [Author Name] - zelo.news
Profile Pages: [Username] - Profile - zelo.news
Home Page: zelo.news - Decentralized News on Nostr
Search Pages: Search: [query] - zelo.news or Articles tagged #[tag] - zelo.news
Other Pages: Descriptive titles for bookmarks, following, etc.

2. Meta Descriptions

Every page includes a relevant description:

Articles: Uses the article summary, or first 160 characters of content
Profiles: Uses the user's "about" text, or a default description
Notes/Events: Uses the first 160 characters of the content
Search: Includes result count and search term

3. Open Graph Tags (for Facebook, LinkedIn, WhatsApp, etc.)

All pages include Open Graph meta tags:

og:title - Page/content title
og:description - Page/content description
og:type - "article" for content pages, "website" for home
og:url - Current page URL
og:image - Article image, profile picture, or default icon
og:site_name - "zelo.news"

Article pages also include:

article:published_time - Publication timestamp
article:author - Author name
article:tag - Article hashtags

4. Twitter Card Tags

All pages include Twitter Card meta tags for Twitter/X sharing:

twitter:card - "summary_large_image" for articles, "summary" for others
twitter:title - Page/content title
twitter:description - Page/content description
twitter:image - Article image, profile picture, or default icon
twitter:site - "@zelo_news"

5. Additional SEO Features

Keywords meta tag in base HTML
Author meta tag in base HTML
robots: noindex for personal pages (bookmarks, following, search results, editor)
Proper semantic HTML structure

How to Verify

Method 1: Browser DevTools

Open the application in a browser
Open DevTools (F12)
Go to the Elements/Inspector tab
Look at the <head> section
You should see dynamically injected meta tags from @unhead

Method 2: View Page Source

Right-click on any page and select "View Page Source"
Look for <meta> tags in the <head>
Default tags will be visible in the static HTML
Dynamic tags are injected by JavaScript after page load

These tools show what social media platforms will see:

Facebook/Open Graph Debugger:

Visit: https://developers.facebook.com/tools/debug/
Enter a page URL from your deployed site
Click "Scrape Again" to see the latest meta tags
Should show article title, description, and image

Twitter Card Validator:

Visit: https://cards-dev.twitter.com/validator
Enter a page URL from your deployed site
Should show a preview of how the link will appear on Twitter

LinkedIn Post Inspector:

Visit: https://www.linkedin.com/post-inspector/
Enter a page URL from your deployed site
Should show how the link will appear on LinkedIn

Method 4: Browser Extensions

Install a meta tag viewer extension:

SEO Meta in 1 Click (Chrome/Edge)
META SEO inspector (Firefox)
These will show all meta tags on the current page

Example: Article Page Meta Tags

When viewing an article page, the following meta tags should be present:

<title>[Article Title] - [Author Name] - zelo.news</title>
<meta name="description" content="[Article summary or first 160 chars]">
<meta name="author" content="[Author Name]">

<!-- Open Graph -->
<meta property="og:title" content="[Article Title]">
<meta property="og:description" content="[Article summary or first 160 chars]">
<meta property="og:type" content="article">
<meta property="og:url" content="[Current URL]">
<meta property="og:image" content="[Article image or default icon]">
<meta property="og:site_name" content="zelo.news">
<meta property="article:published_time" content="[ISO timestamp]">
<meta property="article:author" content="[Author Name]">
<meta property="article:tag" content="[hashtag1]">
<meta property="article:tag" content="[hashtag2]">

<!-- Twitter Card -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="[Article Title]">
<meta name="twitter:description" content="[Article summary or first 160 chars]">
<meta name="twitter:image" content="[Article image or default icon]">
<meta name="twitter:site" content="@zelo_news">

Testing Dynamic Content Loading

The SEO implementation handles dynamically loaded content:

Initial Load: Default meta tags from index.html are visible
After Data Loads: Meta tags are updated with actual content
Social Media Crawlers: They execute JavaScript and will see the updated tags

To verify this works:

Open a page (e.g., an article page)
Open DevTools > Network tab
Reload the page
Watch the meta tags in the Elements tab - they should update as data loads

Notes

Server-Side Rendering: Currently not implemented. Social media crawlers execute JavaScript, so they will see the dynamically set meta tags.
@unhead Library: This library is SSR-compatible and properly manages meta tags.
Image URLs: Uses absolute URLs so social media platforms can fetch images.
Default Fallbacks: All pages have sensible defaults if content is not available.

Files Modified

index.html - Updated default meta tags
src/pages/ArticlePage.tsx - Added article-specific SEO
src/pages/ProfilePage.tsx - Added profile-specific SEO
src/pages/BlogHomePage.tsx - Added home page SEO
src/pages/SearchResultsPage.tsx - Added search page SEO (noindex)
src/pages/BookmarksPage.tsx - Added bookmarks page SEO (noindex)
src/pages/FollowingPage.tsx - Added following page SEO (noindex)
src/pages/CreatePostPage.tsx - Added create page SEO (noindex)
src/pages/EditPostPage.tsx - Added edit page SEO (noindex)
src/pages/NotePage.tsx - Added note page SEO
src/pages/EventPage.tsx - Added event page SEO

6.1 KiB Raw Permalink Blame History