Character limits on Meta title and descriptions boxes

[14Steve14]

Phoenix 1.0.9.1 PHP 8.0

I have been working on SEO on our website and thought that it may be good to add in the recommended maximum characters and show the character count next to the meta tag boxes. We have first altered the code in the admin/includes/actions/manufactures/infoboxes/edit.php file.

Firstly this is the correct page as it seems to work. Is there a way to override this file?

Secondly can someone confirm that what we are doing is the right approach. Here is the code for the file for my version.

Code: Select all

$mInfo = &$table_definition['info'];
$heading = TEXT_HEADING_EDIT_MANUFACTURER . ' <small>' . TEXT_EDIT_INTRO . '</small>';
$link = $GLOBALS['link']->set_parameter('mID', (int)$mInfo->manufacturers_id);

$contents = ['form' => new Form('manufacturers', (clone $link)->set_parameter('action', 'save'), 'post', ['enctype' => 'multipart/form-data'])];
$contents[] = ['text' => TEXT_EDIT_INTRO];
$contents[] = ['text' => TEXT_MANUFACTURERS_NAME . '<br>' . new Input('manufacturers_name', ['value' => $mInfo->manufacturers_name])];
$contents[] = ['text' => TEXT_MANUFACTURERS_IMAGE . '<br><div class="custom-file mb-2">' . new Input('manufacturers_image', ['id' => 'inputManufacturersImage', 'class' => 'custom-file-input'], 'file') . '<label class="custom-file-label" for="inputManufacturersImage">' . $mInfo->manufacturers_image . '</label></div>'];

$manufacturer_inputs_string = $manufacturer_description_string = $manufacturer_seo_description_string = $manufacturer_seo_title_string = '';
foreach (language::load_all() as $l) {
    $manufacturer = $GLOBALS['db']->query(sprintf(<<<'EOSQL'
SELECT manufacturers_url, manufacturers_seo_title, manufacturers_description, manufacturers_seo_description
 FROM manufacturers_info
 WHERE manufacturers_id = %d AND languages_id = %d
EOSQL
    , (int)$mInfo->manufacturers_id, (int)$l['id']))->fetch_assoc();
    $flag_image = $GLOBALS['Admin']->catalog_image("includes/languages/{$l['directory']}/images/{$l['image']}", [], $l['name']);

    // URL input without character count
    $manufacturer_inputs_string .= '<div class="input-group"><div class="input-group-prepend"><span class="input-group-text">' . $flag_image . '</span></div>' . new Input("manufacturers_url[{$l['id']}]", ['value' => $manufacturer['manufacturers_url']]) . '</div>';

    // SEO Title input with character count below
    // SEO Title input with character count below, using a textarea for two rows
$seo_title_char_count = strlen($manufacturer['manufacturers_seo_title'] ?? '');
$manufacturer_seo_title_string .= '<div class="input-group"><div class="input-group-prepend"><span class="input-group-text">' . $flag_image . '</span></div>'
    . (new Textarea("manufacturers_seo_title[{$l['id']}]", ['cols' => '80', 'rows' => '2', 'oninput' => "updateCharCount(this, 60, 'manufacturers_seo_title_count_{$l['id']}')"]))
        ->set_text($manufacturer['manufacturers_seo_title'])
    . '</div><span id="manufacturers_seo_title_count_' . $l['id'] . '" class="char-count" style="float: right;">' . $seo_title_char_count . '/60</span>';

    // Description textarea without character count
    $manufacturer_description_string .= '<div class="input-group"><div class="input-group-prepend"><span class="input-group-text">' . $flag_image->set('style', 'vertical-align: top;') . '</span></div>' 
        . (new Textarea("manufacturers_description[{$l['id']}]", ['cols' => '80', 'rows' => '10']))->set_text($manufacturer['manufacturers_description']) . '</div>';

    // SEO Description textarea with character count below
    $seo_description_char_count = strlen($manufacturer['manufacturers_seo_description'] ?? '');
    $manufacturer_seo_description_string .= '<div class="input-group"><div class="input-group-prepend"><span class="input-group-text">' . $flag_image . '</span></div>' 
        . (new Textarea("manufacturers_seo_description[{$l['id']}]", ['cols' => '80', 'rows' => '5', 'oninput' => "updateCharCount(this, 160, 'manufacturers_seo_description_count_{$l['id']}')"]))->set_text($manufacturer['manufacturers_seo_description']) 
        . '</div><span id="manufacturers_seo_description_count_' . $l['id'] . '" class="char-count" style="float: right;">' . $seo_description_char_count . '/160</span>';
}

$contents[] = ['text' => TEXT_MANUFACTURERS_URL . $manufacturer_inputs_string];
$contents[] = ['text' => TEXT_EDIT_MANUFACTURERS_SEO_TITLE . $manufacturer_seo_title_string];
$contents[] = ['text' => TEXT_EDIT_MANUFACTURERS_DESCRIPTION . $manufacturer_description_string];
$contents[] = ['text' => TEXT_EDIT_MANUFACTURERS_SEO_DESCRIPTION . $manufacturer_seo_description_string];
$contents[] = [
    'class' => 'text-center',
    'text' => new Button(IMAGE_SAVE, 'fas fa-save', 'btn-success mr-2')
            . $GLOBALS['Admin']->button(IMAGE_CANCEL, 'fas fa-times', 'btn-light', $link),
];

Lack of confidence with coding so just wanting to check that it is right before moving on to the other areas where this could be helpful.

Cheers

[14Steve14]

I forgot to add the last bit of code to the last post.

Code: Select all

<script>
function updateCharCount(element, maxCount, counterId) {
  const count = element.value.length;
  const counterElement = document.getElementById(counterId);
  if (counterElement) {
    counterElement.textContent = count + '/' + maxCount;
  }
}
</script>

Is there a way to avoid using that script or is in totally necessary.

[burt]

Admin does not have overrides.
You could probably use a Hook to achieve some of this.

I don't quite see the point of adding in extra code to limit yourself.
You could probably just have the counting bit?

[ecartz]

Admin does not have overrides.

Admin has overrides but admin actions do not, since they aren't classes.

You could use the infobox hook to add content to the infobox. Or the JS to the page. You can add the oninput handler via JS. Also the accept parameter via JS.

It seems like the edit intro could be added to TEXT_HEADING_EDIT_MANUFACTURER but perhaps that is used in more than one place.

[14Steve14]

Thanks @burt and @ecartz .

Lots of food for thought.

I am after a way of showing the character length of meta titles and descriptions to get all relevant SEO keywords within the limits set by search engines. Starting with the manufacturers info first, then will progress in the next few weeks to other areas. It will save me from having to upload them into another program first to adjust them, then add them into the admin section.