← Help

Add Mosaic to Bear Blog

September 16, 2024

Prerequisites

  1. Have a Bear Blog

    First, ensure you’ve created your Bear Blog at bearblog.dev. Your blog URL will look something like yourblogname.bearblog.dev. For example, check out our blog at naveenhonestraj.bearblog.dev.

  2. Sign up for Mosaic

    Next, sign up for Mosaic and add your Bear Blog website to it. Our onboarding widget will guide you through this process, making it quick and easy to get started.

  3. Get the URL from Mosaic

    Once your website is set up in Mosaic, you’ll find the OG image URL under the URL column of your site’s page. Copy this URL, as you’ll need it for the integration.


How to Add Mosaic to Bear Blog

Bear Blog is different from many modern blog platforms because it’s a fully hosted solution, meaning you don’t need to build and deploy it locally. You can simply log in and create blog posts with ease. Here’s how to integrate Mosaic into Bear Blog and add OG images to your posts:

  1. Create or edit a blog post

    Start by either creating a new post or editing an existing one.

  2. Add the meta_image attribute

    In your post, you can add the following attributes to include an OG image:

    title: How to integrate Mosaic in BearBlog.dev
    link: how-to-integrate-mosaic-in-bearblogdev
    meta_image: https://mosaicimg.com/use?url=https://yourblog.bearblog.dev/how-to-integrate-mosaic-in-bearblogdev
    • The meta_image field should contain the Mosaic image URL with the link parameter appended to it.
    • If you haven’t created a custom link for your post, simply publish your post with the title attribute first. Bear Blog will automatically generate a link, which you can then use in the meta_image field when you republish your post.

    Tip: This method allows you to dynamically generate beautiful OG images for your blog posts.


Updating Your Bear Blog Template (Optional)

If you want to make this process even easier, you can update your Bear Blog’s template to automatically include a Mosaic OG image. Here’s how:

title:
meta_image: https://mosaicimg.com/use?url=https://yourblog.bearblog.dev
___

By updating the template, every new post will have the OG image field pre-filled. All you need to do is update the URL with the correct post link.


Optional: Updating the OG Image After a Theme Change

If you’ve recently updated your Bear Blog theme and want the OG images to reflect the new design, there’s no need to manually update each post. Simply head over to Mosaic, locate your website, and click the Refresh button. This will regenerate the OG images with the new theme, ensuring everything stays in sync without any extra effort!