General

Use the Heading & Paragraph elements properly

You should use the Heading element only when the content is key concepts.

For regular content, the Paragraph element is our recommendation.

Use element variation whenever possible

In JSN PageBuilder 4, every element has multiple variations ready to use. So whenever possible, use those variations instead of constructing it from scratch.

Check the following example with heading and icon:

Do not use Icon element + Heading element separately. 

Use the variation of Heading that has icon included.

Keep the content code clean

Heading

Choose the proper heading HTML tag to have a logical heading structure, which is good for SEO.

Image

Set “Image Size” to “Full Width” when you need to fill the whole container

If an image needs to be filled to the whole container as per design, then set the “Image Size” parameter to “Full Width”.

Set parameter for “All” devices so that mobile layout will inherit as well.

Make sure the image has ALT text setup

An alt tag, also known as "alt attribute" and "alt description," is an HTML attribute applied to image tags to provide a text alternative for search engines. 

You should make sure that all images have an alt tag fill with the right description since it can positively impact an e-commerce store's search engine rankings.

Read more about ALT and title text here.

Choose to show image wisely

• If the image delivers actual content, use the Image element.

• If the image serves as a background with some text, set it as a background for the container.

Button

Use Button element for a Call-to-action (CTA)

For CTA, use Button element, not Paragraph.

When CTA is just a link, use Button element without border, but preserve the padding to keep clicking area big enough.

Use Button variations

Different button variations are designed to help users have more flexibility when they use JSN PageBuilder 4.

References

https://yoast.com/image-seo-alt-tag-and-title-tag-optimization/