Adds JSON-LD metadata so web crawlers know what the content of each page is

lib/ret_web/controllers/file_controller.ex

@@ -17,7 +17,7 @@ defmodule RetWeb.FileController do
 
   def handle(conn, %{"id" => <<uuid::binary-size(36), ".html">>, "token" => token}, :show) do
     case Storage.fetch(uuid, token) do
-      {:ok, %{"content_type" => content_type}, _stream} ->
+      {:ok, %{"content_type" => content_type, "content_length" => content_length}, _stream} ->
         image_url =
           uuid
           |> Ret.Storage.uri_for(content_type)
@@ -27,11 +27,18 @@ defmodule RetWeb.FileController do
         app_name =
           AppConfig.get_cached_config_value("translations|en|app-full-name") ||
             AppConfig.get_cached_config_value("translations|en|app-name")
+        title = "Photo taken in #{app_name} immersive space"
+        config = AppConfig.get_config()
 
         conn
         |> render("show.html",
           image_url: image_url,
-          app_name: app_name
+          content_type: content_type |> RetWeb.ContentType.sanitize_content_type(),
+          content_length: content_length,
+          title: title,
+          translations: config["translations"]["en"],
+          images: config["images"],
+          root_url: RetWeb.Endpoint.url()
         )
 
       {:error, :not_found} ->

lib/ret_web/controllers/page_controller.ex

