thorsten / phpMyFAQ

phpMyFAQ - Open Source FAQ web application for PHP 8.1+ and MySQL, PostgreSQL and other databases
https://www.phpmyfaq.de
Mozilla Public License 2.0
582 stars 253 forks source link

Rich Snippets (structured data) for phpMyFAQ #3042

Open c1972 opened 3 days ago

c1972 commented 3 days ago

I made a test site with the complete JSON-LD markup nessecary to give phpMyFAQ-site fitting Rich-Snippets.

This can be found at: https://cc10.de/testseite.html

I tested all that markup in Googles Rich Snippets Testing Tool (https://search.google.com/test/rich-results) and my site gives no errors.

The source:

<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="UTF-8">
  <title>Rich Snippets - What is it?</title>
  <meta name="description" content="Frequently asked questions about Rich Snippets and phpMyFAQ">
  <link rel="canonical" href="https://cc10.de/testseite.html">

<!-- Complete JSON-LD markup for a FAQPage -->
<!-- Test here: https://search.google.com/test/rich-results -->

  <script type="application/ld+json">
  {
    "@context": "https://schema.org",
    "@type": "FAQPage",
    "mainEntity": [
      {
        "@type": "Question",
        "name": "Rich Snippets - What is it?",  // Frage 1
        "acceptedAnswer": {
          "@type": "Answer",
          "text": "Rich Snippets are dangerous sea monsters that rise up at night to drag unwary sleeping cows from the nearby shore into the sea."
        }
      },
      {
        "@type": "Question",
        "name": "How do I install phpMyFAQ?",  // Frage 2
        "acceptedAnswer": {
          "@type": "Answer",
          "text": "You install phpMyFAQ by downloading the latest version from the official website, unpacking the files on your server and following the installation instructions in the manual."
        }
      }
    ]
  }
  </script>

  <!-- JSON-LD markup for WebPage -->
  <script type="application/ld+json">
  {
    "@context": "https://schema.org",
    "@type": "WebPage",
    "name": "FAQ - example page",               // Title of the page
    "mainEntity": {
      "@type": "ItemList",
      "itemListElement": [
        {
          "@type": "ListItem",
          "position": 1,
          "item": {
            "@type": "Question",
            "name": "Rich Snippets - What is it?"  // Question 1
          }
        },
        {
          "@type": "ListItem",
          "position": 2,
          "item": {
            "@type": "Question",
            "name": "How do I install phpMyFAQ?"  // Question 2
          }
        }
      ]
    }
  }
  </script>

  <!-- JSON-LD Markup for Person -->
  <script type="application/ld+json">
  {
    "@context": "https://schema.org",
    "@type": "Person",
    "name": "Max Mustermann",                       // Name of the person
    "url": "https://example.com/max-mustermann",    // URL to the person
    "sameAs": [
      "https://www.linkedin.com/in/maxmustermann",
      "https://twitter.com/maxmustermann"
    ]
  }
  </script>

  <!-- JSON-LD markup for article with featured image image -->
  <script type="application/ld+json">
  {
    "@context": "https://schema.org",
    "@type": "Article",
    "mainEntityOfPage": {
      "@type": "WebPage",
      "@id": "https://cc10.de/testseite.html"
    },
    "headline": "FAQ - Example site",
    "image": {                                      // image, not primaryImageOfPage
      "@type": "ImageObject",
      "url": "https://example.com/images/faq-beitragsbild.jpg",
      "width": 800,
      "height": 600
    },
    "datePublished": "2024-06-29T08:00:00+02:00",   // Google prefers the ISO-8601 date format for dates, otherwise there are error messages.
    "dateModified": "2024-06-29T08:00:00+02:00",
    "author": {
      "@type": "Person",
      "name": "Max Mustermann",
      "url": "https://example.com/max-mustermann"  // Here I didn't have a URL at first, which gave an error message.
    },
    "inLanguage": "de"
  }
  </script>

</head>

<body>

  <!-- Breadcrumbs -->
  <nav aria-label="Breadcrumbs">
    <ol itemscope itemtype="https://schema.org/BreadcrumbList">
      <li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
        <a itemprop="item" href="https://example.com">
          <span itemprop="name">Startseite</span>
        </a>
        <meta itemprop="position" content="1">
      </li>
      <li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
        <a itemprop="item" href="https://example.com/faq">
          <span itemprop="name">FAQ</span>
        </a>
        <meta itemprop="position" content="2">
      </li>
    </ol>
  </nav>

  <h1>FAQ - Testseite</h1>

  <!-- Content section for question 1 -->
  <section>
    <h2>Rich Snippets - What is it?</h2>
    <p>Rich Snippets are dangerous sea monsters that rise up at night to drag unwary sleeping cows from the nearby shore into the sea.</p>
  </section>

  <!-- Content section for question 2 -->
  <section>
    <h2>How do I install phpMyFAQ?</h2>
    <p>You install phpMyFAQ by downloading the latest version from the official website, unpacking the files on your server and following the installation instructions in the manual.</p>
  </section>

</body>
</html>

Regards Christian