Add headings to the code for generated articles and improve readability structure

Wishlist Blog
1

If you check the code of the generated article, you’ll see it has no headings:

Screenshot 2024-10-11 at 1.53.16 PM
Screenshot 2024-10-11 at 1.53.16 PM807×363 69.1 KB

The modals (popup cards) also have no proper H1 titles and readability structures The paragraphs has no tags.

2 Likes
5

The lack of an H1 tag for the Title of the article significantly degrades SEO.

1 Like
6

Hi there, @Kenley_Lamaute :waving_hand:

Thank you so much for the feedback! We’ll try to consider this functionality in the future, especially if more users upvote it.

As for now, we have a custom solution, adding h1 titles to the widget. For this, please add the code below to the Custom JS field on the Settings tab of your widget’s settings:

const WIDGET_SELECTOR = 'elfsight-app-WIDGET_ID';

const waitForElement = (selector, root = document) =>
	new Promise((res) => {
		let i = 0;

		const check = () => {
			const component = root.querySelector(selector);

			if (component) {
				res(component);
			} else if (i !== 50) {
				setTimeout(check, 100);
				i++;
			}
		};

		check();
	});

waitForElement(`.${WIDGET_SELECTOR} > div`).then((widgetContainer) => {
	const title = widgetContainer.querySelector('[class*="header__Title-sc"]');
	const titleH1 = document.createElement('h1');

	titleH1.className = title.className;
	titleH1.style.margin = 0;

	titleH1.innerHTML = title.innerHTML;

	title.replaceWith(titleH1);

	const postTitles = widgetContainer.querySelectorAll(
		'[class*="card-content__CardContentTitle-sc"]'
	);

	postTitles.forEach((postTitle) => {
		const titleH2 = document.createElement('h2');
		titleH2.className = postTitle.className;
		titleH2.innerHTML = postTitle.innerHTML;
		postTitle.replaceWith(titleH2);
	});

	const replaseTagsInPost = (post) => {
		const popupContainer = document.querySelector(
			'.es-portal-root.eapps-blog-6abbfd3f-a8cd-4108-88cd-a40e192b4e3b-custom-css-root'
		);

		const postTitle = popupContainer.querySelector('[class*="post__Title-sc"]');
		const titleH1 = document.createElement('h1');
		console.log(popupContainer);
		console.log(postTitle);
		titleH1.className = postTitle.className;
		titleH1.style.margin = 0;

		titleH1.innerHTML = postTitle.innerHTML;

		postTitle.replaceWith(titleH1);
	};

	const posts = widgetContainer.querySelectorAll(
		'[class*="card-container__CardContainer-sc"]'
	);
	posts.forEach((post) => {
		post.addEventListener('click', () => {
			setTimeout(function () {
				replaseTagsInPost(post);
			}, 300);
		});
	});
});

Do not forget to replace WIDGET_ID in the 1st line of the code with the ID of your widget :slightly_smiling_face:

1 Like