SEO Basics: Difference between revisions

(8 intermediate revisions by the same user not shown)

Line 1:

SEO (Search Engine Optimization)

This article has information that can be applied broadly, but the focus is on how SEO is used by WordPress and MediaWiki.

There are so many websites that have so much information about so many granular details. Sometimes they even mention the basics, like quality content and a well organized website. That's 98% of it right there. The next 3%, as is similar to many things, is the most difficult. About 2% of that is presenting it to a search engine in the manner they recommend. That can be done through sitemaps. But if the website is well organized and not very large, a sitemap may not be necessary.

Start with the simple stuff like the Title Tag. Wordpress automatically inserts the Title Tag into the HTML (regardless of whether there's a plugin to stop the display of the Title Page to users) and it appends the domain name to the Title Tag (good for SEO, but bad for how it looks on a user's tab, not sure if multiple TITLE Elements would help with the first for User display and the latter for SEO robots / spiders)

The classic META Tags have 5 attributes: charset, content, http-equiv, name, scheme, with the name attribute the most relevant to SEO. The Name Attribute has several values: application-name, author, desription, generator, keywords, viewport.

Line 26:

Line 35:

For a website administrator, they care about rankings. For a search engine, they care about how information will be displayed for a viewer.

===Wordpress Plugins for Images===

