Include static metadata in Shiny / Markdown Application

shiny
,
1

Hi,
I am developing a web-application with shiny server (Open Source edition) and R-Markdown/flexdashboard. I wonder how I can include any static meta-information in HEAD- element of the HTML.

I know already how to set includes, title and so on using the YAML front matter of a markdown document. However, this information is not included in the static html rendered by shiny server when loading the initial page (loading screen), but rather it is including dynamically as the app is rendering. The problem is that many search- and metadata crawlers only seem evaluate the static html (e.g. opengraph debugger, Google search console). Therefore, the meta-data is useless for indexing the application on the web.

At the moment, I am using a YAML front matter like this:


---
title: "MyTitle"
output: 
  flexdashboard::flex_dashboard:
    includes:
      after_body: footer.html
      in_header: header.txt
runtime: shiny  
---

The static HTML rendered by shiny server is always the following (does not include any of the metadata):

<!DOCTYPE html>
<html>
<head>

  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <script type="application/shiny-singletons"></script>
  <script type="application/html-dependencies">json2[2014.02.04];jquery[1.12.4];shiny[1.0.5]</script>
<script src="shared/json2-min.js"></script>
<script src="shared/jquery.min.js"></script>
<link href="shared/shiny.css" rel="stylesheet" />
<script src="shared/shiny.min.js"></script>  <script src="rmd_resources/rmd_loader.js"></script>
  <link href="rmd_resources/rmd_loader.css" rel="stylesheet"/>

<script src="__assets__/sockjs-0.3.4.min.js"></script>
<script src="__assets__/shiny-server-client.min.js"></script>
<script>preShinyInit({reconnect:true,disableProtocols:[]});</script>
<link rel="stylesheet" type="text/css" href="__assets__/shiny-server.css"/>

</head>

<body>
  <div>
    <div data-display-if="!output.__reactivedoc__" data-ns-prefix="">
      <div id="rmd_loader_wrapper">
        <div id="rmd_loader" style="display: none">
          <img src="rmd_resources/rmd_loader.gif"/>
          <p>Loading</p>
        </div>
      </div>
    </div>
    <div id="__reactivedoc__" class="shiny-html-output"></div>
  </div>
</body>

</html>
1 Like
2

The question is not solved, but I found a workaround for my problem:

I created an index.html that contains all the meta-information that I wanted to include (title, description, opengraph-tags, etc) and an iframe with the flexdashboard that spans over the whole document.

Shiny server will always render the .rmd prior to the static html if it is placed in one app-directory, so I placed the index.html in the www-directory of a different shiny app, together with an empty server.R file. Then I configured shiny server in a way that the static page with the index.html is linked to, say, www.foo.net/ and the flexdashboard linked to www.foo.net/flexdashboard/. The latter url is then embedded inside the iframe of the index.html.

It's not a nice solution but it works, except for the social-menu of flexdashboard (it will always share url from inside the iframe instead of the parent-url that contains the metadata).

Maybe this will help someone someday. Comments and questions are welcome.

3 Likes