hello-theme/modules/admin-home/assets/js/components/settings/seo.js

import Stack from '@elementor/ui/Stack';
import Typography from '@elementor/ui/Typography';
import { __ } from '@wordpress/i18n';
import { Setting } from './setting';
import { useSettingsContext } from './use-settings-context';
import { Spinner } from '@wordpress/components';

export const Seo = () => {
	const {
		themeSettings: {
			SKIP_LINK: skipLink,
			DESCRIPTION_META_TAG: descriptionMetaTag,
		},
		updateSetting,
		isLoading,
	} = useSettingsContext();

	if (isLoading) {
		return <Spinner />;
	}

	return (
		<Stack gap={2}>
			<Typography variant="subtitle2">
				{__(
					'These settings affect how search engines and assistive technologies interact with your website.',
					'hello-elementor',
				)}
			</Typography>
			<Setting
				value={descriptionMetaTag}
				label={__('Disable description meta tag', 'hello-elementor')}
				onSwitchClick={() =>
					updateSetting('DESCRIPTION_META_TAG', !descriptionMetaTag)
				}
				description={__(
					'What it does: Removes the description meta tag code from singular content pages.',
					'hello-elementor',
				)}
				code={'<meta name="description" content="..." />'}
				tip={__(
					'Tip: If you use an SEO plugin that handles meta descriptions, like Yoast or Rank Math, disable this option to prevent duplicate meta tags.',
					'hello-elementor',
				)}
			/>
			<Setting
				value={skipLink}
				label={__('Disable skip links', 'hello-elementor')}
				onSwitchClick={() => updateSetting('SKIP_LINK', !skipLink)}
				description={__(
					'What it does: Removes the "Skip to content" link that helps screen reader users and keyboard navigators jump directly to the main content.',
					'hello-elementor',
				)}
				code={
					'<a class="skip-link screen-reader-text" href="#content">Skip to content</a>'
				}
				tip={__(
					'Tip: If you use an accessibility plugin that adds a "skip to content" link, disable this option to prevent duplications.',
					'hello-elementor',
				)}
			/>
		</Stack>
	);
};