Enhance SEO with dynamic meta tags, structured data, and mobile optimization #94
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
…erty and refactor app version retrieval Fix Open Graph meta tag property name typo and refactor `require()` calls to use ES6 imports for better module resolution. Changes: - Fix typo: `ogDecription -> ogDescription` and `og:descrition -> og:description` - Refactor `require()` to ES6 import for og-banner.png - Refactor `require()` to ES6 import for package.json - Fix computed property access in `getPlatform()` function This ensures Open Graph meta tags work correctly for social media sharing and improves code consistency by using ES6 imports.
…late.html` Create a new `index.html` file at the root to replace `index.template.html`, maintaining all existing meta tags and scripts for analytics and chat integration. Changes: - Create new `index.html` file at project root - Remove `src/index.template.html` - Maintain all existing meta tags, analytics, and chat scripts This simplifies the project structure by using a standard `index.html` file instead of a template file.
Update `og:url` meta tag to use the current route path instead of hardcoded homepage URL. Changes: - Import `useRoute` from `vue-router` to access current route - Add `buildFullUrl` helper function to construct full URLs - Update `ogUrl` template to return dynamic URL based on current path - Add `BASE_URL` constant for maintainability This ensures each page has the correct Open Graph URL for proper social media sharing.
Add comprehensive Twitter Card meta tags to improve social media sharing on Twitter/X platform. Changes: - Add `twitter:card` meta tag (default: `summary_large_image`) - Add `twitter:title` meta tag (defaults to page title) - Add `twitter:description` meta tag (defaults to page `description`) - Add `twitter:image` meta tag (defaults to `og-banner.png`) - Add `twitter:site` meta tag (`@OSSPhilippines`) - Support custom Twitter Card values via `useBuildMeta` parameters - Default Twitter Card values to Open Graph values for consistency (if not provided) This ensures proper Twitter Card rendering when links are shared on Twitter/X, improving click-through rates and social media presence.
Add canonical link tags to prevent duplicate content issues and help search engines identify the preferred URL for each page. Changes: - Add canonical link tag using dynamic `fullUrl` - Canonical URL automatically matches current page URL - Works for all routes: `/`, `/team`, `/projects`, `/awesome` This helps search engines understand which URL is the preferred version of each page, preventing duplicate content penalties and consolidating link equity.
Update `sitemap.xml` to include all site routes with proper metadata for better search engine indexing. Changes: - Add all routes: `/`, `/team`, `/projects`, `/awesome` - Update lastmod dates to current date (2025-11-16) - Add `changefreq` (change frequency) for each route - Set appropriate priorities (homepage: 1.0, others: 0.8-0.9) - Remove outdated comment from old sitemap generator This helps search engines discover and index all pages more effectively, improving overall SEO visibility.
Add `Organization`, `WebSite`, and `BreadcrumbList` structured data schemas to improve search engine understanding and enable rich results. Changes: - Add `Organization` schema with `name`, `URL`, `logo`, and social media links - Add `WebSite` schema with search action for `/awesome` page - Add `BreadcrumbList` schema with dynamic breadcrumbs based on route - Combine all schemas into a single JSON-LD script tag - Update structured data from minimal placeholder to comprehensive schemas This enables rich search results, better understanding of site structure, and improved SEO visibility through structured data markup.
Add `og:site_name` and `og:locale` meta tags to complete Open Graph implementation for better social media sharing. Changes: - Add `og:site_name` tag with site name (Open Source Software PH) - Add `og:locale` tag with locale (en_US) - These tags help social media platforms better understand the site This completes the Open Graph meta tags implementation and improves social media sharing appearance and consistency.
Fix reactivity issues in `useBuildMeta` composable to ensure all SEO features update correctly when routes change. Key changes: - Make `fullUrl` `computed()` reactive to `route.path` changes - Make `webSiteSchema` and `breadcrumbSchema` `computed()` reactive - Make `structuredData` `computed()` reactive - Convert canonical `href` to reactive function - Convert JSON-LD innerHTML to reactive function This ensures Open Graph URLs, canonical URLs, and structured data update dynamically per page when navigating between routes. Fixes issue where meta tags would show stale URLs after route changes.
Enhance all pages to use improved SEO meta tags with custom descriptions and Twitter Card data. Key changes: - `IndexPage`: Enhanced description and custom Twitter title/description - `TeamPage`: Enhanced description and custom Twitter title/description - `ProjectsPage`: Enhanced description and custom Twitter title/description - `AwesomePage`: Updated to use new useBuildMeta signature, removed old-style og/twitter objects - `ErrorNotFound`: Added meta tags with custom title, description, and Twitter data All pages now benefit from: - Dynamic Open Graph URLs (per page) - Twitter Card tags - Canonical URLs (per page) - Structured data (`Organization`, `WebSite`, `BreadcrumbList`) - Enhanced, page-specific descriptions This improves social media sharing and search engine optimization across all pages of the application.
Add mobile and app optimization meta tags to improve mobile browser experience and enable app-like behavior when added to home screen. Key changes: - Add `theme-color` meta tag (#027be3, matches Quasar primary color) - Add `mobile-web-app-capable` for Android/Chrome - Add `apple-mobile-web-app-capable` for iOS full-screen mode - Add `apple-mobile-web-app-status-bar-style` for iOS status bar - Add `apple-mobile-web-app-title` for iOS home screen app name Benefits: - Better mobile browser experience - Home screen app-like behavior on mobile devices - Proper theme color in mobile browsers (address bar, etc.) - Full-screen mode on iOS when added to home screen - Consistent branding across mobile platforms This completes the mobile optimization aspect of the SEO improvements.
- Replace relative import with absolute URL for og:image (required for social media) - Add og:image:width (2020) and og:image:height (1364) meta tags - Add og:image:alt for accessibility and better SEO - Copy og-banner.png to public folder for stable URL access - Ensure all Open Graph images use absolute URLs as per SEO best practices
jofftiquez
requested changes
Nov 18, 2025
Member
jofftiquez
left a comment
jofftiquez
left a comment
There was a problem hiding this comment.
For all meta related PRs, follow this:
Include a proof testing that the OG metadata are still working. You may run the app locally and then use ngrok to tunnel it online, then use facebook open graph debugger to validate changes.
OG debugger developers.facebook.com/tools/debug
|
Important Review skippedAuto reviews are disabled on base/target branches other than the default branch. Please check the settings in the CodeRabbit UI or the You can disable this status message by setting the ✨ Finishing touches🧪 Generate unit tests (beta)
Tip 📝 Customizable high-level summaries are now available in beta!You can now customize how CodeRabbit generates the high-level summary in your pull requests — including its content, structure, tone, and formatting.
Example instruction:
Note: This feature is currently in beta for Pro-tier users, and pricing will be announced later. Comment |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
This pull request implements comprehensive SEO improvements across the application, including dynamic meta tags, structured data schemas, and mobile optimization.
Key changes:
useRoute()and reactivecomputed()valuestwitter:card,twitter:title,twitter:description,twitter:image,twitter:site)sitemap.xmlwith all routes, properlastmoddates,changefreq, andprioritysettingsOrganization,WebSite,BreadcrumbList) using JSON-LDog:site_name,og:locale) for better social media recognitionuseBuildMetacomposable to ensure meta tags update when routes changeIndexPage,TeamPage,ProjectsPage,AwesomePage,ErrorNotFound) with enhanced SEO meta tags and custom descriptionstheme-color,mobile-web-app-capable,apple-mobile-web-app-capable, etc.)This significantly improves search engine optimization, social media sharing appearance, and mobile browser experience across all pages of the application.