Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

JSON-LD Metadata is rendered duplicated - SEO #1338

Closed
3wnbr1 opened this issue Aug 10, 2020 · 2 comments
Closed

JSON-LD Metadata is rendered duplicated - SEO #1338

3wnbr1 opened this issue Aug 10, 2020 · 2 comments

Comments

@3wnbr1
Copy link

3wnbr1 commented Aug 10, 2020

Describe the bug A clear and concise description of what the bug is.

Once the webpage is done rendering, the ``<script type="application/json+ld">...</script>``` templated through Helmet in Page component appears duplicated.

To Reproduce Steps to reproduce the behavior:

  1. Get ftw-daily runinng in production mode (also works in dev mode but less obvious)
  2. Open the devtools in your browser
  3. Notice that <script type="application/json+ld">...</script> appears both at the bottom of the header and the bottom of the served page.

Expected behavior A clear and concise description of what you expected to happen.

<script type="application/json+ld">...</script> should only appear once, this causes issues with Google Rich Results testing tools and furthermore, with SEO.

Desktop (please complete the following information):

  • OS: macOS 10.15.6
  • Browser : Safari : 13.x / 14.0 / Chrome 84.0.x

Smartphone (please complete the following information):

  • Device: iPhone SE (1st gen)
  • OS: iOS 14 Developper Beta 4
  • Browser : Safari
  • Version : 14

Googlebot also encounters the issue !!!

** Similar issues **

Even though ftw-daily uses react-helmet-async, there seems to be a bug in the way Hemet templates script tags

nfl/react-helmet#486
nfl/react-helmet#183 (comment)

Towards a fix*

Applying this patch mitigates the issue and therefore, json-ld metadata becomes valid for Google

diff --git a/src/components/Page/Page.js b/src/components/Page/Page.js
index 34243b6c..fd968404 100644
--- a/src/components/Page/Page.js
+++ b/src/components/Page/Page.js
@@ -43,6 +43,12 @@ class PageComponent extends Component {
     // handling both dragover and drop events.
     document.addEventListener('dragover', preventDefault);
     document.addEventListener('drop', preventDefault);
+
+    // Fix duplicate JSON-LD
+    const jsons = document.querySelectorAll('script[type="application/ld+json"]');
+    if (jsons.length > 0) {
+      jsons.item(0).remove();
+    }
   }
 
   componentWillUnmount() {
@Gnito
Copy link
Contributor

Gnito commented Aug 11, 2020

@3wnbr1 thanks for reporting - this is an interesting problem.

Initial thoughts:

It seems that the initial script element (or should we say duplicate) comes from the server-side rendered version. So, it could be that this is not directly related to the issue mentioned in the react-helmet repo.

With SSR, all the "helmet-managed" scripts are pushed to the end of the body to reduce unnecessary load before any rendering happens. But I think "react-helmet" and "react-helmet-async" both want to deal with <head> in CSR mode.

I don't want to change the page-load behaviour, so the approach you suggested makes sense.

Anyway, I'll add a bug report to our internal tracker too.

@Gnito Gnito mentioned this issue Aug 23, 2020
Merged
@Gnito
Copy link
Contributor

Gnito commented Aug 24, 2020

Fix merged to master. So, I'm closing this issue.

@Gnito Gnito closed this as completed Aug 24, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@Gnito @3wnbr1