This article talks about microdata that can be used in your existing .erb files to provide info as per schema.org {Originally published in newsletter Ash Gaikwad Blog}
Hello world đź‘‹,
I recently worked on revamping the SEO of one of the public-facing websites. The website is using Rails 8 with Ruby 3.4 ✨
Here is a short snippet showing how it will look. This one is a schema called Person about the blog's author. I use this inside the blog’s show view.
We use microdata to structure a webpage's content. Client apps and web crawlers can then understand these structured pages. Schema.org provides a vocabulary for structuring data. This vocabulary can be used in different ways. Here, we are going to use Microdata—simple attributes on any HTML element. Alternatives to Microdata include LD-JSON and RDFa.
Microdata is part of the WHATWG HTML Standard and is used to nest metadata within existing content on web pages. —mdn web docs
Our example app (blogging app)
If you have any existing app, you can skip this section. For purpose of the article, you can create a short blog app
rails new blog_app --css tailwind
cd blog_app
rails action_text:install
rails g scaffold Blog title:string! status:string! content:rich_text
rails db:migrate
You can see the complete section about this example app in the original post. The section itself is not relevant to the Microdata part. To keep this dev.to article on the main topic; we will continue with the Microdata part below.
Adding microdata to the blog’s show page
Let’s see what we have in the vocabulary provided by Schema.org. You can visit https://schema.org/docs/schemas.html and search for “blog”. It will show relevant terms that we can use.
Click on Blog. On this page, it is mentioned that individual blog posts are actually called BlogPosting. So that’s what we will use on our blog’s show page. Notice that in default scaffolded views, we have a common partial view called _blog.html.erb
. This is the view we will be updating.
Here is my current .erb file looks before adding any Microdata:
File: app/views/blogs/_blog.html.erb
Looking at schema.org’s BlogPosting type, we can provide microdata in our view for the following properties
-
articleBody
— this will be ourblog.content
-
headline
— this will be ourblog.title
-
creativeWorkStatus
— this will be ourblog.status
-
dateCreated
— this will beblog.created_at
-
dateModified
— this will beblog.updated_at
-
url
— this will be ourblog_url(blog)
Optionally, we can also give a few other info that is easy for us to get from our blog model such as wordCount, abstract, copyrightYear, datePublished, thumbnailUrl, etc.
The structure of Microdata will nicely follow our existing HTML (ERB) hierarchy. To visualize it, we will end up with this overview:
This overview is looking so beautiful already. Note that we used different HTML tags as suitable for the blog article. Even without microdata attributes (itemprop
, content
, itemscope
, etc), we get a nice understandable webpage. PS: We used the tag <meta>
for specifying the URL because we didn’t want to show that URL on the page.
Here is the complete _blog.html.erb file after adding microdata
File: app/views/blogs/_blog.html.erb
Adding metadata through Microdata doesn’t change anything visually on our blog but it adds structure and meaning to data. This then can be understood by search engines and accessibility features of browsers. Open your blog in the browser and see its page source (right-click and select “View Page Source” or “Inspect”). You can see that our HTML is nicely decorated with microdata.
That's pretty much it to add Microdata in your views. Google and other search engines will understand your page structure way better and your SEO will be leveled up.
Thanks for reading!
Suggested next reads:
Top comments (0)