Umieszczanie Linked Data w stopce wygenerowanej strony

[AdamWalkowski]

CONTEXT
Aby Google zaindeksował wyniki firm w rankigu poli, potrzeba date { firma, wynik } zapisać w formacie JSON-LD (np. jako FAQ: pytanie - odpowiedź) i umieścić tak sformatowaną treść w stopce wygenerowanego pliku HTML.

Gatsby generuje strony HTML w trakcie budowania aplikacji. Czyli optymalne byłoby pobranie wyników wszystkich firm z API jednorazowo w trakcie budowania. Czyli te dane nie zmieniałyby się póki nie zmieni się wersja aplikacji web.

W stopce strony HTML można umieszczać treść za pomocą React Helmet.

IMPLEMENTATION

const axios = require('axios');
const path = require('path');

exports.createPages = async ({ actions: { createPage } }) => {
  const result = await axios.get('api.pola.pl/companies');
  const companies = result.data;

  faqs.forEach(faq => {
    createPage({
      path: `/hidden}`,
      component: path.resolve('./src/templates/hiddenPageTemplate.js'),
      context: {
        companies
      },
    });
  });
};

HIDDEN PAGE TEMPLATE

import React from 'react';
import { Helmet } from 'react-helmet';

const ScoresPage = ({ pageContext: { companies } }) => {

  const generateStructuredData = (companies) => {
    return {
      "@context": "https://schema.org",
      "@type": "FAQPage",
      "mainEntity": companies.map(company => ({
        "@type": "Question",
        "name": generateQuestion(company),
        "acceptedAnswer": {
          "@type": "Answer",
          "text": generateAnswer(company)
        }
      }))
    };
  };

  return (
    <div>
      <Helmet>
        <script type="application/ld+json">
          {JSON.stringify(generateStructuredData(companies))}
        </script>
      </Helmet>
      {faqs.map(company=> (
        <div key={faq.id}>
          <h2>{faq.question}</h2>
          <p>{faq.answer}</p>
        </div>
      ))}
    </div>
  );
};

export default ScoresPage;