Basic Setup and Guidelines

Generate image url

Throughout this reading, we shall need to generate urls of various images in order to put them at their places. The best method to generate an image url when using this theme is as follows:

Go to Blogger Layout.
Click on pencil icon beside the Image Uploader widget.
Select Upload image from computer.
Upload your image by clicking on Choose file. Wait until image is fully uploaded.
Click on Save button.
Click on pencil icon again.
You can now copy the url available in Image URL field as it is the url of image you have just uploaded.

Meta tags

Meta tags provide important information to browsers and search engines, enhancing SEO and optimizing page display.

Favicon

We know that favicon can be uploaded through Blog settings, but icon uploaded through it is not available in multiple sizes. Therefore, the theme by default doesn't use this icon. You need to explicitly provide url of a png favicon image in order to generate url of same image in multiple sizes for use in meta tags. A dummy image is used as favicon by default.

You would like to change the default favicon. Find the following code snippet in Edit HTML and replace the marked url with your custom favicon url. The image must be of 1:1 ratio with a minimum width of 512px, i.e 512px*512px, 640px*640px, etc.

<Variable name="meta.icon" description="Favicon URL" type="string" default="" value="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisldTSPR5qQSsrqZDyfYV81HFSq4Pko5u8xpbzKJ7V05CZAaCkfxG550uqbp2xlCxukxcVL4i2so2XxNri-wqqUO0yuVLLznfFes1rdmg7Ywq8pWE8FXwWQfcyrNiAPlyI3_ngX12x7-KGzAVPfjiTWPMP3HdwelG4pn729xMfH05-hdWVbQyaIsgMkQg/s0/favicon.png"/>
[!] Favicon URL
[!] @type {String}
[!] Recommended image ratio: 1:1
[!] If Blank: It will use Favicon URL from Blogger Blog Settings
[!] Warning: Dont't add invalid URL

If you would like to use favicon which was uploaded through Blog settings, clear the image url in value attribute and make it empty.

Meta Keywords

To add your custom keywords in keywords meta tag, find the following code snippet and replace marked part with your custom keywords separated by comma.

<Variable name="meta.keywords" description="Keywords Meta Tag content" type="string" default="" value="KEYWORD_1, KEYWORD_2, KEYWORD_3"/>
[!] Keywords Meta Tag content (comma-separated)
[!] @type {String}
[!] If Blank: Doesn't add keywords other than page name
[!] Message: Separate multiple keyword with comma

You can clear the marked part if you don't want to add custom keywords.

Meta description

Meta description can be set through Blog settings by toggling the Enable search description and adding your description in Search description field.

For post and pages, you can add your description through Search description field in the sidebar.

Meta default image

Image meta tag uses the thumbnail of posts or pages if it is available. Therefore, we need to use a default image if there is no thumbnail or for homepage and other pages.

In order to use a default image for such cases, find the following code snippet in Edit HTML and replace the marked part with your custom image url. The image must be of 16:9 ratio with a minimum width of 1280px, i.e. 1280px*720px, 1920px*1080px, etc.

<Variable name="meta.image" description="Image Meta Tag URL" type="string" default="" value="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXcTftM-dWwVR9KOkc8PzPng9FbMz-KC083W_hWFV2t2LA10-l0BtsfTj3J3WL2TrClC8aohb-H2Qn_W2DylQ7R11V71k2SGozHBnjSNAKLEUbKzLW4ALsYwMEjcEGSCIyfGLQwERqsQRFlnTv0wm8M0CkGroeYzpKJ_ZPC6_diPbuINzcP075OzTcF7I/s0/meta-image.png"/>
[!] Image Meta Tag content
[!] @type {String}
[!] Recommended image ratio: 16:9
[!] If Blank: Doesn't add meta tag if any not available
[!] Message: If the view is single item, it will use thumbnail url of item if available
[!] Warning: Don't add invalid URL

Opengraph default image

Opengraph image meta tag uses the thumbnail of posts or pages if it is available. Therefore, we need to use a default image if there is no thumbnail or for homepage and other pages.

<Variable name="opengraph.image" description="Open Graph Image URL" type="string" default="" value="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXxFjLFkLM3eZsKgzpO8R-f3pQPsb-ica2dzqZ-TpJw-fhOsZMG3fUs6UzvcualJbzE9xoUPtqIAI68pQcy9E2IXSFt8SxYEpcaIln78PEZzj1S-iiDp4aJtwNdkImyH5oEtzuzKUxetnUMMjaJWhi6BTLBkNxQX8tUzsL3Q2hqQq_hBF7_w6z5yUYxws/s0/open-graph-image.png"/>
[!] Open Graph Image URL
[!] @type {String}
[!] Recommended image ratio: 16:9
[!] If Blank: Doesn't add meta tag if any not available
[!] Message: If the view is single item, it will use thumbnail url of item if available
[!] Warning: Don't add invalid URL

Tips!
You can also use the same image url used in Meta default image.

Twitter Card default image

Twitter card image meta tag uses the thumbnail of posts or pages if it is available. Therefore, we need to use a default image if there is no thumbnail or for homepage and other pages.

<Variable name="twitter.image" description="Twitter Card Image URL" type="string" default="" value="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg31MuIa565c6YDVhaRleYhJeby_kBMwkr0CTcf27hP0n3b71IPnvFtkVhSIveXiBSMZ56AzX_-s5PqayrsuY7LYwJiX1P2u0acO1kiCjIuPzQ0e3uSsqATTI_2zlbHaJ48e_oZvwwZgBhTjpHJnnKiXeWF2Pwco8UHeZoP-M7bLskRArbe9Td_Ve_B1iI/s0/twitter-card-image.png"/>
[!] Twitter Card Image URL
[!] @type {String}
[!] Recommended image ratio: 16:9
[!] If Blank: Doesn't add meta tag if any not available
[!] Message: If the view is single item, it will use thumbnail url of item if available
[!] Warning: Don't add invalid URL

