Make and Test Social Media Previews for your Low-Code Site

So let's talk about a shipping consideration when we're building our web apps or websites or, you know, these various things with the tools we use. And that's often we want to be able to share or elevate this information in other people's sites or in, say, social media. So like this is my Twitter feed and here you can see there's a, you know, thing from Twitch, right? When someone shares a link on Twitch, it turns out into this nice big card. Same thing over on YouTube. And you can get the same thing in your various other social media platforms, right? It becomes one of the great ways we can share things. It doesn't just show a little URL like stuff down here would say statechange.ai/join, right? But it will show the, you know, the broader image. And that's pretty cool, you know? We can get, you know, how can we make sure that those things will expand and look pretty for us to improve the visibility, right, of the sites and the applications that we build? In these environments that can be really useful for marketing and lend themselves also to automation. This is called a social media card. And we can analyze that in the HTML of a page. So if I were to go to, you know, let's just go to StateChangeAI for a second. And the, I have another one also on this same browser. But if I just use the inspector for a second, I can see there are certain tags that got created to my HTML that are really important for this. You know, of course there's the icon one that controls like that little icon that you see up in the corner up here. But you also have others that are relatively important. Like you can have a title that is actually specifically for what it's going to show on Twitter. What the description is, a Twitter-specific description, blah, blah, blah. There's something called, you know, OG, which is generally for these social media sharing. Becomes important prefix, like how big the image is supposed to be, what the images that it would show in those circumstances. And the— and what all of this does is add up to information that then gets used by these, by these social media sites to create those nice cards for you. And if you don't do it, it won't create a card for you. What it might do is show you a title, might show you what the favicon looks like. It's nearly as pretty or as useful. And the amount of work required to make those tags is, is actually pretty small. There's a whole standard that relates to how these things work, but one of the best ways to understand how it is working for you is instead of like showing it on social media and finding out, there are some pretty good validators out there. One is called Social Share Preview, which I like to use. If I were just to put in, I don't know, https://xano.com, you know, one of our, you know, no-code systems, you'll find that their page, you know, will show whatever their preview is. Oh no, actually Xano doesn't have one. Oh look, isn't that very interesting? And so as a result, it's unable to get information from Xano. But if I were to switch it over to say WeWeb, which I know does have one, you'll be able to see what the preview looks like for, for your site. And so as you, you know, as you dial in, you start, you know, mucking around and modifying whatever your meta tags are, you can run back over to a site like this, find out what it's actually going to look like across the various social media sites, including like the, what the, you know, subhead's going to be, et cetera. If you have it done as a Pinterest tag, as a Pinterest rich pin, these are all, you know, neat things that you can do. There are also validators that are specific to the various platforms. Twitter used to have a good one called Validator. It doesn't really work anymore. Now the only way for you to test it within Twitter is going to be by actually composing a tweet. LinkedIn has a pretty good one called Post Inspector. If I were to do, you know, once again, we'll do, you know, xano.com and we'll see what Xano would look like if you were to embed a link to Xano in a post. It doesn't really have one, but if you do HTTPS, Weebly.io, it does. Come on. Oh, I couldn't find that one either. I don't know what's going on with that. Okay, so the, um, so the idea is that you can, uh, add just a couple HTML tags and then just basically just using the title, um, you know, taking the title, the description so you can get sort of head and subhead and then include the image. And you're kind of off to the races. Now, I'll tell you that some of these no-code site builders provide you with places where you can say, oh, this is what I want my image to be, this is what I want my description to be, this is what I want my title to be. And sometimes people just sort of leave these things blank and don't really worry about them as they're making their sites. That can be fine early in production, but I gotta say, if you're at the point where you're even gonna be setting up like a favicon because you think that's gonna be part of the look of your site, if you just make sure that you set up the, just include an image, which could be a screenshot of your site, it could be however you want to express yourself, that would be just fine. I'll tell you that the, for this particular site, I think if I grab my, you know, content here, if I did copy the, we're just going to say copy all of that, right? And since it's a relative URL, I can just add it to the end of staging.jai. It will, it'll just show my logo, right? As opposed to more of a screenshot or whatever. I could probably do better than this. But it's this way you get to see what would be shown as you go through. By the way, it doesn't always work. So like there, I've definitely had situations where like right now on Twitter, it doesn't know about my site because it's not properly set up. And I can know that because if I go back over to social sharing and I go back over to say X. Yes, I guess we're calling it X now. If I were to bring up, say, Change AI, it will confirm for me that actually doesn't look like anything right now. It'll tell me about the errors I have, like the can't find my meta tags or my cards, it doesn't work quite right. And those become things you can check out as you go back over to your own site. So that becomes the way you can dial it in. I'm also going to include a link to this pretty useful article from LinkedIn where it shows you how, you know, which meta tags actually do this. You just put these into the head part of your HTML. HTML, and you could add things to the header, for example, in Webflow, in WeWeb, in most of these site builder type applications. Also, this is not something you can do with JavaScript. Whenever these social media sites are looking for your, for the information about your site, they're always doing it as basically a dumb browser. They ask for the initial HTML that comes back. So when you have something that's like things you want to do on page load, That doesn't count. What counts are things you are prepending to your page, or like, where is it? Or like, Code Webflow is very good about this because it's all static. WeWeb, it's a little bit more of a, you got to put this in like the custom code section or what have you to make sure it's at the top head of your page. And that's where those, where those meta tags go. And that's actually where the meta tags just really start to pay their bills. Now, there is one way to run up the score here that you should just also be aware of, which is this idea called oEmbed. OEmbed is a, um, is a standard that you've probably seen that allows you to embed not just a card preview of your site, but actually like a full-on, um, embed of the, uh, everything that you're up to. Uh, so if I were to go over to, uh, Pro State Change, right, this is the State Change, uh, you know, uh, Pro private community, uh, where we work on hard things. Uh, you know, one of the things we do is we show off, you know, our office hours. Right? And in our office hours, we have these, they all get recorded and I can click into one of those office hours and it gives me the actual embed of the, of how it works, you know, with transcript as well as the video and what have you. And the reason why this is expanding the way it is, I just dropped in a link to Descript of, you know, to please show me the office hours. And then it knew how to translate that. And knew how to translate that because of a standard that's called oEmbed, that if you have a URL and that URL has a certain additional, like an additional oEmbed meta tag, just like the social media tag we were just looking at, it will know how to embed into a site, which is, this takes a bit more work, but the end result is that you get more of a big interactive thing. So if I wanted to say, you know, StateChange AI doesn't really have one, but if I were to go to script tag and I were to, yeah, we'll open that up with StateChange. And I were to look at one of my, you know, shared sites. And we'll just bring that up in just a second here. I can go down to my, the sensor. Helpful. If I go over to my YouTube demos, for example, right? And I want to take a look at like my favicon changer. And I want to, you know, copy the share link, right? Which is a shared version of this page. Which does not require authentication, right? So if I were just to quickly sign out of StateChange, this is what it looks like to someone who's not currently signed into StateChange. But the other thing is actually has an oEmbed associated with it. And that oEmbed, I can sort of give it the URL of what the page looks like. And it will show me what the oEmbed looks like as well. See, and this is what it would look like in terms of what someone else would be able to see on, you know, in their page when they were to embed it into their site. Now, this is like decently more work, but not a huge amount more work. Because really what I have in here in this page is if I were to, you know, once again, take a look at it through DevTools and look at the inspector, I would find in my head the, you know, the, the, what was called the oEmbed link tag, which basically is another version of the site that contains the information that I'm really looking for here. So if I just go click on that for a second, copy link address, right? And open that up. Yeah, it gives me a little bit of JSON and that JSON then tells it how to embed the site, like how big it's supposed to be, how, what the URL is supposed to be, what the height of the frame is supposed to be. And these things are all things that you can set up like just by, you know, generating those pages. That get related to your main pages. Now, that's all a bigger topic, but what I'm trying to get at is this. When you're creating your web application or whatever, um, and your website, you're doing it with these no-code tools, they allow you to create things really fast, but there are also these things you can do at the end that will substantially improve your ability to share them and be able to get greater returns out of them. The simplest of these is the one that we started with, the idea of like the social media cards and the previews and being able to test for those to make sure they're going to look correct. On the various social media sites you would use to be able to expand your reach. And then as you get that and you get more comfortable with that, there's a way to actually connect more interactivity, more content in the same manner as someone would be able to share their YouTube by introducing support for the oEmbed standard by adding it to your, by just adding a link tag to the, to the page in question, or, you know, if you're dynamically setting up those pages, you know, doing that dynamically as well. And the, um, and then after that, uh, if you, uh, set it up to support oEmbed, some sites will support that out of the box. And then there, you can also register your site or your application with something called, um, Embedly. And Embedly is a service that like a lot of things use. I think Circle, which is the, um, what, what runs the state change, uh, community site, uh, uses Embedly behind the scenes and you can register your application, um, to, as a provider. Uh, you have to meet certain criteria. You have to make sure you're using the right things for your tag. Um, but then if you've got all that, um, we'll add you to a list of known oEmbed providers that will make it so that your site, if someone uses one of these forms, will expand out nicely. And, uh, Embedly is one of the two major vendors. The other one is called iFrame.ly. I don't doubt they're going to be, um, the iFrame.ly, and the, um, and here you can, you know, check your own URL and, um, and get it registered into, into their sites. So if I were just to take the state change thing here and, you know, grab my shared link, and go over to iFrame, I can see whether it's already set up. And if it's already set up, I'm able to register with it. See, and this is what it looks like. Just like I did with the other embed tester. Okay, so simple social media images and previews and descriptions. Um, complex oEmbed. But you have a whole range of opportunities, which frankly just don't take that much more work after you've gone through all that hard work of creating your site, creating your design, creating your copy, creating your interactivity, being able to connect this with more people in a way that frankly most other people don't allows you to elevate your, your, your application project above the rest. And this is a shipping consideration that for a little bit of work like that additional 5% can generate returns far in excess of that. And, you know, figuring out how to be getting those kinds of additional returns is exactly what we do over at StateChange. And if you want to learn more, come check us out. And if you have questions, like the social media preview stuff or how to be embedding, you know, some of your content to other people's sites, please leave a comment below and let's keep the conversation going. I'll see you next time.