Uploaded image for project: 'Moodle'
  1. Moodle
  2. MDL-78804

Open graph / sharing metadata api

    • Icon: New Feature New Feature
    • Resolution: Unresolved
    • Icon: Minor Minor
    • None
    • Future Dev
    • Course
    • MDL-78804-opengraph-metadata
    • Hide

      Confirm raw metadata is in place by viewing page source:

      1. Load the home page source and confirm there is no og:image tag present
      2. Create a small test course
      3. Load the course page source and confirm there is an og:image tag present with the svg place holder
      4. Visit /admin/settings.php?section=logos and set a logocompact
      5. Load the home page source and confirm there is a og:image tag present set to the logocompact
      6. Visit /admin/settings.php?section=logos and set a logo
      7. Load the home page source and confirm there is a og:image tag present set to the logo which is used in preference to the logocompact
      8. Load the course page source and confirm there is now a og:image tag present set to the site logo
      9. Edit the course and add course image
      10. Load the course page source and confirm there is now a og:image tag present set to the course image
      11. Edit the course and add Course summary
      12. Confirm there is also a description with the contents of the course summary
      13. Edit the course and add a page with a specific title and descrition
      14. Load the mod_page instances source and confirm there an og:title reflecting it's name
      15. Confirm there a description reflecting it's name description
      16. Confirm there is an og:image tag present set to the course image
      17. Create a forum activity
      18. Load the discussion page source and confirm there an og:title reflecting the forum name
      19. Confirm there is an og:image tag present set to the course image
      20. Create a discussion in the forum
      21. Load the discussion page source and confirm there an og:title reflecting the discussion name
      22. Confirm there is an og:image tag present set to the course image

      End to end testing using 3rd party Open graph testing tools can be tricky on a local box as these crawlers need a public site. So this needs to be done somewhere public. You will also need to open the site up to external access:

      1. As admin set autologinguests to yes
      2. In the test course to go Participants, then Enrolment methods, and toggle Guest access
      3. Repeat all of the test steps above but at each confirmation step copy the url into the Facebook Sharing debugger and ensure you click 'Scrape again'
        https://developers.facebook.com/tools/debug/
      Show
      Confirm raw metadata is in place by viewing page source: Load the home page source and confirm there is no og:image tag present Create a small test course Load the course page source and confirm there is an og:image tag present with the svg place holder Visit /admin/settings.php?section=logos and set a logocompact Load the home page source and confirm there is a og:image tag present set to the logocompact Visit /admin/settings.php?section=logos and set a logo Load the home page source and confirm there is a og:image tag present set to the logo which is used in preference to the logocompact Load the course page source and confirm there is now a og:image tag present set to the site logo Edit the course and add course image Load the course page source and confirm there is now a og:image tag present set to the course image Edit the course and add Course summary Confirm there is also a description with the contents of the course summary Edit the course and add a page with a specific title and descrition Load the mod_page instances source and confirm there an og:title reflecting it's name Confirm there a description reflecting it's name description Confirm there is an og:image tag present set to the course image Create a forum activity Load the discussion page source and confirm there an og:title reflecting the forum name Confirm there is an og:image tag present set to the course image Create a discussion in the forum Load the discussion page source and confirm there an og:title reflecting the discussion name Confirm there is an og:image tag present set to the course image End to end testing using 3rd party Open graph testing tools can be tricky on a local box as these crawlers need a public site. So this needs to be done somewhere public. You will also need to open the site up to external access: As admin set autologinguests to yes In the test course to go Participants, then Enrolment methods, and toggle Guest access Repeat all of the test steps above but at each confirmation step copy the url into the Facebook Sharing debugger and ensure you click 'Scrape again' https://developers.facebook.com/tools/debug/

      This is related to IDEA-7 but will break the idea down into more tasks

      Proposing:

      1. A new page api where a page can declare metadata. This wouldn't be a raw meta tag it would be a conceptual set of metadata. Some such as the page title already exist, but there could be specific overrides so the social shared title is different to the html page title.
      2. Many pages like a course page are not visible to guests but the enrol page is which is where you get redirected. We need a way for a page to declare its own metadata even if it would get redirected to either a login page or enrol page, but in a way which makes it very explicit which data is shareable or not.
      3. A core api when rendering the page will gather all the metadata both inferred and explicit and render it in the various ways it is needed by various other sites. This isn't purely just opengraph is might also be schema.org, or other metadata schemes.
      4. One technical challenge that needs to be prototyped is how it works when a page is normally redirected. There is examples in the wild which conditionally don't redirect when they detect a metadata bot and serve a minimal page which just has the basic shareable metadata. This needs some careful security and usability and seo testing but it seems viable in other software like wordpress:
        https://passwordprotectwp.com/docs/password-protect-open-graph-meta-tags/
      5. If this basic metadata page is show accidentally to a human then worse case it must show the redirect link it would have normally shown so they can follow along to the enrol page or the login page.
      6. Generic metadata bot detection is done using UA sniffing. Normally UA sniffing is considered a bad thing, but this applies to browsers. In the world of bots this is not a generally bad practice.
      7. Various pages will want to generate an image as part of the metadata, this will get deferred to a completely new api (MDL-78805)

       

        1. screenshot-1.png
          54 kB
          Martin Dougiamas
        2. image-2024-02-16-13-54-12-239.png
          50 kB
          Brendan Heywood
        3. image-2024-02-16-13-55-46-178.png
          51 kB
          Brendan Heywood
        4. screenshot-2.png
          69 kB
          Martin Dougiamas

            brendanheywood Brendan Heywood
            brendanheywood Brendan Heywood
            Votes:
            3 Vote for this issue
            Watchers:
            7 Start watching this issue

              Created:
              Updated:

                Error rendering 'clockify-timesheets-time-tracking-reports:timer-sidebar'. Please contact your Jira administrators.