SEO optimised with better performance#148
Conversation
|
@Anushlinux is attempting to deploy a commit to the djed-solidity Team on Vercel. A member of the Team first needs to authorize it. |
WalkthroughAdds static SEO/PWA assets (browserconfig.xml, sitemap.xml, robots.txt, manifest.json, updated index.html) and improves accessibility/semantic markup in layout and coin components (skip link, ARIA attributes, schema.org structured data). Changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes
Possibly related issues
Poem
Pre-merge checks and finishing touches❌ Failed checks (1 warning, 2 inconclusive)
✅ Passed checks (2 passed)
✨ Finishing touches
🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 7
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (2)
src/MainLayout.jsx (2)
23-104:CustomButtonlikely dropsaria-label, and the mobile menu toggle isn’t keyboard-accessible.
- You pass
aria-label="View your balance"into<CustomButton />(Line 92), but the currentCustomButtonsignature (see snippet) doesn’t forward extra props to<button>, so this label is probably ignored.- The mobile toggle icon uses
role="button"+tabIndex="0"(Lines 187-189) but has noonKeyDownfor Enter/Space, so keyboard users can’t operate it.Minimum fix idea:
<MenuIcon ... onClick={() => setMenuOpen(!isMenuOpen)} + onKeyDown={(e) => { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + setMenuOpen(!isMenuOpen); + } + }} aria-label={isMenuOpen ? "Close navigation menu" : "Open navigation menu"} aria-expanded={isMenuOpen} role="button" tabIndex="0" />And update
src/components/atoms/CustomButton/CustomButton.jsxto accept...restand spread onto<button>so ARIA props actually apply.
126-190: Fix ARIA role and remove non-Menu children from the dropdown Menu overlay.
role="menubar"(line 135) is incorrect for a button-triggered dropdown; userole="menu"instead. Themenubarrole is reserved for persistent application-style menu bars. For popup menus opened by a button, the standard ARIA pattern isrole="menu"on the overlay androle="menuitem"on items.<div className="WalletConfig">insideMenu(lines 174–176) breaks the expected<ul>/<li>structure. Wrap theWalletConnectButtonin aMenu.Item, use the Menuitemsprop, or render the wallet controls outside the menu overlay (e.g., in the header or Dropdown trigger area).Note: The
visibleandonVisibleChangeprops are correct for AntD v4.19.2 and do not require changes.
🧹 Nitpick comments (2)
src/components/atoms/CoinIndictor/CoinIndicator.jsx (1)
4-17: Prefer a real heading element for the coin name (and guardaltwhencoinNameis missing).-const CoinIndicator = ({ coinIcon, coinName }) => ( - <div className="CoinIndicator" role="heading" aria-level="3"> +const CoinIndicator = ({ coinIcon, coinName }) => ( + <div className="CoinIndicator"> {coinIcon && ( <img src={coinIcon} - alt={`${coinName} token icon`} + alt={coinName ? `${coinName} token icon` : "Token icon"} className="CoinIcon" width="24" height="24" loading="lazy" /> )} - <p className="CoinTitle" itemProp="name">{coinName}</p> + <h3 className="CoinTitle" itemProp="name">{coinName}</h3> </div> );src/MainLayout.jsx (1)
35-80: Prefer<a href>(notreact-router-dom<Link>) for external destinations.Using
<Link to={{ pathname: "//github.com/..." }} target="_blank">(e.g., Lines 36-47 / 138-149) is fragile. Use plain anchors for external URLs to avoid router interception edge-cases.Also applies to: 137-161
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (8)
public/browserconfig.xml(1 hunks)public/index.html(1 hunks)public/manifest.json(1 hunks)public/robots.txt(1 hunks)public/sitemap.xml(1 hunks)src/MainLayout.jsx(5 hunks)src/components/atoms/CoinIndictor/CoinIndicator.jsx(1 hunks)src/components/molecules/CoinCard/CoinCard.jsx(1 hunks)
🧰 Additional context used
🧬 Code graph analysis (2)
src/components/molecules/CoinCard/CoinCard.jsx (4)
src/components/atoms/CoinIndictor/CoinIndicator.jsx (1)
CoinIndicator(4-18)src/components/molecules/ReservesCard/ReservesCard.jsx (1)
CHAIN_COIN(6-6)src/components/molecules/BuySellCoin/BuySellCoin.jsx (1)
CHAIN_COIN(31-31)src/components/organisms/TransactionTable/TransactionTable.jsx (1)
CHAIN_COIN(6-6)
src/MainLayout.jsx (2)
src/components/atoms/CustomButton/CustomButton.jsx (1)
CustomButton(4-13)src/components/molecules/MetamaskStatusButton/WalletConnectButton.jsx (2)
navigate(107-107)WalletConnectButton(12-95)
| <meta charset="utf-8" /> | ||
| <meta http-equiv="X-UA-Compatible" content="IE=edge" /> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0" /> | ||
| <meta name="description" | ||
| content="Djed is a formally verified crypto-backed autonomous stablecoin protocol. Trade StableCoins and ReserveCoins on %REACT_APP_BC% with a decentralized, zero-governance monetary system backed by cryptocurrency reserves." /> | ||
| <meta name="keywords" | ||
| content="Djed, stablecoin, cryptocurrency, DeFi, decentralized finance, %REACT_APP_BC%, blockchain, crypto-backed, autonomous protocol, ReserveCoin, smart contracts, ERC-20, Web3" /> | ||
| <meta name="author" content="Djed Alliance" /> | ||
| <meta name="robots" content="index, follow, max-image-preview:large, max-snippet:-1, max-video-preview:-1" /> | ||
| <meta name="googlebot" content="index, follow" /> | ||
| <meta name="bingbot" content="index, follow" /> | ||
| <meta name="theme-color" content="#000000" /> | ||
| <meta property="og:title" content="Djed on %REACT_APP_BC%" /> | ||
| <meta name="description" | ||
| content="Djed is a formally verified crypto-backed autonomous stablecoin protocol. It has been researched since Q2 2020, its whitepaper has been released in August 2021, and it has multiple implementations and deployments. Here you can interact with a deployment that uses these smart contracts on %REACT_APP_BC%." /> | ||
| <meta property="og:description" | ||
| content="Djed is a formally verified crypto-backed autonomous stablecoin protocol. It has been researched since Q2 2020, its whitepaper has been released in August 2021, and it has multiple implementations and deployments. Here you can interact with a deployment that uses these smart contracts on %REACT_APP_BC%." /> | ||
| <meta property="og:image" content="%PUBLIC_URL%/%REACT_APP_LOGO_PATH%" /> | ||
| <meta property="og:url" content="%PUBLIC_URL%" /> | ||
| <meta name="twitter:card" content="summary_large_image"> | ||
| <meta property="twitter:url" content="%PUBLIC_URL%"> | ||
| <meta name="twitter:title" content="Djed on Ethereum Classic"> | ||
| <meta name="twitter:description" | ||
| content="Djed is a formally verified crypto-backed autonomous stablecoin protocol. It has been researched since Q2 2020, its whitepaper has been released in August 2021, and it has multiple implementations and deployments. Here you can interact with a deployment that uses these smart contracts on Ethereum Classic."> | ||
| <meta name="twitter:image" content="%PUBLIC_URL%/%REACT_APP_LOGO_PATH%"> | ||
| <!--link rel="apple-touch-icon" href="%PUBLIC_URL%/logo180.png" /--> | ||
| <link rel="preconnect" href="https://fonts.googleapis.com" /> | ||
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin /> | ||
| <link rel="dns-prefetch" href="https://fonts.googleapis.com" /> | ||
| <link rel="dns-prefetch" href="https://fonts.gstatic.com" /> | ||
|
|
||
| <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;600;700;800&display=swap" | ||
| rel="stylesheet" /> | ||
| <link href="https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@300;400;600&display=swap" rel="stylesheet" /> | ||
| <link rel="manifest" href="%PUBLIC_URL%/manifest.json" /> | ||
| <!-- | ||
| Notice the use of %PUBLIC_URL% in the tags above. | ||
| It will be replaced with the URL of the `public` folder during the build. | ||
| Only files inside the `public` folder can be referenced from the HTML. | ||
|
|
||
| Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will | ||
| work correctly both with client-side routing and a non-root public URL. | ||
| Learn how to configure a non-root public URL by running `npm run build`. | ||
| --> | ||
| <title></title> | ||
| </head> | ||
|
|
||
| <body> | ||
| <noscript>You need to enable JavaScript to run this app.</noscript> | ||
| <div id="root"></div> | ||
| <!-- | ||
| This HTML file is a template. | ||
| If you open it directly in the browser, you will see an empty page. | ||
| <title></title> | ||
| </head> |
There was a problem hiding this comment.
SEO regression: empty <title> + duplicate meta description.
You currently have two meta name="description" (Lines 8-9 and 18-19) and an empty <title> (Line 49). Recommend consolidating and setting a stable title:
- <meta name="description"
- content="Djed is a formally verified crypto-backed autonomous stablecoin protocol. Trade StableCoins and ReserveCoins on %REACT_APP_BC% ..." />
+ <meta name="description"
+ content="Djed is a formally verified crypto-backed autonomous stablecoin protocol. Trade StableCoins and ReserveCoins on %REACT_APP_BC% ..." />
...
- <meta name="description"
- content="Djed is a formally verified crypto-backed autonomous stablecoin protocol. It has been researched since Q2 2020, ..." />
...
- <title></title>
+ <title>Djed Protocol — Trade StableCoins & ReserveCoins on %REACT_APP_BC%</title>Committable suggestion skipped: line range outside the PR's diff.
🤖 Prompt for AI Agents
public/index.html lines 5-50: The HTML has a duplicate meta name="description"
and an empty <title>; remove the redundant meta description (keep the most
complete/accurate one), consolidate any variant text into that single
description tag, and set a meaningful non-empty <title> (e.g. "Djed on
%REACT_APP_BC%" or similar using the existing env placeholder) so SEO and social
previews are correct.
| <meta property="og:title" content="Djed on %REACT_APP_BC%" /> | ||
| <meta name="description" | ||
| content="Djed is a formally verified crypto-backed autonomous stablecoin protocol. It has been researched since Q2 2020, its whitepaper has been released in August 2021, and it has multiple implementations and deployments. Here you can interact with a deployment that uses these smart contracts on %REACT_APP_BC%." /> | ||
| <meta property="og:description" | ||
| content="Djed is a formally verified crypto-backed autonomous stablecoin protocol. It has been researched since Q2 2020, its whitepaper has been released in August 2021, and it has multiple implementations and deployments. Here you can interact with a deployment that uses these smart contracts on %REACT_APP_BC%." /> | ||
| <meta property="og:image" content="%PUBLIC_URL%/%REACT_APP_LOGO_PATH%" /> | ||
| <meta property="og:url" content="%PUBLIC_URL%" /> | ||
| <meta name="twitter:card" content="summary_large_image"> | ||
| <meta property="twitter:url" content="%PUBLIC_URL%"> | ||
| <meta name="twitter:title" content="Djed on Ethereum Classic"> | ||
| <meta name="twitter:description" | ||
| content="Djed is a formally verified crypto-backed autonomous stablecoin protocol. It has been researched since Q2 2020, its whitepaper has been released in August 2021, and it has multiple implementations and deployments. Here you can interact with a deployment that uses these smart contracts on Ethereum Classic."> | ||
| <meta name="twitter:image" content="%PUBLIC_URL%/%REACT_APP_LOGO_PATH%"> |
There was a problem hiding this comment.
Align OG/Twitter fields (network name + absolute URL).
og:title uses %REACT_APP_BC% (Line 17) but twitter:title is hardcoded to “Ethereum Classic” (Line 26). Also, %PUBLIC_URL% for og:url/twitter:url (Lines 23, 25) is only correct if PUBLIC_URL is configured to the canonical absolute origin in prod.
🤖 Prompt for AI Agents
In public/index.html around lines 17 to 29, the Open Graph and Twitter meta tags
are inconsistent: og:title uses %REACT_APP_BC% while twitter:title is hardcoded
to "Ethereum Classic", and og:url/twitter:url rely on %PUBLIC_URL% which may not
be an absolute origin. Replace the hardcoded twitter:title with the same
%REACT_APP_BC% placeholder (or the shared env var you use for the network name)
so both tags display the same network, and change og:url and twitter:url to use
an absolute origin environment variable (e.g., %REACT_APP_PUBLIC_URL% or ensure
PUBLIC_URL is set to the canonical absolute origin in production) so both meta
tags use the same canonical absolute URL; keep image tags pointing to the public
URL plus logo path as before.
| Allow: / | ||
| Allow: /sc | ||
| Allow: /rc | ||
| Allow: /my-balance | ||
| Allow: /terms-of-use | ||
| Disallow: /api/ | ||
| Disallow: /*.json$ | ||
| Disallow: /*?* | ||
|
|
||
| # Primary sitemap | ||
| Sitemap: https://djed.one/sitemap.xml |
There was a problem hiding this comment.
Robots rules are a bit over-broad (/*.json$ + /*?*) and can block legitimate assets/URLs.
Disallow: /*.json$will also block/manifest.json(and any other JSON endpoints you may actually want fetched/cached).Disallow: /*?*blocks all parameterized URLs (UTM links, share links, SPA state in query params), which can be counterproductive.
Consider narrowing + explicitly allowing the manifest:
User-agent: *
-Allow: /
-Allow: /sc
-Allow: /rc
-Allow: /my-balance
-Allow: /terms-of-use
Disallow: /api/
-Disallow: /*.json$
-Disallow: /*?*
+Disallow: /*?*
+Allow: /manifest.json
# Primary sitemap
Sitemap: https://djed.one/sitemap.xmlCommittable suggestion skipped: line range outside the PR's diff.
🤖 Prompt for AI Agents
In public/robots.txt around lines 3 to 13, the current Disallow rules are too
broad—`/*.json$` will block legitimate JSON assets like /manifest.json and
`/*?*` prevents all query‑param URLs (UTMs, share links, SPA state). Remove or
narrow the global `/*.json$` and `/*?*` directives, explicitly add an Allow for
/manifest.json (and any other JSON assets you need crawled), and instead of
blocking all query strings either delete the `/*?*` line or replace it with
targeted patterns (e.g., block only known tracking params or specific endpoints)
while keeping Disallow: /api/ to protect API routes.
There was a problem hiding this comment.
Actionable comments posted: 1
♻️ Duplicate comments (4)
public/sitemap.xml (1)
35-63: Clarify the intent of milkomeda-c1.djed.one entries in the production sitemap.The sitemap includes milkomeda-c1.djed.one (lines 35–63), which a previous review flagged as potentially mixing testnet with production. Before merging, confirm:
- Is
milkomeda-c1.djed.onea production subdomain that should be indexed, or is it a testnet/staging environment?- If it's testnet, it should be removed from this sitemap and either blocked via a separate
robots.txtfor that subdomain or served withnoindexheaders.- If it's production, document the subdomain's purpose so it's clear to future maintainers.
The absence of
<lastmod>tags is acceptable—this addresses the staleness concern from the previous review.src/components/molecules/CoinCard/CoinCard.jsx (2)
39-45: Still not fixed:priceCurrency="USD"contradicts displayed currency.Line 44 hardcodes USD but the displayed price is in CHAIN_COIN. Additionally, itemProp="price" on line 41 should contain a numeric value, not a formatted string.
Apply this fix:
- <span id={`${tokenName}-price-label`}>Current Price</span> - <h3 aria-labelledby={`${tokenName}-price-label`} itemProp="price"> + <span id={`${tokenName}-price-label`}>Current Price</span> + <h3 aria-labelledby={`${tokenName}-price-label`}> {priceAmount} {CHAIN_COIN} </h3> - <meta itemProp="priceCurrency" content="USD" /> + <meta itemProp="price" content={String(priceAmount)} /> + <meta itemProp="priceCurrency" content={CHAIN_COIN} />
27-27: Still not fixed: Unsafe DOM IDs using rawtokenName.Using
${tokenName}directly in id attributes can produce invalid IDs iftokenNamecontains spaces, special characters, or starts with a digit.Consider using React's
useId()hook or sanitize the token name:+import React, { useId } from "react"; + const CoinCard = ({ coinIcon, coinName, priceAmount, sellPriceAmount, circulatingAmount, tokenName, equivalence }) => { + const idPrefix = useId(); return ( <article className="CoinCard" aria-label={`${coinName} statistics`} itemScope itemType="https://schema.org/Product" > <CoinIndicator coinIcon={coinIcon} coinName={coinName} /> <hr aria-hidden="true" /> {sellPriceAmount && priceAmount !== sellPriceAmount ? ( <div className="PriceInfo" itemProp="offers" itemScope itemType="https://schema.org/AggregateOffer"> - <span id={`${tokenName}-buy-label`}>Current Buy Price</span> - <h3 aria-labelledby={`${tokenName}-buy-label`} itemProp="highPrice"> + <span id={`${idPrefix}-buy-label`}>Current Buy Price</span> + <h3 aria-labelledby={`${idPrefix}-buy-label`} itemProp="highPrice"> {priceAmount} {CHAIN_COIN} </h3> - <span id={`${tokenName}-sell-label`}>Current Sell Price</span> + <span id={`${idPrefix}-sell-label`}>Current Sell Price</span>And similarly for the other IDs on lines 40 and 49.
Also applies to: 31-31, 40-40, 49-49
public/index.html (1)
24-24: Still not fixed: Twitter title hardcoded to "Ethereum Classic".Line 24 hardcodes "Ethereum Classic" while
og:title(line 17) uses the dynamic%REACT_APP_BC%placeholder. This creates inconsistent social sharing previews across platforms.Apply this fix:
- <meta name="twitter:title" content="Djed on Ethereum Classic"> + <meta name="twitter:title" content="Djed on %REACT_APP_BC%">
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (5)
public/browserconfig.xml(1 hunks)public/index.html(1 hunks)public/manifest.json(1 hunks)public/sitemap.xml(1 hunks)src/components/molecules/CoinCard/CoinCard.jsx(1 hunks)
🚧 Files skipped from review as they are similar to previous changes (1)
- public/browserconfig.xml
🧰 Additional context used
🧬 Code graph analysis (1)
src/components/molecules/CoinCard/CoinCard.jsx (4)
src/components/atoms/CoinIndictor/CoinIndicator.jsx (1)
CoinIndicator(4-18)src/components/molecules/ReservesCard/ReservesCard.jsx (1)
CHAIN_COIN(6-6)src/components/molecules/BuySellCoin/BuySellCoin.jsx (1)
CHAIN_COIN(31-31)src/components/organisms/TransactionTable/TransactionTable.jsx (1)
CHAIN_COIN(6-6)
🔇 Additional comments (7)
src/components/molecules/CoinCard/CoinCard.jsx (1)
17-24: Good semantic and accessibility improvements.The article wrapper with schema.org Product type and the aria-hidden HR enhance both SEO and screen reader experience.
public/index.html (3)
4-16: Comprehensive SEO and metadata setup.The meta tags provide strong signals for search engines with proper indexing directives, viewport configuration, and rich keyword targeting.
29-36: Good font loading optimization.The preconnect, dns-prefetch, and
display=swapparameter optimize font loading performance and prevent layout shifts.
47-60: Title and noscript improvements enhance UX and SEO.The descriptive title (line 47) resolves the previous empty title issue, and the styled noscript block (lines 51-58) provides a helpful fallback for users without JavaScript.
public/manifest.json (3)
2-4: Enhanced PWA identity and discoverability.The updated name, short name, and description provide clear branding and improve app store visibility.
11-28: Icon purpose values corrected.Line 15 now uses the valid
"any"purpose instead of the previous invalid"apple touch icon", and maskable icons are properly configured for adaptive icons on Android.
50-86: No action required. All shortcut icon files referenced in the manifest.json (coin-icon-one.png,coin-icon-two.png,coin-icon-three.png) are present in the public directory and properly configured.
| +<h3 aria-labelledby={`${tokenName}-price-label`}> | ||
| + {priceAmount} {CHAIN_COIN} | ||
| +</h3> | ||
| +<meta itemProp="price" content={String(priceAmount)} /> | ||
| +<meta itemProp="priceCurrency" content={CHAIN_COIN} /> |
There was a problem hiding this comment.
Critical: Malformed code with diff markers.
Lines 32-36 contain + prefix characters that appear to be leftover diff markers from a merge conflict or incorrect paste. This will cause a syntax error.
Remove the + markers and fix the structure. It appears you intended to add meta tags for the sell price:
- +<h3 aria-labelledby={`${tokenName}-price-label`}>
- + {priceAmount} {CHAIN_COIN}
- +</h3>
- +<meta itemProp="price" content={String(priceAmount)} />
- +<meta itemProp="priceCurrency" content={CHAIN_COIN} />
+ <h3 aria-labelledby={`${tokenName}-sell-label`}>
+ {sellPriceAmount} {CHAIN_COIN}
+ </h3>
+ <meta itemProp="lowPrice" content={String(sellPriceAmount)} />
+ <meta itemProp="priceCurrency" content={CHAIN_COIN} />Note: For AggregateOffer, use lowPrice for the sell price and ensure the label ID matches (sell-label not price-label).
Committable suggestion skipped: line range outside the PR's diff.
🤖 Prompt for AI Agents
In src/components/molecules/CoinCard/CoinCard.jsx around lines 32 to 36, the
block contains leftover diff markers (`+`) causing syntax errors; remove all `+`
prefixes and restore valid JSX, change the h3 aria-labelledby to use
`${tokenName}-sell-label` (not `price-label`), and replace the meta itemProp
from `price` to `lowPrice` for AggregateOffer semantics while keeping
`priceCurrency` as CHAIN_COIN; ensure meta content values are stringified (e.g.,
String(priceAmount)) and the label IDs used in aria-labelledby match the
corresponding element ID `sell-label`.
There was a problem hiding this comment.
Actionable comments posted: 1
♻️ Duplicate comments (3)
src/components/molecules/CoinCard/CoinCard.jsx (3)
39-45:priceCurrencymismatch: metadata says "USD" but displayed price usesCHAIN_COIN.Line 44 hardcodes
content="USD"while line 42 displays the price in{CHAIN_COIN}. This will invalidate rich results since the currency doesn't match. Additionally,itemProp="price"on the<h3>includes text with the currency symbol.<div className="PriceInfo" itemProp="offers" itemScope itemType="https://schema.org/Offer"> <span id={`${tokenName}-price-label`}>Current Price</span> - <h3 aria-labelledby={`${tokenName}-price-label`} itemProp="price"> + <h3 aria-labelledby={`${tokenName}-price-label`}> {priceAmount} {CHAIN_COIN} </h3> - <meta itemProp="priceCurrency" content="USD" /> + <meta itemProp="price" content={String(priceAmount)} /> + <meta itemProp="priceCurrency" content={CHAIN_COIN} /> </div>
31-36: Critical bug: Sell price section displays buy price and has mismatched aria-labelledby.Two issues here:
- Line 32 references
${tokenName}-price-labelbut the span on line 31 defines${tokenName}-sell-label.- Lines 33-35 display/use
priceAmountinstead ofsellPriceAmountfor the sell price.- For AggregateOffer, the sell price should use
itemProp="lowPrice", not"price".<span id={`${tokenName}-sell-label`}>Current Sell Price</span> - <h3 aria-labelledby={`${tokenName}-price-label`}> - {priceAmount} {CHAIN_COIN} + <h3 aria-labelledby={`${tokenName}-sell-label`}> + {sellPriceAmount} {CHAIN_COIN} </h3> - <meta itemProp="price" content={String(priceAmount)} /> + <meta itemProp="lowPrice" content={String(sellPriceAmount)} /> <meta itemProp="priceCurrency" content={CHAIN_COIN} />
28-30: Schema.org price properties expect numeric values, not formatted text.The
itemProp="highPrice"on the<h3>will include both the number and currency text (e.g., "1.5 ADA"). Schema.org expects only numeric values for price properties. Use a<meta>tag for the machine-readable value instead.- <h3 aria-labelledby={`${tokenName}-buy-label`} itemProp="highPrice"> + <h3 aria-labelledby={`${tokenName}-buy-label`}> {priceAmount} {CHAIN_COIN} </h3> + <meta itemProp="highPrice" content={String(priceAmount)} />
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
src/components/molecules/CoinCard/CoinCard.jsx(1 hunks)
🧰 Additional context used
🧬 Code graph analysis (1)
src/components/molecules/CoinCard/CoinCard.jsx (4)
src/components/atoms/CoinIndictor/CoinIndicator.jsx (1)
CoinIndicator(4-18)src/components/molecules/ReservesCard/ReservesCard.jsx (1)
CHAIN_COIN(6-6)src/components/organisms/TransactionTable/TransactionTable.jsx (1)
CHAIN_COIN(6-6)src/components/molecules/BuySellCoin/BuySellCoin.jsx (1)
CHAIN_COIN(31-31)
🔇 Additional comments (2)
src/components/molecules/CoinCard/CoinCard.jsx (2)
17-24: Good improvements to semantic structure and accessibility.Using
<article>with schema.org Product markup andaria-labelis appropriate for this card component. Thearia-hidden="true"on the decorative<hr>correctly hides it from assistive technology.
47-54: Accessibility additions look good.The
aria-labelledbyassociations for circulating supply and thearia-labelon the equivalence paragraph provide helpful context for screen reader users.
| </div> | ||
| </div> | ||
| </div> | ||
| <meta itemProp="name" content={coinName} /> |
There was a problem hiding this comment.
Duplicate itemProp="name" — already set in CoinIndicator.
The CoinIndicator component (line 23) already renders <p itemProp="name">{coinName}</p>. Adding another <meta itemProp="name"> here creates duplicate structured data for the same property, which may confuse search engine parsers.
Remove the redundant meta tag:
- <meta itemProp="name" content={coinName} />
</article>📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| <meta itemProp="name" content={coinName} /> | |
| </article> |
🤖 Prompt for AI Agents
In src/components/molecules/CoinCard/CoinCard.jsx around line 56, remove the
redundant <meta itemProp="name" content={coinName} /> because CoinIndicator
already outputs an element with itemProp="name"; delete this duplicate meta tag
so the structured data only contains a single name property for the coin.
1 participant
Implemented a full SEO suite including rich meta tags, enriched sitemap.xml, and optimized robots.txt, while enhancing accessibility with semantic HTML and ARIA attributes for better lighthouse scores with small ui semantics and tag changes of the specific page and a browserconfig.xml file for better results on microsoft products like google chrome
(The changes seems minimal but lighthouse heavily imposes restrictions on localhost, so in prod, that 2% would be much more exaggerated)
FIxes: #138
Lighthouse results before:
Lighthouse results after:
Summary by CodeRabbit
New Features
Improvements
✏️ Tip: You can customize this high-level summary in your review settings.