oracle

Oracle APEX 22.2: Meta Tags

VincentMorneau

14 Oct 2022 • 4 min read

I recently realized I haven't blogged once since I joined the Oracle APEX team. I figured I would resurrect my blog to talk about some of the features of APEX 22.2.

Here's a small one that I'm particularly excited about: Declarative Meta Tags. Demo: https://apex.oracle.com/pls/apex/r/vmorneau/222-new-features/meta-tags

First, what are meta tags? Meta tags are little pieces of information about a web page such as a page title, description, image, etc. They are used as <meta> elements inside the <head> section of a web page:

<head>
    <!-- Primary Meta Tags -->
    <title>Oracle APEX 22.2: Meta Tags</title>
    <meta name="title" content="Oracle APEX 22.2: Meta Tags">
    <meta name="description" content="Generate nice looking previews of your APEX pages with  declarative meta tags.">

    <!-- Open Graph / Facebook -->
    <meta property="og:type" content="website">
    <meta property="og:title" content="Oracle APEX 22.2: Meta Tags">
    <meta property="og:description" content="Generate nice looking previews of your APEX pages with  declarative meta tags.">
    <meta property="og:image" content="https://apex.oracle.com/pls/apex/r/vmorneau/165831/files/static/v13/apex-222-declarative-meta-tags.png">

    <!-- Twitter -->
    <meta property="twitter:card" content="summary_large_image">
    <meta property="twitter:title" content="Oracle APEX 22.2: Meta Tags">
    <meta property="twitter:description" content="Generate nice looking previews of your APEX pages with  declarative meta tags.">
    <meta property="twitter:image" content="https://apex.oracle.com/pls/apex/r/vmorneau/165831/files/static/v13/apex-222-declarative-meta-tags.png">
</head>

Example of meta tags rendered on a web page

Most importantly, meta tags are used by other websites or apps to render previews of your web page. When you post a link to some of your favourite apps, notice it sometimes unfolds to generate a preview card:

Twitter rendering a tweet that contains a link

Facebook rendering a post that contains a link

But meta tags aren't just about sharing links. They're also used by search engines to render the content about your web page:

So how do you achieve that in APEX? Before APEX 22.2 you had to go out of your way to copy a page template and inject your own code. It was not recommended. Now in 22.2 you can do this declaratively.

There are a 2 requirements in Page Designer.

Page must be public
Page must enable meta tags

Why does it only work for public pages? Because when a page is protected behind authentication, other websites and apps should not be able to access the content at all. So when those requirements are met, a first meta tag is added to Page Designer:

First meta tag is added to Page Designer

You can choose from a list of predefined meta tag names

Also feel free to enter your own meta tag names for maximum flexibility. Here is my demo app configuration with 9 meta tags:

In the real world this feature should be used with dynamic data. Let's say you have a product table and a product details page. The meta tags could leverage the page items associated to the product table to share APEX pages with real value.

Meta tags work even better when matched with another new feature of APEX 22.2: Web Share. But that is for a different blog post.

Let me know if this feature is useful and if you'd like to see it improved.