Phoenix Media Rename (useful) is a simple Plugin that allows for this and it even automatically replaces spaces with dashes ( - ). It also allows for "bulk renaming", but only for manual modifications to the name (IE, it can't add "My Web Site" to the beginning of every file name).

Media Library Assistant (Not very useful): adds some (obscure) fields to what can be associated with a Media File, Parent Info, Menu Order, Attachment Metabase (read only), and an alternate list view, Allows for additional Categories to be created

Enhanced Media Library (useful): Some Utilities for importing and exporting, Add several tabs to Settings, Media (including allowed file types)

WP Media Folder (very useful, but...): Creates a folder and file structure for media, so very handy for a lot of media. Unfortunately it breaks some other Media Plugins, but the fix is easy, just disable it for others to work

Add from Server: A plugin that allows upload of files that otherwise cause the Wordpress Media functionality to cough up a hairball (large files, etc.)

Admin Columns showed promise for making columns wider, but didn't work and messed other stuff up.

===Images===

The URL is of course ~~used~~ (~~but predefined~~ by ~~Wordpress~~)

The URL of the image is of course available, but cannot be changed within WordPress.

Wordpress generates multiple versions of an image in the name of "responsive" (IE for multiple smaller screens), supposedly three by default. Themes can also create additional image sizes, along with other plugins. These images are offered to browsers in with the srcset value in an Image Tag. The Phoenix Media renaming tool renames all of the various image files (https://make.wordpress.org/core/2015/11/10/responsive-images-in-wordpress-4-4/).

The Title Tag does NOT show up anywhere in a Page or Post, nor do they appear in raw HTML. The Title Field Tag is used in a Sitemap File and is marked as [[wikipedia:CDATA|CDATA]] to ensure that if any special characters are used they are interpreted literally and not as markup.

Line 38:

Line 62:

The Description Tag does NOT show up anywhere in a Page or Post, nor do they appear in raw HTML.

Open Graph / OG, shows up in HTML as <meta property="og:image" content="https://NameOfFile&lt;nowiki/&gt;.jpg"/> According to current information, Facebook uses it. Google

Open Graph / OG, shows up in HTML as <meta property="og:image" content="https://NameOfFile&amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;nowiki/&amp;amp;amp;amp;amp;amp;amp;amp;amp;gt;.jpg"/> According to current information, Facebook uses it. Google

Default ALT Description to compensate for blank alt tags

Line 56:

Line 80:

Media Library Assistant can Bulk update ALT fields for images (note WP Media folder has to be deactivated for it to work)

===Image CleanUp===

No plugins worked better than an old fashion file search using a regular expression in Directory Opus to find all of the automatically generated images (thumbnails): .*x[0-9][0-9][0-9] (then moved them to another folder instead of deleting them)

A Useful CLI option: WP-CLI (need to download and install it, Google it)

Adding the below code to a theme's functions.php file will take existing information and create Figure and FigCaption elements<syntaxhighlight lang="text">

Line 85:

Line 113:

=== Schema.org ===

===Schema.org===

developed by several search engines to enhance how information is "represented" / displayed to users using tags such as the following;

Line 92:

Line 120:

<meta itemprop=

MOZ seems to be a good source of information on searching.

MOZ seems to be a good source of information on searching.

===Mobile Enhancements===

And for mobiles (AKA "responsive" themes), here are a couple of interesting plugins: Mobile Pack (older), Theme Switcha, WPTouch (but doesn't always do the site graphic properly), Equivalent Mobile Redirect & WP Mobile Redirect (if you want a separate site for mobile), Jetpack

Message for mobile users: It is not possible to appreciate the grandeur of XYZ when viewing images on a small screen. This mobile site has been created for people interested in information.

===Multi Site===

You need to add the following code to your wp-config.php file just before the /* That’s all, stop editing! Happy blogging. */ line.

1

2

<code>/* Multisite */</code>

<code>define( 'WP_ALLOW_MULTISITE', true );</code>

from https://www.wpbeginner.com/wp-tutorials/how-to-install-and-setup-wordpress-multisite-network/

== Search Engine Perspective ==

Keywords: What people search for. How are they focused on? Well, Yoast has a plethora of opinions on that one.

Title

Headings

Itallic

Bold

== Simple Tweaks ==

=== HTML Elements / Tags ===

There are HTML Elements / Tags that Search Engines take note of

==== Heading (hn) Element / Tag ====

As noted in the Wikipedia article (https://en.wikipedia.org/wiki/HTML_element#Basic_text), the Heading Element is not just useful for styling text. And it actually shouldn't be used for that. The hn (h1, h2, h3, etc.) should be used to indicate important text (IE Keywords). A great example of this is Wikipedia (and this page too). Notice how Wikipedia (actually Mediawiki) has Heading, Sub-Heading 1, Sub-Heading 2, etc. It isn't just for styling, but also organization.

==== Bold ( <nowiki></nowiki>) and Emphasis ( <nowiki></nowiki> ) Elements / Tags ====

According to this page (https://www.oncrawl.com/oncrawl-seo-thoughts/5-basic-ways-use-css-seo/) and others, this is another item Search Engines make note of when looking for Keywords.

Here's a cool trick... If one wants to utilize the Bold and Emphasis features of HTML to garner the attention of Search Engines, but doesn't want to affect the look of text, try the simple example below. It essentially strips away the stylizing of the Bold and Emphasis Elements, but allows them to remain in the HTML code.<syntaxhighlight lang="text">

<html>

<body>

Italic

Bold

<style>

em {

font-style:normal;

}

b {

font-weight:normal;

}

</style>

</body>

</html>

</syntaxhighlight>The result of the above HTML code in a browser is;<syntaxhighlight lang="text">

Italic

Bold

</syntaxhighlight>

==Terms==

===Backlinks===

What is the difference between a ''link'' and a ''backlink''? Perspective.

This is a very selfish term I don't like, as it looks at LINKS (what they really are) from the receiving web site's perspective and renames them "backlinks". They're really links and they're for users to easily find stuff.

@@ Line 1: / Line 1: @@
 SEO (Search Engine Optimization)
+This article has information that can be applied broadly, but the focus is on how SEO is used by WordPress and MediaWiki.
+There are so many websites that have so much information about so many granular details.  Sometimes they even mention the basics, like quality content and a well organized website.  That's 98% of it right there.  The next 3%, as is similar to many things, is the most difficult.  About 2% of that is presenting it to a search engine in the manner they recommend.  That can be done through sitemaps.  But if the website is well organized and not very large, a sitemap may not be necessary.
+<Title></Title>
+Start with the simple stuff like the Title Tag.  Wordpress automatically inserts the Title Tag into the HTML (regardless of whether there's a plugin to stop the display of the Title Page to users) and it appends the domain name to the Title Tag (good for SEO, but bad for how it looks on a user's tab, not sure if multiple TITLE Elements would help with the first for User display and the latter for SEO robots / spiders)
 The classic META Tags have 5 attributes: charset, content, http-equiv, name, scheme, with the name attribute the most relevant to SEO.  The Name Attribute has several values: application-name, author, desription, generator, keywords, viewport.
@@ Line 26: / Line 35: @@
 For a website administrator, they care about rankings.  For a search engine, they care about how information will be displayed for a viewer.
+===Wordpress Plugins for Images===
+Phoenix Media Rename (useful) is a simple Plugin that allows for this and it even automatically replaces spaces with dashes ( - ).  It also allows for "bulk renaming", but only for manual modifications to the name (IE, it can't add "My Web Site" to the beginning of every file name).
+Media Library Assistant (Not very useful): adds some (obscure) fields to what can be associated with a Media File, Parent Info, Menu Order, Attachment Metabase (read only), and an alternate list view, Allows for additional Categories to be created
+Enhanced Media Library (useful): Some Utilities for importing and exporting, Add several tabs to Settings, Media (including allowed file types)
+WP Media Folder (very useful, but...): Creates a folder and file structure for media, so very handy for a lot of media.  Unfortunately it breaks some other Media Plugins, but the fix is easy, just disable it for others to work
+Add from Server: A plugin that allows upload of files that otherwise cause the Wordpress Media functionality to cough up a hairball (large files, etc.)
+Admin Columns showed promise for making columns wider, but didn't work and messed other stuff up.
 ===Images===
-The URL is of course used (but predefined by Wordpress)
+The URL of the image is of course available, but cannot be changed within WordPress.
+Wordpress generates multiple versions of an image in the name of "responsive" (IE for multiple smaller screens), supposedly three by default.  Themes can also create additional image sizes, along with other plugins.  These images are offered to browsers in with the srcset value in an Image Tag.  The Phoenix Media renaming tool renames all of the various image files (https://make.wordpress.org/core/2015/11/10/responsive-images-in-wordpress-4-4/).
 The Title Tag does NOT show up anywhere in a Page or Post, nor do they appear in raw HTML.  The Title Field Tag is used in a Sitemap File and is marked as [[wikipedia:CDATA|CDATA]] to ensure that if any special characters are used they are interpreted literally and not as markup.
@@ Line 38: / Line 62: @@
 The Description Tag does NOT show up anywhere in a Page or Post, nor do they appear in raw HTML.
-Open Graph / OG, shows up in HTML as <meta property="og:image" content="https://NameOfFile&amp;lt;nowiki/&amp;gt;.jpg"/>  According to current information, Facebook uses it.  Google
+Open Graph / OG, shows up in HTML as <meta property="og:image" content="https://NameOfFile&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;nowiki/&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt;.jpg"/>  According to current information, Facebook uses it.  Google
 Default ALT Description to compensate for blank alt tags
@@ Line 56: / Line 80: @@
 Media Library Assistant can Bulk update ALT fields for images (note WP Media folder has to be deactivated for it to work)
+===Image CleanUp===
+No plugins worked better than an old fashion file search using a regular expression in Directory Opus to find all of the automatically generated images (thumbnails): .*x[0-9][0-9][0-9] (then moved them to another folder instead of deleting them)
+A Useful CLI option: WP-CLI (need to download and install it, Google it)
 Adding the below code to a theme's functions.php file will take existing information and create Figure and FigCaption elements<syntaxhighlight lang="text">
@@ Line 85: / Line 113: @@
-=== Schema.org ===
+===Schema.org===
 developed by several search engines to enhance how information is "represented" / displayed to users using tags such as the following;
@@ Line 92: / Line 120: @@
 <meta itemprop=
-MOZ seems to be a good source of information on searching.<br />
+MOZ seems to be a good source of information on searching.
+<br />
+===Mobile Enhancements===
+And for mobiles (AKA "responsive" themes), here are a couple of interesting plugins: Mobile Pack (older), Theme Switcha, WPTouch (but doesn't always do the site graphic properly), Equivalent Mobile Redirect & WP Mobile Redirect (if you want a separate site for mobile), Jetpack
+Message for mobile users: It is not possible to appreciate the grandeur of XYZ when viewing images on a small screen.  This mobile site has been created for people interested in information.
+===Multi Site===
+You need to add the following code to your wp-config.php file just before the /* That’s all, stop editing! Happy blogging. */ line.
+<code>/* Multisite */</code>
+<code>define( 'WP_ALLOW_MULTISITE', true );</code>
+from https://www.wpbeginner.com/wp-tutorials/how-to-install-and-setup-wordpress-multisite-network/
+== Search Engine Perspective ==
+Keywords: What people search for.  How are they focused on?  Well, Yoast has a plethora of opinions on that one.
+Title
+Headings
+Itallic
+Bold
+== Simple Tweaks ==
+=== HTML Elements / Tags ===
+There are HTML Elements / Tags that Search Engines take note of
+==== Heading (hn) Element / Tag ====
+As noted in the Wikipedia article (https://en.wikipedia.org/wiki/HTML_element#Basic_text), the Heading Element is not just useful for styling text.  And it actually shouldn't be used for that.  The hn (h1, h2, h3, etc.) should be used to indicate important text (IE Keywords).  A great example of this is Wikipedia (and this page too).  Notice how Wikipedia (actually Mediawiki) has Heading, Sub-Heading 1, Sub-Heading 2, etc.  It isn't just for styling, but also organization.
+==== Bold ( <nowiki><b></b></nowiki>) and Emphasis ( <nowiki><em></em></nowiki> ) Elements / Tags ====
+According to this page (https://www.oncrawl.com/oncrawl-seo-thoughts/5-basic-ways-use-css-seo/) and others, this is another item Search Engines make note of when looking for Keywords.
+Here's a cool trick...  If one wants to utilize the Bold and Emphasis features of HTML to garner the attention of Search Engines, but doesn't want to affect the look of text, try the simple example below.  It essentially strips away the stylizing of the Bold and Emphasis Elements, but allows them to remain in the HTML code.<syntaxhighlight lang="text">
+<html>
+<body>
+<em>Italic</em>
+<br /><br />
+<b>Bold</b>
+<style>
+em {
+font-style:normal;
+}
+b {
+font-weight:normal;
+}
+</style>
+</body>
+</html>
+</syntaxhighlight>The result of the above HTML code in a browser is;<syntaxhighlight lang="text">
+Italic
+Bold
+</syntaxhighlight>
+==Terms==
+===Backlinks===
+What is the difference between a ''link'' and a ''backlink''?  Perspective.
+This is a very selfish term I don't like, as it looks at LINKS (what they really are) from the receiving web site's perspective and renames them "backlinks".  They're really links and they're for users to easily find stuff.<br />