Kyu's Site

Monday, 14 April 2025

Website Embeds

Recently, I wanted to do those embeds that can be seen around. You know what I am talking about, the embeds that give you a preview of what the links have to offer. I was curious to how those works and I decided to dig into them, what I found out is that those are called Open Graphs, or at least that is what the standard is called. I wanted to enable this for my blog, for obvious reasons. The thing is, you have to place them inside the head of the HTML file. Which I recently figured out how to do in ASP.NET.

Modifying the <head>

So at this moment, I have been using ASP.NET as a glorified PHP site. That is to say, I was mainly using it to build my site in a way that one would use PHP for in a basic way. I wanted to go bolder, and better! In order to do that, I needed to figure out how to modify the contents of the head. How do I do that? Do I need to dig deep into ASP.NET? Did I need to write my own ASP.NET? Actually, it is quite simple in to modify the <head>. All you have to do is add 1 section to the Blazor page, <HeadContent>. I started by making a css file for blogs and linking it to the blog page only. So I did:

<HeadContent>
	<link rel="stylesheet" href="css/Blog.css"/>
</HeadContent>

And, it worked as expected! But now, can I modify the title too? Well, you could do

<HeadContent>
	<title>Title Here</title>
</HeadContent>

but ASP.NET has a better option, using a <PageTitle> tag instead. Like so:

<PageTitle>Title Here</PageTitle>

I honestly didn't think too much of it, just a good way to split a massive CSS file into smaller ones. Only catch is that it seems to not work if it for a layout. That is interesting, but doesn't make too much sense to me. Maybe I messed up somewhere? I don't know, I tend to put all my CSS into a "single" file.

Learning about Open Graph

Then came the best part, the main reason for making this blog post. Open Graph! It uses the <meta> tags to load what it needs to load. Inside those tags, it uses the name and content attribute. The name attribute will always start with og: to denote that it is an Open Graph meta tag, with content containing what the value should be. More information can be found on the Open Graph site. So instead of the <head> being used for loading more CSS files, setting the icon, and title. I can now make it include data for other sites to use to embed my content with. So my blog page when from having

<HeadContent>
	<link rel="stylesheet" href="css/Blog.css"/>
</HeadContent>

<PageTitle>@_topHeader</PageTitle>

to now looking like

<HeadContent>
	<!-- Style Sheets -->
	<link rel="stylesheet" href="css/Blog.css"/>
	<!-- Generic -->
	<meta name="description" content="@_desc"/>
	<!-- Open Graph tags -->
	<meta name="og:title" content="@_topHeader"/>
	<meta name="og:type" content="website"/>
	<meta name="og:image" content="https://kyuvulpes.com/media/images/icon-256.png"/>
	<meta name="og:url" content="@NavManager.Uri"/>
	<meta name="og:locale" content="en_US"/>
	<meta name="og:site_name" content="Kyu's Personal Site"/>
	<meta name="og:description" content="@_desc"/>
	<!-- Twitter Tags -->
	<meta name="twitter:card" content="summary_large_image">
	<meta property="twitter:domain" content="kyuvulpes.com">
	<meta property="twitter:url" content="@NavManager.Uri">
	<meta name="twitter:title" content="@_topHeader">
	<meta name="twitter:description" content="@_desc">
	<meta name="twitter:image" content="https://kyuvulpes.com/media/images/icon-256.png">
</HeadContent>

<PageTitle>@_topHeader</PageTitle>

As a side note, Twitter (I am STILL not calling it by what Elongated Muskrat wants to call it) uses their own tags.

Of course to those that don't know Blazor, some of this does seem weird. Just note that the @something is a variable. It is declared somewhere else. Like the @NavManager is declared at the top with an @inject in front of it. The blog page is just 1 script that uses polymorphism to act as 3 different pages. I will get back to that shortly here though.

Starting from the top of the Open Graph section, you got the og:title tag. This is meant to tell the other site how to title the embed. For me, I just to the same title I would for the tab. Next is the og:type which simple says what content the embed is, simple as that. og:image is used to have an image embedded with the content. og:url is the URL that the embed will link to. og:locale is the localization of the content. og:site_name is the name of the site, of course. og:description is basically the content inside the page for my case. I wish it wasn't called description, as I think content or summary would be best for that tag.

How my site uses it.

I already showed you what my blog page does, and that the code for that page is polymorphic. Let me dive into what I mean by the page being polymorphic. If you go to /Blogs, you will get a list of every single blog on my site. It technically isn't a different page, it is the same page you are requesting. Same goes if you visit /Blogs/2025, guess what, same code working on both. And finally, it is the same code being this page that you are reading this from too. All of it is being processed by BlogPage.razor and BlogManager.cs. The first to, /Blogs and /Blogs/2025, are both listing blogs. One list every blog and the other blogs from 2025. So those are functioning similar, until you go to a blog. Suddenly, the page changes it's behavior and goes from listing to displaying. Polymorphism!

As a side note, the reason for doing it like this is simple. I thought it would be stupid to have 2 classes, BlogPage.razor and BlogList.razor. BlogList.razor would only be there to list the blogs, but that is kind of what BlogManager.cs does already. And since BlogPage.razor would only be displaying blogs, I thought it would be better to combine the two into a single class that calls into the manager.

If you were to link stuff from my site, how would it embed? Well, at this moment, most pages on my site don't have the Open Graph tags. With that being said, if you link to /Blogs or /Blogs/{year}, you would get a basic read out saying either, "All blogs on Kyu Vulpes' site" or "All blogs for ". Nothing special there, until you link a blog. Then, it switches behaviors and goes to giving the first 125 characters of the blog's content plus an ellipses. Why 125? I will let you figure that one out for yourself, you're a smart bean.

Conclusion

So that is pretty much it, that is what I have learned about Open Graph and how I use it. I am thinking of changing it to where the Open Graph tags are in a class of their own, as that might help with de-cluttering the source code. Though I have my doubts of doing it as I would want it to cover all my bases before I fully commit to doing it. Maybe make a new branch to work on it in the meantime? I mean, that is what git is good for.

An unhandled error has occurred. Reload 🗙