Tips!
You can also use the same image url used in Meta default image or Opengraph default image.

Rich Results

To avoid errors in Google Rich Results Test, we have added url of dummy images. However you can replace them with your custom image urls.

Schema organization logo

Find the following code snippet in Edit HTML and replace the marked url with your custom logo url. The logo must be of 1:1 ratio with a minimum width of 512px, i.e 512px*512px, 640px*640px, etc.

<Variable name="metadata.organizationLogo" description="Metadata Organization Logo" type="string" default="" value="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLYXKas2Slg6XQSDnVv2sZp3WrBMgpRTTNdEEmBCO54XHW3kmftJKJMU-CrNBEwOn0CU1J-KwAeGuS-ETuCpXhZob0AYrl789Lrwu_T_CDJYJ2k1hOQ-ur_Ek-iEAIm5-0C-nMjY8DtWtfyZfRaOXJC8mdBvdunVCbObp9ra6rMrcSg7jGCf298UE13as/s0/organization-logo.png"/>
[!] Metadata Organization Logo
[!] @type {String}
[!] Recommended image ratio: 1:1
[!] Warning: Don't add invalid URL

Default schema thumbnails

Article schema uses the thumbnail of posts or pages if it is available. Therefore, we need to use a default image if there is no thumbnail.

In order to use a default thumbnail image for such cases, find the following code snippet in Edit HTML and replace the marked part with your custom thumbnail image url. The image must be of 16:9 ratio with a minimum width of 1280px, i.e. 1280px*720px, 1920px*1080px, etc.

<Variable name="metadata.defaultThumbnail" description="Metadata Default Thumbnail" type="string" default="" value="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvC6vD6OtRfm9LfBlmnU43YBdoPU22C5TbYwdvBh-tcs70b-uyK7D_iri6WRtUUrtvSrhJrp5vo3IQTo-ta0t_J1VrozfN3ZdCapfbhEKcqMgphQeM3clXm8goom0uOKITSosfDKij6h9AUyYyZ7-nliDKV5EOiE9YyzFA_yW1vtud1lIt_mgTxGpBHUA/s0/metadata-default-thumbnail.png"/>
[!] Metadata Default Thumbnail
[!] @type {String}
[!] Recommended image ratio: 16:9
[!] Warning: Don't add invalid URL

Article schema

The theme uses Article schema type for blog pages and BlogPosting schema type for blog posts. You can also add a label News to a post in order to use NewsArticle schema type for that post.

Image ratios

This section gives you information about what ratio and size of images you should use.

Post thumbnail

To make sure your images do not get cropped on social platforms' previews, thumbnails, etc. We decided to use images of fixed ratio everywhere where post thumbnails are used.

We recommend using images of 16:9 with a minimum width of 1280px, i.e. 1280px*720px, 1920px*1080px, etc. as your post or page thumbnails. For post images other than the thumbnail, feel free to use images of any ratio or size.

Carousel image

To make sure carousel images do not get cropped, use images of 5:2 ratio with a minimum with of 1080px, i.e. 1080px*432px, 1920px*768px, etc.

Footer logo

For footer logo, use an image of 1:1 ratio with a minimum width of 512px, i.e. 512px*512px, 640px*640px, etc.

Optimization

This section will guide you best practices to optimize your blog when using this theme.

Jump breaks

In the year 2009, Blogger introduced the Jump Breaks. With Jump Breaks you can show just a snippet of your post on your blog's index page. Blogger will insert a Read more link to the full post page where your readers can keep reading.

It is highly recommended to add Jump Breaks after first or second paragraph of every posts. There are two ways of adding Jump Breaks to your post. The first way is by clicking on Insert Jump Break icon in Compose view and the second way is to add  in HTML view.

Warning!
If you don't add jump breaks in your posts, things may break if any of your posts has too much contents. The pagination will not work as expected, the number of posts you want to show on index page will not be respected, none of your posts will be displayed on index page and many other unexpected behaviours. This doesn't apply only to our theme!

WebP image serving

Blogger recently added an option WebP image serving in Blog Settings, it can be toggled on to automatically serve post images in WebP formats. Blogger does it by automatically adding the rw parameter to post images. It improves the performance of the webpages.

It is recommended to toggle on WebP image serving from Blog Settings.

Defer off-screen images

Blogger recently added an option Lazy load images in Blog Settings, it can be toggled on to automatically lazy load post images. The post images will only be loaded when reader scrolls to those particular images. Blogger does it by automatically adding loading='lazy' to all the post images. It improves the performance of the webpages.

It is recommended to toggle on Lazy load images from Blog Settings.

Custom codes

This section will guide you to add custom codes in the theme. We recommend you add custom codes as described below for better managements.

Custom meta tags

Custom meta tags can be added through Blogger HTML Editor.

Go to Blogger HTML Editor.
Find the following line of code and add your custom meta tags below it.
```
<b:comment></b:comment>
```

Custom CSS

We do not recommend to add custom CSS through Theme Designer as the theme does not support it. You need to add your custom CSS through Blogger HTML Editor.

Go to Blogger HTML Editor.
Find the following line of code and add your custom CSS below it.
```
/*--[ Custom CSS Global (NO AMP) ]--*/
```
Tips!
Along with CSS, add a helpful comment which describes the use of custom added CSS.

Plus UI