@@ -99,8 +99,10 @@ defmodule RetWeb.PageController do
     avatar_meta_tags =
       Phoenix.View.render_to_string(RetWeb.PageView, "avatar-meta.html",
         avatar: avatar,
+        description: "“#{avatar.name}” is an avatar you can use in the #{app_config["translations"]["en"]["app-name"]} immersive space.",
         ret_meta: Ret.Meta.get_meta(include_repo: false),
         translations: app_config["translations"]["en"],
+        root_url: RetWeb.Endpoint.url(),
         app_config_script: {:safe, app_config_script |> with_script_tags},
         extra_script: {:safe, get_extra_script(:avatar) |> with_script_tags},
         extra_html: {:safe, get_extra_html(:avatar) || ""}
@@ -135,6 +137,7 @@ defmodule RetWeb.PageController do
         "index-meta.html",
         root_url: RetWeb.Endpoint.url(),
         translations: app_config["translations"]["en"],
+        images: app_config["images"],
         app_config_script: {:safe, app_config_script |> with_script_tags},
         extra_script: {:safe, get_extra_script(:index) |> with_script_tags},
         extra_html: {:safe, get_extra_html(:index) || ""}
@@ -190,7 +193,7 @@ defmodule RetWeb.PageController do
     |> String.split("/")
     |> Enum.at(0)
     |> Avatar.avatar_or_avatar_listing_by_sid()
-    |> Repo.preload([:thumbnail_owned_file])
+    |> Repo.preload([:thumbnail_owned_file, :gltf_owned_file])
     |> render_avatar_content(conn)
   end
 

lib/ret_web/templates/file/show.html.eex

@@ -4,17 +4,40 @@
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
 
+    <script type="application/ld+json">
+    {
+        "@context": "https://schema.org/",
+        "@type": "ImageObject",
+        "caption": "<%= @title %>",
+        "representativeOfPage": true,
+        "contentUrl": "<%= @image_url %>",
+        "encodingFormat": "<%= @content_type %>",
+        "contentSize": "<%= @content_length %> b",
+        "keywords": ["screenshot", "Hubs", "immersive 3D spaces", "social VR", "<%= @translations["share-hashtag"] %>"],
+        "maintainer": {
+            "@type": "Organization",
+            "name": "<%= @translations["company-name"] %>",
+            "email": "<%= @translations["contact-email"] %>",
+            "logo": "<%= @images["company_logo"] %>"
+        },
+        "isBasedOn": "<%= @root_url %>/",
+        "isAccessibleForFree": true
+    }
+    </script>
+
     <meta name="twitter:card" content="summary_large_image">
     <meta name="twitter:domain" value="<%= RetWeb.Endpoint.host %>" />
-    <meta name="twitter:title" value="Photo taken in <%= @app_name %>" />
-    <meta property="twitter:image" content="<%= @image_url %>"/>
+    <meta name="twitter:title" value="<%= @title %>" />
+    <meta name="twitter:description" content="<%= @translations["app-tagline"] %>">
+    <meta name="twitter:image" content="<%= @image_url %>"/>
     <meta name="twitter:url" value="<%= @image_url %>" />
 
     <meta property="og:type" content="website" />
     <meta property="og:url" content="<%= @image_url %>" />
-    <meta property="og:title" content="Photo taken in <%= @app_name %>" />
+    <meta property="og:title" content="<%= @title %>" />
+    <meta property="og:description" content="<%= @translations["app-tagline"] %>">
     <meta property="og:image" content="<%= @image_url %>"/>
-    <title>Photo taken in <%= @app_name %></title>
+    <title><%= @title %></title>
     <style>
       body {
           display: flex;

lib/ret_web/templates/page/avatar-meta.html.eex

@@ -1,14 +1,31 @@
+<script type="application/ld+json">
+    {
+        "@context": "https://schema.org/",
+        "@type": "3DModel",
+        "name": "<%= @avatar.name %> | <%= @translations["app-full-name"] || @translations["app-name"] %>",
+        "url": "<%= @avatar |> Ret.Avatar.url %>",
+        "contentUrl": "<%= @avatar.gltf_owned_file |> Ret.OwnedFile.uri_for |> URI.to_string %>",
+        "thumbnailUrl": "<%= @avatar.thumbnail_owned_file |> Ret.OwnedFile.uri_for |> URI.to_string %>",
+        "description": "<%= @description %>",
+        "isResizable": false,
+        "keywords": ["Hubs", "social VR", "<%= @translations["share-hashtag"] %>"],
+        "isPartOf": "<%= @root_url %>/",
+        "isAccessibleForFree": true
+    }
+</script>
+
 <meta property="og:type" content="website" />
 <meta property="og:url" content="<%= @avatar |> Ret.Avatar.url %>" />
 <meta property="og:title" content="<%= @avatar.name %> | <%= @translations["app-full-name"] || @translations["app-name"] %>" />
-<meta property="og:description" content="&quot;<%= @avatar.name %>&quot; is an avatar you can use in <%= @translations["app-name"] %>." />
+<meta property="og:description" content="<%= @description %>" />
 <meta property="og:image" content="<%= @avatar.thumbnail_owned_file |> Ret.OwnedFile.uri_for |> URI.to_string %>"/>
+<meta property="og:site_name" content="<%= @translations["app-full-name"] || @translations["app-name"] %>"/>
 
 <meta name="twitter:card" content="summary_large_image">
 <meta name="twitter:domain" content="<%= RetWeb.Endpoint.host %>" />
 <meta name="twitter:title" content="<%= @avatar.name %> | <%= @translations["app-full-name"] || @translations["app-name"] %>" />
-<meta name="twitter:description" content="&quot;<%= @avatar.name %>&quot; is an avatar you can use in <%= @translations["app-name"] %>." />
-<meta property="twitter:image" content="<%= @avatar.thumbnail_owned_file |> Ret.OwnedFile.uri_for |> URI.to_string %>"/>
+<meta name="twitter:description" content="<%= @description %>" />
+<meta name="twitter:image" content="<%= @avatar.thumbnail_owned_file |> Ret.OwnedFile.uri_for |> URI.to_string %>"/>
 <meta name="twitter:url" content="<%= @avatar |> Ret.Avatar.url %>" />
 
 <meta name="ret:version" value="<%= @ret_meta[:version] %>" />
@@ -17,6 +34,7 @@
 <meta name="ret:pool" value="<%= @ret_meta[:pool] %>" />
 
 <title><%= @avatar.name %> | <%= @translations["app-full-name"] || @translations["app-name"] %></title>
+<meta name="description" content="<%= @description %>" />
 
 <%= @app_config_script %>
 <%= @extra_html %>

lib/ret_web/templates/page/hub-meta.html.eex

@@ -1,21 +1,34 @@
 <link rel="icon" sizes="16x16 24x24 32x32 48x48 64x64" href="/favicon.ico">
 
+<script type="application/ld+json">
+    {
+        "@context": "https://schema.org/",
+        "@type": "VirtualLocation",
+        "name": "<%= @hub.name %> | <%= @translations["app-full-name"] || @translations["app-name"] %>",
+        "url": "<%= @hub |> Ret.Hub.url_for %>",
+        "image": "<%= @hub |> Ret.Hub.image_url_for %>",
+        "description": "<%= @translations["app-tagline"] %> — <%= @translations["app-description"] %>",
+        "disambiguatingDescription": "<%= @scene.name %>"
+    }
+</script>
+
 <meta property="og:type" content="website" />
 <meta property="og:url" content="<%= @hub |> Ret.Hub.url_for %>" />
 <meta property="og:title" content="<%= @hub.name %> | <%= @translations["app-full-name"] || @translations["app-name"] %>" />
-<meta property="og:description" content="Join others in VR at <%= @hub.name %>, right in your browser." />
+<meta property="og:description" content="<%= @translations["app-tagline"] %>" />
 <meta property="og:image" content="<%= @hub |> Ret.Hub.image_url_for %>"/>
+<meta property="og:site_name" content="<%= @translations["app-full-name"] || @translations["app-name"] %>"/>
 
-<meta name="description" content="Join others at <%= @hub.name %>, right in your browser." />
+<meta name="description" content="<%= @translations["app-description"] %>" />
 
 <meta itemprop="name" content="<%= @hub.name %> | <%= @translations["app-full-name"] || @translations["app-name"] %>" />
-<meta itemprop="description" content="Join others in VR at <%= @hub.name %>, right in your browser." />
+<meta itemprop="description" content="<%= @translations["app-description"] %>" />
 
 <meta name="twitter:card" content="summary_large_image">
 <meta name="twitter:domain" content="<%= RetWeb.Endpoint.host %>" />
 <meta name="twitter:title" content="<%= @hub.name %> | <%= @translations["app-full-name"] || @translations["app-name"] %>" />
-<meta name="twitter:description" content="Join others in VR at <%= @hub.name %>, right in your browser." />
-<meta property="twitter:image" content="<%= @hub |> Ret.Hub.image_url_for %>"/>
+<meta name="twitter:description" content="<%= @translations["app-tagline"] %>" />
+<meta name="twitter:image" content="<%= @hub |> Ret.Hub.image_url_for %>"/>
 <meta name="twitter:url" content="<%= @hub |> Ret.Hub.url_for %>" />
 
 <meta name="ret:version" value="<%= @ret_meta[:version] %>" />

lib/ret_web/templates/page/index-meta.html.eex

@@ -5,14 +5,37 @@
 <meta name="description" content="<%= (@translations["app-description"] || "") |> String.replace("\\n", " ") %>">
 
 <!-- Schema.org for Google -->
-<meta itemprop="name" content="<%= @translations["app-full-name"] || @translations["app-name"] %>">
-<meta itemprop="description" content="<%= (@translations["app-description"] || "") |> String.replace("\\n", " ") %>">
+<script type="application/ld+json">
+    {
+        "@context": "https://schema.org/",
+        "@type": "WebApplication",
+        "browserRequirements": "WebGL",
+        "applicationCategory": ["MultimediaApplication", "CommunicationApplication", "SocialNetworkingApplication"],
+        "name": "<%= @translations["app-full-name"] || @translations["app-name"] %>",
+        "url": "<%= @root_url %>",
+        "description": "<%= @translations["app-description"] %>",
+        "headline": "<%= @translations["app-tagline"] %>",
+        "keywords": ["Hubs", "immersive 3D spaces", "social VR", "<%= @translations["share-hashtag"] %>"],
+        "image": "<%= @images["home_background"] %>",
+        "thumbnailUrl": "<%= @images["logo"] %>",
+        "maintainer": {
+            "@type": "Organization",
+            "name": "<%= @translations["company-name"] %>",
+            "email": "<%= @translations["contact-email"] %>",
+            "logo": "<%= @images["company_logo"] %>"
+        },
+        "isAccessibleForFree": true,
+        "offers": { "@type": "Offer", "price": 0 }
+    }
+</script>
 
 <!-- OpenGraph for Facebook -->
 <meta property="og:type" content="website">
-<meta property="og:title" content="<%= @translations["app-full-name"] %>">
-<meta property="og:description" content="<%= (@translations["app-description"] || "") |> String.replace("\\n", " ") %>">
+<meta property="og:title" content="<%= @translations["app-full-name"] || @translations["app-name"] %>"/>
+<meta property="og:description" content="<%= @translations["app-tagline"] %>">
 <meta property="og:url" content="/">
+<meta property="og:image" content="<%= @images["home_background"] %>">
+">
 
 <!-- Twitter -->
 <meta name="twitter:card" content="summary_large_image">
@@ -22,7 +45,7 @@
 <% end %>
 
 <meta name="twitter:title" content="<%= @translations["app-full-name"] || @translations["app-name"] %>">
-<meta name="twitter:image" content="<%= @root_url %>/app-thumbnail.png">
+<meta name="twitter:image" content="<%= @images["home_background"] %>">
 <meta name="twitter:description" content="<%= @translations["app-tagline"] %>">
 
 <!-- Microsoft Edge -->

lib/ret_web/templates/page/scene-meta.html.eex

@@ -1,21 +1,34 @@
 <%= if @scene.state == :active do %>
 
+
+<script type="application/ld+json">
+    {
+        "@context": "https://schema.org/",
+        "@type": "VirtualLocation",
+        "name": "<%= @scene.name %> | <%= @translations["app-full-name"] || @translations["app-name"] %>",
+        "url": "<%= @scene |> Ret.Scene.to_url %>",
+        "image": "<%= @scene.screenshot_owned_file |> Ret.OwnedFile.uri_for |> URI.to_string %>",
+        "description": "<%= @translations["app-tagline"] %> — <%= @translations["app-description"] %>"
+    }
+</script>
+
 <meta property="og:type" content="website" />
 <meta property="og:url" content="<%= @scene |> Ret.Scene.to_url %>" />
 <meta property="og:title" content="<%= @scene.name %> | <%= @translations["app-full-name"] || @translations["app-name"] %>" />
-<meta property="og:description" content="Join others in <%= @scene.name %>, right in your browser." />
+<meta property="og:description" content="<%= @translations["app-tagline"] %>" />
 <meta property="og:image" content="<%= @scene.screenshot_owned_file |> Ret.OwnedFile.uri_for |> URI.to_string %>"/>
+<meta property="og:site_name" content="<%= @translations["app-full-name"] || @translations["app-name"] %>"/>
 
-<meta name="description" content="Join others in <%= @scene.name %>, right in your browser." />
+<meta name="description" content="<%= @translations["app-description"] %>" />
 
 <meta itemprop="name" content="<%= @scene.name %> | <%= @translations["app-full-name"] || @translations["app-name"] %>" />
-<meta itemprop="description" content="Join others in <%= @scene.name %>, right in your browser." />
+<meta itemprop="description" content="<%= @translations["app-description"] %>" />
 
 <meta name="twitter:card" content="summary_large_image">
 <meta name="twitter:domain" content="<%= RetWeb.Endpoint.host %>" />
 <meta name="twitter:title" content="<%= @scene.name %> | <%= @translations["app-full-name"] || @translations["app-name"] %>" />
-<meta name="twitter:description" content="Join others in <%= @scene.name %>, right in your browser." />
-<meta property="twitter:image" content="<%= @scene.screenshot_owned_file |> Ret.OwnedFile.uri_for |> URI.to_string %>"/>
+<meta name="twitter:description" content="<%= @translations["app-tagline"] %>" />
+<meta name="twitter:image" content="<%= @scene.screenshot_owned_file |> Ret.OwnedFile.uri_for |> URI.to_string %>"/>
 <meta name="twitter:url" content="<%= @scene |> Ret.Scene.to_url %>" />
 
 <meta name="ret:version" value="<%= @ret_meta[:version] %>" />