The majority of marquest.io is client-side rendered using Svelte. Users of marquest.io share questionnaires that they created, and they need them to display on social media with the correct titles and descriptions. That means the HTML needs to be generated server-side.
Social media meta tag for html code#
They likely aren’t going to execute any javascript on your page, so even if you wrote code that changes the meta tags at runtime, it won’t make a difference for the preview cards. Social media sites scrape the meta tags from your site to create these cards. I use it to test out that meta tags for my site appear as I’d expect. A great site for previewing and generating meta tags. That would get more clicks than just some text, for sure! This image was created using Hey Meta. Rather than just displaying a boring text URL, social media sites might show something like the following image. The “og:” attributes are defined by the Open Graph Protocol, and are used by Facebook and probably many other sites. Not surprisingly, Twitter reads the “twitter:” prefixed attributes. There are a few variations because different sites will expect different tags.
Other attributes can be used, but these are the ones I care about. Everything a social media site would need to create a nicely formatted card for the link you shared. They describe the URL, title, description, and image. These are some of the tags I’m using on this page. When they share their content it should have whatever title and description they give it. I need SSR because I have user-generated content intended for sharing on social media. They go in the head of the HTML document and look as follows: Meta tags are HTML tags that define metadata about the document. This seems a common scenario to me, so I wanted to share how I set it up with Firebase. For marquest.io, I only care about rendering meta tags for social sharing reasons. My point is that in this instance I don’t care to have SSR for performance or SEO reasons. This isn’t an article about performance or SEO necessarily. As always, you want to consider the tradeoffs of implementing any feature, and one big tradeoff with SSR is the complexity it can introduce. Performance is almost always important, but SSR may not benefit the performance metrics that matter for your site. Those may be true in some circumstances, but depending on the type of site, SEO may not be important. Why server-side rendering (SSR)? And why just for meta tags?Ĭommon claims about SSR are that it improves performance and SEO. In this article, I’m going to discuss how and why I implemented server-side rendering with Firebase for my project marquest.io. Server-Side Rendering Meta Tags with Firebase
0 kommentar(er)
