SEO of FlexDashboard Shiny Apps

shiny
,
1

Does anybody have any insight into google web crawlers and websites created with flexdashboard. I am finding that all that is captured is the initial loading screen. Both in HTML and screen capture. Non of the meta tags from the true page are found / indexed. It is as if the web crawler is impatient to wait a second or two for server response. Can't find much on this topic.

I suppose what I am getting at is, how do you edit the initial loading HTML of the markdown to customise it and input your own meta tags. Maybe it requires some hard coding somewhere. As the YAML in_header and before_body apply to the final HTML page; not the very first piece of HTML that is created initially through loading that the web crawler finds. Thanks.

output: 
  flexdashboard::flex_dashboard:
    css: custom.css
    mathjax: null
    theme: bootstrap
    includes: 
     in_header: ['scripts.html']
     before_body: ['beforebody.html']
runtime: shiny
1 Like
2

Hi,

Although I am not familiar with flexdashboard, I am an SEO and R programmer. Couple of questions:

  1. Could you post a link to your project that's on the web? I can run a couple of tests for you
  2. What leads you to believe you have an issue/what is your issue?

A couple thoughts here:
-Google does ignore title tags and meta data in some instances and will display different titles/meta tags depending on the user's query
-Google doesn't crawl javascript - Google renders it. Google can miss out on some important content if it is buried in javascript. This can take a few extra days to weeks to understand internal linking, etc..

Example: (View with and without the "view-source")

  1. view-source:https://beta.rstudioconnect.com/jjallaire/htmlwidgets-d3heatmap/htmlwidgets-d3heatmap.html
    This title tag is displayed above the javascript, so it shouldn't be an issue.

  2. view-source:https://jjallaire.shinyapps.io/shiny-biclust/
    This one has no title tag, and I am unable to find it in Google.

Best Practice:
Have title tag, meta description, and a block of content near the top of the head. There are some other things you should avoid, but I'd have to see it to know.

If you want to share a github repo with me, I can help you figure out how to affect your title tag. I don't see documentation on it either. I'll be busy until around the same time tomorrow though.

Best,
fran

5 Likes
3

Thanks for the reply. I think the easiest thing is to refer to one of the public examples out there which you have picked out which demonstrates the issue. Your 2) example is perfect.

https://jjallaire.shinyapps.io/shiny-biclust/

The view source shows the HTML for the initial loading screen. Not the actual website itself. (This actual code (as you know) is found through developer tools and Elements).

So as far as I can tell, the trick is how to customise Rmarkdown source files which create this intial loading HTML code as that is all google web crawlers see.

I'm concentrating on trying to find this in source

      <div id="rmd_loader_wrapper">
        <div id="rmd_loader" style="display: none">
          <img src="rmd_resources/rmd_loader.gif"/>
          <p>Loading</p>
        </div>
      </div>

I can find the gif and a bit of js in my local library install ...rmarkdown/rmd/h/rmarkdown

Online this https://github.com/rstudio/rmarkdown/blob/master/R/shiny.R file at line 351 has "Please wait" instead of "Loading" as the text. But I can't find anything remotely like this in my local files. As I have no shiny.R file in my local files that I can see on windows.

I think this is an interesting issue for any flexdashboard developer.

1 Like
4

At this point, I'll pass it off to anyone who knows flexdashboard specifically.

But, you could also try this HTML preserve tag? Not sure if you are familiar/if it would work. I use it with blogdown: https://rmarkdown.rstudio.com/authoring_migrating_from_v1.html

Hope any of this has helped!

5

I agree! I’m wondering if it would get more of the right eyeballs on it in the shiny category? It’s really a toss-up where it best fits, but the problem here seems to relate to the deployment of the Shiny Document (apparently that’s what we’re calling these R Markdown-Shiny hybrids now).

I suspect that controlling what appears in the HTML stub that exists before the Shiny Document loads means interacting with whichever server software is serving your Shiny Document (Shiny Server or RStudio Connect), and those are more shiny topics to my mind. But it’s your topic, so in the end this is your call.

1 Like
6

That's a good point. You could also try viewing the source locally versus when it's deployed to rule this out. If the tags display locally then it could be the way it's being deployed.

But, I'm a little out of my depths here. Hope it makes you think of something.

Best,
fran

7

Alright, I think I've changed the category. Maybe a developer will spot it and throw a nugget of info in.

I think this is a good call. We just need someone to say how you get under the hood for a tinker. I could then post back with a solution for completeness, although it would be quite self evident at that point.

The HTML preserve tag information is useful regardless, so thanks for that.

8

Hey,

I actually have the exact same problem with my flexdashboard which you can find here:

https://baseball-dashboard.com/

I have no idea how to include og tags in the main code so that social media sites detect them. They are included when the page is fully loaded but not before.

@SteveC Did you find a solution for this?

1 Like
9

One solution to the problem is to use shiny_prerendered mode, as you then are able to actually influence the initial HTML payload. Unfortunately this does require that you go through and make changes to your code in potentially a bunch of places; on the plus side, the load times of your app will improve as well.

2 Likes
10

Thank you. I tried that but it didn't work. And unfortunately I don't really have time to get into it deeper at the moment.
But thanks. I hope I can come back to it at one point