Addition of Accordion Headings for SEO

[Mr-Williams32]

Hello,

I really hope you can add this as soon as possible. From a SEO perspective it would make more sense to have heading options for the accordion. Ideally it would make sense to have the heading as the title of the accordion vs just giving a title option. When adding accordions it makes sense to have either H2's or H3's. Currently you can not add headings for accordions which makes it hard for search bots to rank the content that is hidden.

Here is a great example of a h3 tags being used on accordions - https://www.ryrob.com/how-start-blog

If you inspect the code under each accordion in the link i sent you will find a h3 tag which greatly helps with SEO. Please provide guidance and support for this feature. Do you have a work around that you can send me screenshots on how to incorporate this? Please note by adding this feature you would place your plugin ahead of the competitors. I have found many forums where this is expressed so it is a legit problem.

Also please note i tried manually adding the h tag but this creates problems for the padding. Any help, much appreciated.

Cheers!

• Darrell

[Mr-Williams32]

Is there any one that will respond to this ?

[mindctrl]

@Mr-Williams32 we use GitHub for issue tracking of development tasks. Did you contact support about this problem? Someone sent me this questions through support channels and for now the fix is the custom CSS we sent back. Did that work for you?

[Mr-Williams32]

I have located the code but once placed in the additional CSS class section it does not work

[nickcernis]

@Mr-Williams32 You can try the steps below as a workaround to not being able to set accordion headers. The changes wrap the accordion headings in h3 tags automatically and add styling to correct the padding issue you mentioned.

1. Take a site backup.

2. Remove any h3 tags that you manually added to the accordion headers.

3. Add this PHP code to bottom of your active theme's functions.php file. (On some hosts this is accessible at Appearance → Theme Editor, otherwise you may need to use SFTP to edit the file remotely.)

   add_filter( 'render_block', 'custom_atomic_blocks_accordion_titles', 10, 2 );
   function custom_atomic_blocks_accordion_titles( $content, $block ) {
   	if ( $block['blockName'] === 'atomic-blocks/ab-accordion' || $block['blockName'] === 'genesis-blocks/gb-accordion' ) {
   		$content_with_h3 = preg_replace(
   			'/(<summary.*?>)(.+)(<\/summary>)/',
   			'${1}<h3>${2}</h3>${3}',
   			$content
   		);
   		return $content_with_h3;
   	}
   
   	return $content;
   }

4. Remove any previous CSS code you added.

5. Add this CSS to the Appearance → Customize → Additional CSS area.

   summary.ab-accordion-title h3,
   summary.gb-accordion-title h3 {
   	display: inline;
   	font-size: inherit;
   	font-weight: normal;
   }

6. Save your changes and clear any caching plugins or services.

Your accordion headers will now be wrapped in h3 tags on the front end without having to manual add headers in the editor.

[Mr-Williams32]

Thank you for the reply, I think this is a bit complex just to add a heading. I have deactivate this plugin and move to ultimate blocks since they provide this option by default. Please consider adding this feature since it is a best practice for SEO thanks for all your help really appreciate it.

[nickcernis]

@Mr-Williams32 Sure, thank you for taking the time to follow up and offer this feedback.