skip to Main Content

I’m building a dynamic site. There’s a Java app serving up a REST-ish JSON API and an Angular9 front end. I want to be able to post a link to a specific URL within the app on Twitter, Slack, or anywhere else that supports Twitter-card-style previews and have the surrounding environment unfurl a dynamic preview specific to that individual, virtual “page” in my single-page app.

I’m using Angular’s Meta service and successfully setting the meta tags on the page, but it obviously doesn’t happen until the JS runs. The only way I’ve found to get the meta tags loaded early enough to be available to Twitter or Slack is to hardcode them in my index.html. I’ve heard that Google’s and Bing’s crawlers will run client-side JS during indexing, but as far as I can tell, Twitter’s and Slack’s card preview mechanisms don’t. I haven’t tested Facebook or anything else, but I expect similar results. For the time being, I don’t care about SEO on this app, so the Google/Bing thing doesn’t help me.

Now, obviously, one option would be to reimplement a portion of my dynamic code in a server-side language, and let the server generate the index.html on the fly, but I really don’t want to do that. I currently have a very nice separation of concerns between my UI and my API; everything is nice and clean. My backend server is nice and lightweight, free of any of the libraries I’d need to introduce.

If it matters, the front end is served by nginx. For the development phase, nginx and the Java back end are running on the same host, but as it stands there’s no reason I couldn’t split them up, and I don’t want to change that.

The dynamically generated content is looked up from a database using a portion of the URL which is not available at build time, so re-generating the static index.html with the underlying data is not an option, and Angular’s nature as a single-page app precludes having multiple static HTML source files.

Am I missing an option that would work? I’m hoping there’s some additional <meta> tag I can add to my source that tells the surrounding environment to run the JS before reading the rest of the tags, but I’ve been able to find no evidence that such a thing exists.

EDIT: as I expect that the technical answer to this question is “no, you’re not missing anything; you have to do it server side,” I’d be interested in answers to a subquestion: how best to do that without ruining my separation of concerns?

Here’s the idea I have: create an API on the back end that can generate the meta tags, or at least the summary, title, description, and image URL to be used in the meta tags. Then run something lightweight on the UI side and configure nginx to proxy requests for index.html (or its replacement) to it. Then that thing would form a request to the backend and splice the results into the page before serving it back to nginx. My only server-side dynamic experience is with Java (waaaay too heavy for this) and PHP (ew). What’s out there that’s performant, lightweight (in terms of RAM), capable of making calls to a REST API, and then inserting the resulting content into an HTML document without too much fuss? I assume I could accomplish all of this with Django, Rails, Node.js, Flask, and probably a hundred other things.

2

Answers


  1. https://angular.io/guide/universal

    You should look into Angular SSR.

    Login or Signup to reply.
  2. If you don’t have the server to use Angular Universal, you can rename your index.html into index.php and then, for every page request, you can generate the meta tags and the title tag on the server but be sure that it is the same metadata that the Angular app would set. This way you don’t have to render the whole page on the server, only the parts that are important for social media crawlers.

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search