Jump to main content

Meta Tags

Most often, you would hard-code your meta title, description and keywords into the page. However if you're generating pages dynamically (using the menu or read more elements) or you have an SEO-savvy client pestering you to edit meta data, then there's no harm in providing a basic editing interface to do so. And that's precisely what this snippet achieves. Just place the snippet in the 'head' section of a page, deleting any existing title, description or keyword tags that may already be present. When the page is flipped into edit mode, a website author can now enter custom meta data, towards the top of the page. The markup text element is best to use, because it'll safely encode any quote marks or other special characters a website author may attempt to enter. Of course, you could expand this further to include other data, such as Open Graph tags.

Example

Use the web inspector developer tools or view the source code of this page. You'll see the custom title, description and keywords that were entered.

As a side note, the meta data is injected into the page using server-side PHP, before the page is sent down to the web browser. So unlike Javascript, the data is always present in the page. This is especially good for search engines and SEO.

HTML & PHP

<?php if(webyep_bIsEditMode() == true) : ?><strong>Title: </strong><?php endif; ?>
<?php if(webyep_bIsEditMode() == false) : ?><title><?php endif; ?>
<?php webyep_markupText("Title", false, "", false, true, 600, 400); // WebYepV2 ?>
<?php if(webyep_bIsEditMode() == false) : ?></title><?php endif; ?>
<?php if(webyep_bIsEditMode() == true) : ?><hr><?php endif; ?>

<?php if(webyep_bIsEditMode() == true) : ?><strong>Description: </strong><?php endif; ?>
<?php if(webyep_bIsEditMode() == false) : ?><meta name="description" content="<?php webyep_markupText("Description", false, "", false, true, 600, 400); // WebYepV2 ?><?php if(webyep_bIsEditMode() == false) : ?>" /><?php endif; ?>
<?php if(webyep_bIsEditMode() == true) : ?><hr><?php endif; ?>

<?php if(webyep_bIsEditMode() == true) : ?><strong>Keywords: </strong><?php endif; ?>
<?php if(webyep_bIsEditMode() == false) : ?><meta name="keywords" content="<?php endif; ?><?php webyep_markupText("Keywords", false, "", false, true, 600, 400); // WebYepV2 ?><?php if(webyep_bIsEditMode() == false) : ?>" /><?php endif; ?>
<?php if(webyep_bIsEditMode() == true) : ?><hr><?php endif; ?>

CSS

Javascript