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

Core -> Webfiles and Metatags: Schema.org tags #122

Closed
bcardarella opened this issue Jan 31, 2023 · 3 comments · Fixed by #241
Closed

Core -> Webfiles and Metatags: Schema.org tags #122

bcardarella opened this issue Jan 31, 2023 · 3 comments · Fixed by #241
Assignees
@leandrocp
Labels
enhancement New feature or request help wanted Extra attention is needed
Milestone
v0.1.0

Comments

@bcardarella
Copy link
Contributor

bcardarella commented Jan 31, 2023 •
edited by leandrocp

See #122 (comment) for implementation details.

In addition to the meta tag support we should be using schema.org tags for better SEO. Here is what dockyard.com is currently rendering:

  <script id="ember899" class="ember-view" type="application/ld+json">{
  "@type": "Blog",
  "name": "DockYard Insights - DockYard Blog",
  "url": "https://dockyard.com/blog",
  "copyrightYear": 2023,
  "publisher": {
    "@type": "Corporation",
    "name": "DockYard",
    "url": "https://dockyard.com",
    "legalName": "DockYard, Inc."
  },
  "@context": "http://schema.org"
}
</script>

  <script id="ember913" class="ember-view" type="application/ld+json">{
  "@type": "BlogPosting",
  "headline": "LiveView Native Yearly Update",
  "description": "First LiveView Native update of 2023!",
  "datePublished": "2023-01-17T16:30:00.921Z",
  "publisher": {
    "@type": "Corporation",
    "name": "DockYard",
    "url": "https://dockyard.com",
    "legalName": "DockYard, Inc."
  },
  "mainEntityOfPage": "https://dockyard.com/blog",
  "genre": [
    "Engineering",
    "Elixir",
    "Mobile"
  ],
  "url": "https://dockyard.com/blog/2023/01/17/liveview-native-yearly-update",
  "author": {
    "@type": "Person",
    "name": "Brian Cardarella"
  },
  "@context": "http://schema.org"
}
</script>

Verifier: https://validator.schema.org/#url=https%3A%2F%2Fdockyard.com%2Fblog%2F2023%2F01%2F17%2Fliveview-native-yearly-update
@leandrocp leandrocp added this to the Version 0.1.0 milestone Feb 1, 2023
@AZholtkevych
Copy link

AZholtkevych commented Feb 1, 2023 •
edited

@bcardarella this will be part of version 0.1.0. Please correct me if I'm wrong

@bcardarella
Copy link
Contributor Author

@AZholtkevych this is necessary for dockyard.com launch.

I think this lib can help: https://github.com/rdf-elixir/jsonld-ex

@leandrocp leandrocp added the enhancement New feature or request label Feb 28, 2023
@AZholtkevych AZholtkevych changed the title Schema.org tags Core -> Webfiles and Metatags: Schema.org tags Apr 27, 2023
@AZholtkevych AZholtkevych removed this from the Version 0.1.0 milestone Apr 27, 2023
@AZholtkevych AZholtkevych added help wanted Extra attention is needed app:core labels Apr 27, 2023
@AZholtkevych AZholtkevych mentioned this issue May 1, 2023
Closed
29 tasks
@leandrocp
Copy link
Contributor

leandrocp commented May 4, 2023 •
edited

Search engines parse structured data to better understand each page in order to categorize a site and display rich results. There are different ways to add such data to pages and we'll use JSON-LD that is recommended by Google.

Working with structured data will be split into 2 parts:

  • data structure, storage, rendering in runtime layout, and admin UI to input raw schema
  • validation, UI to build the schema graph

This issue covers the first part only. See BeaconCMS/beacon_live_admin#36 for part 2.

Data Structure and Storage

Let's keep it as simple as possible. We'll add a :jsonb column data_structure raw_schema to beacon_pages to store that data:

Given this ld-json schema:

    [{
      "@context": "https://schema.org/",
      "@type": "Recipe",
      "name": "Banana Bread Recipe",
      "description": "The best banana bread recipe you'll ever find! Learn how to use up all those extra bananas."
    },
    {
      "@context": "https://schema.org",
      "@type": "BreadcrumbList",
      "itemListElement": [{
        "@type": "ListItem",
        "position": 1,
        "name": "Recipes",
        "item": "https://example.com/recipes"
      },{
        "@type": "ListItem",
        "position": 2,
        "name": "Bread recipes",
        "item": "https://example.com/recipes/bread-recipes"
      },{
        "@type": "ListItem",
        "position": 3,
        "name": "How To Make Banana Bread"
      }]
    }]

In Elixir it will look like:

[
  %{
    "@context" => "https://schema.org/",
    "@type" => "Recipe",
    "name" => "Banana Bread Recipe"
    # ... omitted for brevity
  },
  %{
    "@context" => "https://schema.org",
    "@type" => "BreadcrumbList",
    "itemListElement" => [
      %{
        "@type" => "ListItem",
        "item" => "https://example.com/recipes",
        "name" => "Recipes",
        "position" => 1
      }
      # ... omitted for brevity
    ]
  }
]

And rendered inside <head> as:

    <script type="application/ld+json">
    [{
      "@context": "https://schema.org/",
      "@type": "Recipe",
      "name": "Banana Bread Recipe",
      "description": "The best banana bread recipe you'll ever find! Learn how to use up all those extra bananas."
    },
    {
      "@context": "https://schema.org",
      "@type": "BreadcrumbList",
      "itemListElement": [{
        "@type": "ListItem",
        "position": 1,
        "name": "Recipes",
        "item": "https://example.com/recipes"
      },{
        "@type": "ListItem",
        "position": 2,
        "name": "Bread recipes",
        "item": "https://example.com/recipes/bread-recipes"
      },{
        "@type": "ListItem",
        "position": 3,
        "name": "How To Make Banana Bread"
      }]
    }]
    </script>

So it'll be stored as the original json without transformations, which is simple and flexible to support individual or nested multiple items.

Rendering

It should be similar to rendering meta tags but without the DataSource hook. Fetch from page and render.

Notes

  • We won't validate the content at this moment
  • No site-wide defaults

Refs

@leandrocp leandrocp mentioned this issue Aug 9, 2023
Open
@AZholtkevych AZholtkevych added this to the Version 0.1.0 milestone May 4, 2023
@leandrocp leandrocp self-assigned this May 15, 2023
@leandrocp leandrocp mentioned this issue May 18, 2023
Merged
6 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@leandrocp leandrocp

Labels
enhancement New feature or request help wanted Extra attention is needed
Projects
BeaconCMS
Status: Done
Milestone
v0.1.0
Development

Successfully merging a pull request may close this issue.

Introduce Snippets and raw_schema for pages BeaconCMS/beacon
4 participants
@bcardarella @schrockwell @leandrocp @AZholtkevych